Repeating same tick values

screenshot from 2017-09-12 14 39 08

See Y axis? This is caused because we are returning rounded value in options.yAxes.ticks.callback. So chart.js calls callback with 0, 0.1 … 0.9, 1.0, 1.1 values, but callback returns 0, 1 only. Repeating same values in a chart is undesirable for end user.

In userspace, I’ve applied following fix to solve this issue:

// this is to prevent repeating tick values
var middlewareToMakeTicksUnique = function(next) {
    return function(value, index, values) {
        var nextValue = next(value);

        if (index && values.length > index+1 && // always show first and last tick
            // don't show if next or previous tick is same
            (next(values[index + 1]) === nextValue || next(values[index - 1]) === nextValue)
        ) {
            return null;
        }

        return nextValue;
    }
};

...

yAxes: [{
    ticks: {
        callback: middlewareToMakeTicksUnique(function (value) {
            return value.format();
        })
    }
}]

Author: Fantashit

1 thought on “Repeating same tick values

Comments are closed.