1

Im trying to change the color of the axis labels. Ive tried different tutorials and tips on the net. And from stackoverflow. but none of them seem to work. Any idea on how i can change the colors?

enter image description here

Matt
  • 12,848
  • 2
  • 31
  • 53
sadibaba2000
  • 209
  • 1
  • 2
  • 4

2 Answers2

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>
LeeLenalee
  • 27,463
  • 6
  • 45
  • 69
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.

Marcel
  • 398
  • 2
  • 4
  • 22