Search code examples
javascriptcsschart.js

How to change the label color in chart.js?


I have a pie chart defined like so,

var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: data.labels,
            datasets: [{
                data: data.values,
                backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 206, 86)',
                'rgb(75, 192, 192)',
                'rgb(153, 102, 255)',
                'rgb(255, 159, 64)',
                'rgb(204, 255, 64)',
                'rgb(64, 159, 255)',
                'rgb(175, 64, 255)'
                ],
                options: {
                    responsive : true,
                }
            }],
            fontColor : '#FFFFFF'

        }
    });

how the chart looks,

enter image description here

This however is setting the font color of the labels to black, how can I change this color. Any pointers on this is highly appreciated. Thanks!


Solution

  • You can change the font color of legend­'s label, in the following way ...

    options: {
       legend: {
          labels: {
             fontColor: 'white'
          }
       },
       ...
    }
    

    ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

    var chart = new Chart(ctx, {
       type: 'doughnut',
       data: {
          labels: ['A', 'B', 'C', 'D', 'E'],
          datasets: [{
             data: [1, 1, 1, 1, 1],
             backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 206, 86)',
                'rgb(75, 192, 192)',
                'rgb(153, 102, 255)'
             ]
          }]
       },
       options: {
          legend: {
             labels: {
                fontColor: 'white' //set your desired color
             }
          }
       }
    });
    canvas{background: #222}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <canvas id="ctx"></canvas>