Chartjs-Char.js overlapping bar columns when using type: 'time'

by

0👍

I found the overlapping problem is due to the bar size calculation is base on the number of ticks in the time scale. Under the original getRule function in the controller.bar.js:
var tickSize = fullSize / scale.ticks.length;

The problem happened when the time scale is optimised with step size > 1, causing error in the bar size calculation. The bar size becomes bigger and overlaps to the neighbouring bar. The correct calculation should be:
var tickSize = fullSize / (scale.ticks.length * scale.stepSize);

I’m using the new Dataset Controller Interface and Scale Interface to derive my customer Bar chart controller and TimeScale to modify 2 lines of code each in of these interface.

The code I changed is as below:
Under the new TimeScale interface:

buildTicks: function() {
    ...
    me.stepSize = stepSize;
    ...
};

Under the new Chart.controllers.derivedBar interface:

getRuler: function() {
    ...
    var tickSize = fullSize / (scale.ticks.length * scale.stepSize);
    ...
};

Check out the complete code here https://codepen.io/allentcm/pen/KqQGoE/

Leave a comment