[Chartjs]-How to manipulate Y-Axis in ChartJS

by

1👍

✅

we can use afterBuildTicks options to set our own ticks,

  • so first we filter the max value from data
  • set percentage values of max value in a different array
  • then set ticks using index of ticksArray in afterBuildTicks option
var data =  [90000, 50000, 30000, 14040, 45000, 36000];  //data
var max = Math.max.apply(Math, data);  //find max value   (90000 here)
var ticksArray = [0, (max*25)/100, (max*50)/100, (max*75)/100, max ];  //percentage values (0, 25%, 50%, 75%, 100%) for y-axis ticks

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: [
      "Tokyo",
      "Mumbai",
      "Mexico City",
      "Shanghai",
      "Sao Paulo",
      "New York",
      "Karachi",
      "Buenos Aires",
      "Delhi",
      "Moscow"
    ],
    datasets: [
      {
        label: "Series 1", 
        data: data,
      }
    ]
  },
  options: {
    responsive: true, 
    maintainAspectRatio: false,
    scales: {
      y: {
        max: 100000,
        min: 0,
        afterBuildTicks: scale => {   //this
          scale.ticks = [{
              value: ticksArray[0]    //use ticksArray here using index
            },{
             value: ticksArray[1]
            },
            {
              value: ticksArray[2]
            },
            {
              value: ticksArray[3]
            },
            {
              value: ticksArray[4]
            }
          ]
        }
      }
    }
  }
});
.container {
  width: 600px;
  height: 600px;
  margin: 0 auto;

}
  #myChart {
    width: 100%;
    height: 100%;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.0/chart.min.js"></script>
<div class="container">
  <canvas id="myChart"></canvas>
</div>

0👍

set max to 100000 and stepSize to 25000

yAxes: [
  {
    ticks: {
      min: 0,
      max: 100000,
      beginAtZero: true,
      stepSize: 25000,
      callback(value) {
        return `Php ${formatHelper.kFormatter(value)}`;
      },
    },
  },
],

codepen exmaple

Leave a comment