[Chartjs]-Is it possible to create different stepsize for different yAxis intervals on chartJs?

by

1👍

✅

You could fake the tick of the zero line by defining ticks as follows:

ticks: {
  min: 0.65,
  stepSize: 0.1,
  callback: (value, index, values) => index + 1 == values.length ? 0 : value
}

For further explanations, have a look at Creating Custom Tick Formats from Chart.js documentation.

Please take a look at the following runnable code and see how it works.

new Chart(document.getElementById("myChart"), {
    type: "line",
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "APAC RE index",
            data: [0.7, 0.8, 0.9, 1, 0.9, 0.8, 0.7],
            fill: false,
            borderColor: "rgb(255, 0, 0)"
        }]
    },
    options: {
      legend: {
        display: false
      },
      scales: {
        yAxes: [{
          ticks: {
            min: 0.65,
            stepSize: 0.1,
            callback: (value, index, values) => index + 1 == values.length ? 0 : value
          }
        }]
      }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

Leave a comment