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

[umeshmishra099]

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

[etimberg]

@umeshmishra099 can you create a fiddle with your sample?

[etimberg]

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

[umeshmishra099]

I tired above but it didn't work. I want x axis to stepSize by .2 .

see below chart

[etimberg]

Try setting autoSkip: false. If that doesn't work, can you post a fiddle with this?

[umeshmishra099]

I tried before its not working..

[umeshmishra099]

How i can convert x-axis to numeric from 'category' axis ?

[etimberg]

@umeshmishra099

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

[umeshmishra099]

When i use this my x- axis goes parallel to y axis .

[etimberg]

try adding position: 'bottom' as well. We have an open issue already to auto change the default direction but we haven't yet worked on it

[umeshmishra099]

Not it stopped displaying data. Chart is coming as blank

[etimberg]

@umeshmishra099 can you put this in a fiddle so we can debug?

[umeshmishra099]

@etimberg I have create the fiddle. https://jsfiddle.net/u0tp5424/21/
If you check in options->scales-> yAxes -> stepSize : 1 Its working fine.
But in xAxes options->scales-> xAxes-> stepSize : .5 Its not working as expected

[etimberg]

@umeshmishra099 i converted it to use the linear axis for the x axis and removed the maxTicksLimit setting which caused problems.
See https://jsfiddle.net/6wsw5eem/

[umeshmishra099]

@etimberg if you see the graph its not taking 'label' into consideration. Its not working as expected.

[etimberg]

That is as designed. the labels are only used for the category and time axes. The linear axis (where stepSize applies) does not use them.

[vaggelisk]

I have the same problem

options->scales-> yAxes -> stepSize : 1 Its working fine.
But in xAxes options->scales-> xAxes-> stepSize : .5 Its not working as expected

[JIGARKAPADIYA]

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