chartjs xaxis ticks with round values from shifted input data

Question

I'm working on a project using chartjs for displaying data.

The problem is: results in my dataset's x axis are far from any round number like so:

10932.719983363277
12560.833900691468
14190.798503260216
15822.383289061858
17456.06882152693
19092.218364565953
20729.378152457735
22368.86437683459
24010.600817095823
25654.16468236109

I need chartjs to display ticks on x axis rounded to some base step value like 5000, 2000 depending on results range. The callback for ticks can only alter the text but what I need is to draw complete new ticks referencing the values on graph that were not in original dataset (in this example 2000).

To help visualize the issue check out the fiddle: https://jsfiddle.net/Lsxfdfyg/

Despite the messy xAxes input i'd like to keep the scale constant and rounded up to some readable values.

any ideas?

vartika vartika · Accepted Answer · 2017-09-28T11:23:00

If you wanna modify ticks on x-axis, you can do it by using afterBuildTicks.

xAxes: [{    
    afterBuildTicks: function(mychart) {
        mychart.ticks = [];
        mychart.ticks.push(0);
        mychart.ticks.push(2000);
        mychart.ticks.push(4000);
        mychart.ticks.push(5000);
    }
}],

chartjs xaxis ticks with round values from shifted input data

1 Answers