Sencha touch charts remove decimal values on axes

Hello,

If you have used sencha touch charts, you might have faced this issue. If you set minimum and maximum to chart axes, you might have decimal values in numeric axes. See the image below.

This occurs if you specify maximum and minimum on axes. See the code below.

minimum: 0,
maximum: 100,
majorTickSteps :5,
minorTickSteps :5

Here minimum defines minimum allowed value and maximum defines maximum allowed value on axes. Axes will not have value more than maximum. majorTickSteps defines number of steps on axes for example if you specify minimum to 0 and maximum to 100, 0 to 100 are divided in equal five steps according to axes data.

So if you have data in store which can not be distributed equally on axes. It will display decimal values with 10 decimal points. This is annoying when you are crating an application like dashboard and you are displaying more than one charts at a time in panel.

To overcome this problem, override Ext.chart.axis.Axis class method drawAxis as follow.


Ext.override(Ext.chart.axis.Axis, {
    drawAxis: function (init) {
    }
});

Search code of this function in touch-charts-debug.js and paste the same code here and do the following modifications.

Search for the following line in code

me.labels.push(+(me.labels[me.labels.length - 1] + step).toFixed(10));

Change parameter in toFixed function to 0

me.labels.push(+(me.labels[me.labels.length - 1] + step).toFixed(0));

That's it and you will have integer values in charts.