Set fix values on y-axis vue-chartjs

Question

I use vue-chartjs as a wrapper for chartjs. I had a simple line chart with random data but stuck on how to set fix value to be displayed on the chart's y-axis. Currently I have random data from 0-100. Now, what I want to achieve is just display 0, 50, 100 on the y-axis no matter what the random value is starts from 0-100.

Sample Script

putData: function () {
    this.datacollection = {
        labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
        datasets: [{
            lineTension: 0,
            borderWidth: 1,
            borderColor: '#F2A727',
            pointBackgroundColor:[ '#fff', '#fff', '#fff', '#fff', '#fff', '#F2A727'],
            backgroundColor: 'transparent',
            data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
        }]
    }
},

getRandomInt: function () {
    return Math.floor(Math.random() * (95)) + 5
}

Any help would be much appreciated.

Answer 1

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
      }
   }]
}