Set Axis Label Color in ChartJS

0
63
How to Filter an Object by Key in JavaScript


Mar 29, 2022

With ChartJS 3, you can change the color of the labels by setting the scales.x.ticks.color and scales.y.ticks.color options.
For example, below is how you can make the Y axis labels green and the X axis labels red.

Note that the below doesn’t work in ChartJS 2.x, you need to use ChartJS 3.

const ctx = document.getElementById('chart').getContext('2d');

const chart = new Chart(ctx, {
  
  type: 'bar',
    data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F'],
    datasets: [{
        label: 'Example Data',
        data: [12, 19, 3, 5, 2, 3],
    }]
  },
  
  options: {
    responsive: true,
    scales: {
      y: {
        ticks: { color: 'green', beginAtZero: true }
      },
      x: {
        ticks: { color: 'red', beginAtZero: true }
      }
    }
  }
});

Below is a live example.

You can use any color format supported by ChartJS, including hex codes.
For example, below is an alternative approach for setting the Y axis ticks to red and X axis ticks to green.

options: {
  responsive: true,
  scales: {
    y: {
      ticks: { color: '#00ff00', beginAtZero: true }
    },
    x: {
      ticks: { color: '#ff0000', beginAtZero: true }
    }
  }
}

More Chartjs Tutorials



Source link

Leave a reply

Please enter your comment!
Please enter your name here