Chart js - Vue-ChartJs - Options and ticks not working for xAxis

Question

I'm struggling with ChartJs and VueChartJs to custom my options for a chart.

I want my xAxis style to be 'normal' and i want my tick steps to be 5 so here is my not working code :

        scales:{
          xAxes: [{
            ticks: {
              stepSize: 5,
              fontStyle: 'normal'
            },
            scaleLabel: {
              display: true,
              labelString: 'min'
            } }],
          yAxes: [{
            display: true,
            ticks: {
              beginAtZero: true,
              maxTicksLimit: 5,
              stepSize: 5000,
              mirror: true }
            }]
        },

It appears that the yAxis is working well while xAxis dont want to follow all rules.

Do you guys know what I'm doing wrong ?

Thanks in advance for your help !

Answer 1

stepSize works on linear axes, if you want to use you should declare the xAxe as linear, then you should also setup a minimum and a maximum for your linear scale in order to make it work properly.

This should do:

        xAxes: [{
          type: 'linear',
          ticks: {
              max: 40,
              min: 0,
              stepSize: 5
          },
          scaleLabel: {
            display: true,
            labelString: 'min'
          }
        }],