Sometimes, we want to change X and Y axis font color with Chart.js 3 and JavaScript.

In this article, we’ll look at how to change X and Y axis font color with Chart.js 3 and JavaScript.

How to change X and Y axis font color with Chart.js 3 and JavaScript?

To change X and Y axis font color with Chart.js 3 and JavaScript, we can set the options.scales property.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<canvas id="myChart" width="400" height="400"></canvas>

to add the Chart.js script and canvas.

Then we write:

const ctx = document.getElementById('myChart');

const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      fill: true,
      borderWidth: 1,
    }]
  },
  options: {
    scales: {
      x: {
        ticks: {
          color: 'green'
        }
      },
      y: {
        ticks: {
          color: 'red'
        }
      }
    }
  }
});

We select the canvas with document.getElementById.

Then we set the options.scales.x.ticks.color and options.scales.y.ticks.color properties to set the color of the x and y axis labels respectively.

As a result, we should see the the x-axis labels are green and y-axis labels are red.

Conclusion

To change X and Y axis font color with Chart.js 3 and JavaScript, we can set the options.scales property.