[Chartjs]-How to change chart.js axis labels color?

by

2👍

Since the duplicates didnt work for you I am asuming you are using v3 of the lib, in v3 the way you do this has slightly changed so you use color instead of fontcolor

  options: {
    scales: {
        y: {
        ticks: {
                    color: 'white'
        }
      },
      x: {
        ticks: {
                    color: 'white'
        }
      }
    }
  }

Example:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1,
      borderColor: 'white',
      backgroundColor: 'white'
    }]
  },
  options: {
    scales: {
      y: {
        ticks: {
          color: 'white'
        }
      },
      x: {
        ticks: {
          color: 'white'
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
  background-color: #000;
}
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
</body>

0👍

For me this is how I did it. Add the scales option in your Chart creation

scales: {
      xAxes: [{
        display: true,
        ticks: {
          fontColor: 'black',
          fontSize: 12,
          beginAtZero: true
        }
      }],
      yAxes: [{
        display: true,
        ticks: {
          fontColor: 'black',
          fontSize: 12,
          beginAtZero: true
        }
      }]
    }

If this does not work, can you please update you question with your code. That would make it a lot easier to detect the problem.

Leave a comment