tick units whole numbers with responsive chart

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

Author: Fantashit

3 thoughts on “tick units whole numbers with responsive chart

  1. 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.

  2. 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) : "");
            }
        }]
    }
    ...
    

Comments are closed.