[Chartjs]-Set fix values on y-axis vue-chartjs

by

5👍

✅

To achieve that, you need to set stepSize: 50 and maxTicksLimit: 3 for y-axis ticks, in your chart options :

scales: {
   yAxes: [{
      ticks: {
         stepSize: 50,
         maxTicksLimit: 3
      }
   }]
}

2👍

Above answer is correct.
For those intereseted, I post code for latest version of Chart.js

Updated to Chart.js v3.2.0 (not backwards-compatible with v2.xx)

In order to avoid automatic scaling if your random data values are all in the middle range close to 50, do the following:

Add min: 0 and max: 100 , so you force chart to show exactly those 3 ticks including the 0, hence maxTicksLimit: 3:

100

50

0

<script>
   // ...

options: {
   scales: {
      y: {
         min: 0,
         max: 150,
         ticks: {
            stepSize: 50,
            maxTicksLimit: 3
         }
      }
   }
};

   // ...
</script>

Source: https://www.chartjs.org/docs/latest/axes/#tick-configuration

(Be aware that in new versions v3.xx min: 0 and max: 100 are now located outside the ticks-object, whereas in v2.xx it used to be inside the ticks-object).

Leave a comment