How to change label color with chart.js and JavaScript?

To change the color of the labels in a chart created with Chart.js, you can modify the fontColor property in the options object.

Here’s an example:

<canvas id="myChart"></canvas>

<script>
  var ctx = document.getElementById("myChart").getContext("2d");

  var chart = new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
      legend: {
        labels: {
          fontColor: "blue"
        }
      }
    }
  });
</script>

In this example, we create a chart with Chart.js and specify the font color of the labels in the options object. We set the fontColor property of the labels object under the legend property to “blue”.

Note that you can specify the color in any valid CSS color format, such as “red”, “#ff0000”, or “rgb(255, 0, 0)”.