Chartjs-How to change the label color and set y-axis values 1k intervals and hide y-axis?

by

0👍

Unless you have a really big screen the stepSize wont be 1000 as you wanted because there isn’t enough room to render all those ticks. Since you want to have 99 ticks.

But to change the color of the ticks you can use the fontColor property in the ticks config. To make it go from 100K to 1K you can set the max to 100K and the min to 1K like so:

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [90000, 10009, 30000, 50000, 100000, 30000],
      backgroundColor: 'pink'
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          fontColor: 'red',
          max: 100000,
          min: 1000,
          stepSize: 1000
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Leave a comment