Chart.js: stepSize is not working in chart js for line chart x-axis

I am using below option in chart :

option : {
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'fpr',
                                fontStyle: 'bold'
                            },
                            ticks: {
                                callback: function(value, index, values) {
                                    return parseFloat(value).toFixed(2);
                                },
                                autoSkip: true,
                                maxTicksLimit: 10,
                                stepSize: .2
                            }
                        }],
                        yAxes: [{
                        	
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'tpr',
                                fontStyle: 'bold'
                            },
                            ticks: {
                                callback: function(value, index, values) {
                                    return parseFloat(value).toFixed(2);
                                },
                                autoSkip: true,
                                 maxTicksLimit: 10,
                                 stepSize: .2
                            }
                        }]
                    }
                }

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 22 (9 by maintainers)

Most upvoted comments

Also, the step size won’t work for the bottom because the default x axis is a ‘category’ axis that doesn’t interpolate numerically.

if you want to change that you can do

xAxes: [{
  type: 'linear',
  display: true,
  scaleLabel: {
    display: true,
    labelString: 'fpr',
    fontStyle: 'bold'
  },
  ticks: {
    callback: function(value, index, values) {
      return parseFloat(value).toFixed(2);
    },
    autoSkip: true,
    maxTicksLimit: 10,
    stepSize: .2
  }
}]

etimberg on Jan 20, 2017

PS: why is this issue closed???

wjadevries on Sep 8, 2021

Chartjs documentation is poop tier… having this problem with y axis, type is ‘linear’ and stepsize is set to 1, same problem. Set precision to 1 still not working, tried using a callback, it does not even get executed…

karlkaspar on Apr 28, 2021

Problem with scaling of x-axis.Values are printed not with proper step size

JIGARKAPADIYA on May 7, 2020

@umeshmishra099

options: {
  scales: {
    xAxes: [{
      type: 'linear'
    }]
  }
}

etimberg on Jan 25, 2017