Chart js label font color not changing

Question

I have a pie graph in my web application and above the graph there are labels with names next to them. The text is very hard to read due to the color.(https://i.sstatic.net/C2SX6.png) I really want to change the text color, but for some reason I can't.

I tried:

1. Turning off extentions on chrome.
2. Changing browser.
3. Using extra css style(down)
4. Checked css for global styles, I have only these(also down)

I need to solve this till the end of today, I would be really thankful for your help. Thanks!

My expectations are just to being able to change the font color, nothing more nothing less

The code:

    <script>
        var ctx = document.getElementById('expenseChart').getContext('2d');
        
        var data = {
            labels: [
                {% for expense in expenses_by_type %}
                    "{{ expense.place_type }}"{% if not forloop.last %}, {% endif %}
                {% endfor %}
            ],
            datasets: [{
                data: [
                    {% for expense in expenses_by_type %}
                        {{ expense.total_amount }}{% if not forloop.last %}, {% endif %}
                    {% endfor %}
                ],
                backgroundColor: [
                    'rgb(241,169,12)',
                    'rgb(233,116,24)',
                    'rgb(236,138,20)',
                    'rgb(227,71,36)',
                    'rgb(228,95,28)',
                    'rgb(220,49,43)',
                    'rgb(236,153,12)',
                    'rgb(243,185,4)',
                    'rgb(228,84,28)',
                ],
            }]
        };

        var options = {
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                display: true,
                labels: {
                    fontColor: 'white',
                },
            },
        };



        var myPieChart = new Chart(ctx, {
            type: 'pie',
            data: data,
            options: options,
        });
    </script>

    <style>
        #expenseChart .chartjs-render-monitor .chartjs-legend {
            color: white !important;
        }
    </style>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Bricolage Grotesque', sans-serif;
}

Answer 1

You defined your legend options in the wrong place. It should be in the plugins namespace, also fontColor does not exist anymore, you need to define font.color

options: {
  plugins: {
    legend: {
      labels: {
        font: {
          color: 'red'
        }
      }
    }
  }
}