Chart.js: tick units whole numbers with responsive chart

[cdwilhelm]

Hello

I'm using 2.0-dev and depending on the size of the screen the y-axis is ticks labels change between decimal or whole number. how can we force whole numbers? The decimal sees to only appear when a value of 5 or list is present.

Here is an example: http://jsfiddle.net/cwilhelm/whva3opt/ you may need to change the browser window size to see how the labels change

[Dergonic]

Casting axis is possible in V2.
You just need to configure it in the options :

options:{ scales:{ yAxes:[{ ticks:{ callback:function(value){ return Number(value).toFixed(0); } } } ]} }

toFixed(0) va forcer l'affichage à '0' chiffres après la virgule.

[cdwilhelm]

@Dergonic thanks for the suggestion, however that only replaces the decimal with the whole number. now there are two 1's, two 2's etc. Take a look https://jsfiddle.net/cwilhelm/whva3opt/

[Dergonic]

as a "patch", you can limit the display to interger values (remove the 0.5, 1.5, ...)

Of course this is not the better solution.
For this exemple, you could hide the labels of non integer value (that means skip half of them)

callback: function(value) {
if(!(value%1))
{
return Number(value).toFixed(0);
}
}

I think it could be possible to force the scale steps and so on. But i don't know how to :(

[cdwilhelm]

@Dergonic thanks again. I was already on my why to do this, but I was thinking there was an option to set the scale steps, but I have seen it. That's what I was looking for and figured it was a bug or a feature overlooked in 2.0.

[etimberg]

@cdwilhelm you could try setting which would limit the number of ticks to a maximum of 6.

ticks: {
    maxTicksLimit: 6
}

[Dergonic]

Oh, very nice
I didn't knew these option would work on linear graph. (Just tried, and it works very well)

@etimberg Could it be labeled as a doc enhancement for next release ?

[cdwilhelm]

@etimberg interesting enough if the max value of one of the x-axis items, the decimal is not show, it's only when the ticks go above 5. Is there a bug here or is that expected?

[etimberg]

@cdwilhelm I new config parameter was recently added. It allows setting the fixed step size.

I updated your fiddle to set this to 1 which creates integer only tick marks. https://jsfiddle.net/pv2sz027/2/

[cdwilhelm]

@etimberg thank you for letting me know. I verified the new option does work. Cheers!

[mkucej]

you could try setting which would limit the number of ticks to a maximum of 6.
new config parameter was recently added. It allows setting the fixed step size.

These solutions only work, if you know what your value range is on the Y axis. If your values range from 0 to infinity, I found this solution to work well for me:

// vals is an array of your Y axis data
yAxes: [{
    ticks: {
        maxTicksLimit: Math.min(11, 1 + Math.max.apply(null, vals))
    }
}]

This limits the number of ticks to either your maximum value + 1, or the default (11), whichever is smaller.

[tarekis]

I'm a little late, but that's how i solved this issue:
I filter out non-integers and replace them with empty strings. Seems a little hacky but works with any numeric scale at the whole chart's lifetime.

...
scales: {
    yAxes: [{
        afterTickToLabelConversion: (scale: any) => {
            scale.ticks = scale.ticks.map((tick: string) => parseFloat(tick) % 1 === 0 ? parseInt(tick) : "");
        }
    }]
}
...

[fbasa]

thanks tarekis, this works.