Chart.js: Always display a fixed number of ticks instead of defaults computed by library

[singhrasster]

The chart library computes the number of ticks(labels). Is there a way to fix the number of ticks? For example, irrespective of whether the number of ticks computed by library is 10, 15, 20 etc (depending on data), can I always show a fixed number of ticks, lets say 7 ticks?

[etimberg]

@singhrasster this is not currently possible. It would require a new tick generation strategy but it could probably be done externally by changing how https://github.com/chartjs/Chart.js/blob/master/src/core/core.ticks.js#L52 works

[samlimbu]

this did it for me, there will be 10 fixed number of ticks and will only work for positive numbers

ticks: {
                            fontColor: 'white',
                            stepSize:1,
                                callback: function(value, index, values) {

                                    if(value%Math.round(values[0]/10)==0){
                                       return + value;
                                    }
                                    else if(value===0){
                                        return value;
                                    }

                                }
                        },

[muuvmuuv]

Any updates on this? Would really like to see this as it prevents me from displaying the chart properly. I have also tried to do this but it still prints 7 ticks instead of 12. The data I pass into is an array with a length of 12.

            {
              id: 'axis-accumulation',
              gridLines: {
                display: true,
                color: '#f3d3e4',
              },
              ticks: {
                beginAtZero: true,
                maxTicksLimit: 12,
                stepSize: 1,
                max: 12,
              },
              position: 'right',
            },

[kurkle]

@muuvmuuv Try adding a min: 0 there.
Edit: I missed the beginAtZero, nevermind.

[benmccann]

@muuvmuuv if the data you pass in contains 12 data points then it should probably be possible to display 12 ticks. I think you just need to set ticks.autoSkip: false. If that doesn't work please share an interactive example on plunker or codepen or a similar site

[muuvmuuv]

@benmccann I have made a fiddle: http://jsfiddle.net/muuvmuuv/49uo61a5/17/
It doesn't even longer shows any data. I'm confused now.

[kurkle]

https://jsfiddle.net/yn2msc5u/

maxTicksLimit was limiting in your fiddle. (in addition to data being in wrong level and missing labels)

This should work:

min: 0,
max: 12,
stepSize: 1,
maxTicksLimit: 13

[muuvmuuv]

This works for one and two datasets, nice, thank you, I can work with that.

I still think this is a bit of too much hacking around, would be way nicer to just set two props steps=12 (+1 if beginAtZero) and stepSize=0.002, and Chart.js do the rest by itself and displays the steps regardless of the data.

In the case of mine, my customer would like to have a fixed step value for the line chart grid lines for readability. So in the fiddle below, you can see that the step size is set to 0.002 but the amount of lines is limited to 9 but should continue counting to 13.

More advanced fiddle: https://jsfiddle.net/muuvmuuv/shkxj9a1/20/

[muuvmuuv]

I found a way to force the steps by a decimal number, still it would be nice that Chart.js continues to count up until it hits 12 ticks: https://jsfiddle.net/muuvmuuv/shkxj9a1/29/

[kurkle]

You don't need to limit the steps if you don't want to limit that. just beginAtZero and stepSize is enough. Max is determined automatically and expanded to next whole step.

I do not understand what you mean by saying continue counting to 13? You mean you want 13 ticks from 0, with step size 0.002 so max would be 0,024?

like that: https://jsfiddle.net/muuvmuuv/shkxj9a1/20/

[kurkle]

Well, there is currently no numTicks option.
The maxTicksLimit is just the upper bound.
But if you know the stepSize you want, and the number of ticks you want, and the lower bound, then its quite simple to set:

min: lowerBound,
stepSize: stepSize,
max: lowerBound + stepSize * numberOfTicksIWant