CODEWITHSUNDEEP
javascriptchart.js
sadibaba2000
sadibaba2000

Reputation: 229

How to change chart.js axis labels color?

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

Upvotes: 1

Views: 703

Answers (2)

LeeLenalee
LeeLenalee

Reputation: 31439

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>

Upvotes: 2

Marcel
Marcel

Reputation: 438

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.

Upvotes: 0

Related Questions