Time scale extra/overlapping labels when ticks are not evenly divisible

[roryza]

This may be related to #3051 , and it's kind of the opposite issue to #2964 and #3064 .
Essentially the problem is too many labels displayed on the right of the chart when using the time scale. From what I can see the issue is that when I have a number number of days that you'd generally get a label for every second day but I have an odd number of days I will get a label on every second day plus the last label, causing the second last and last labels to overlap (and thus be unsightly and unreadable).

https://jsfiddle.net/8gw084p6/

In the jsfiddle please adjust the width of the "result" pane a bit to see how the chart responds to the various widths. If it's wide enough to show a label for every 1 day it looks fine.
If it's narrow enough for a label every 5th day it's fine.
In between when the labels are shown at an angle then it looks ok because they don't overlap, however the last label often goes off the chart.

[roryza]

Looking further into the other related issue this definitely seems to be the same issue as #2249 and #2774 so perhaps this can be closed as a duplicate, even as just a confirmation that the issue still (again?) seems to be occurring.

[theawesomenayak]

The code was changed in #3064. Could you check if its still happening?

[roryza]

Indeed, just built the very latest and the issue is the same.

[PuniCZ]

It looks like the problem is caused by folowing code (also changed in #3064):

if (!me.options.time.max) {
    var roundedEnd = me.getMomentStartOf(me.lastTick);
    var delta = roundedEnd.diff(me.lastTick, me.tickUnit, true);
    if (delta < 0) {
        // Do not use end of because we need me to be in the next time unit
        me.lastTick = me.getMomentStartOf(me.lastTick.add(1, me.tickUnit));
    } else if (delta >= 0) {
        me.lastTick = roundedEnd;
    }
    me.scaleSizeInUnits = me.lastTick.diff(me.firstTick, me.tickUnit, true);
}

Problem is probably caused by me.lastTick.add(1, me.tickUnit), where is last tick "rounded up" by adding 1 "unit", enven when ticks are in multiples of 2. So when tick descriptions are 3, 5, 7, the tast could be 8 (instead of 9) and descriptions are overlaping.

The fix should be changing folowing row to something like this:

me.lastTick = me.getMomentStartOf(me.lastTick.add(me.unitScale, me.tickUnit));

and you also dont need to add last tick separatelly (if not explicitly defined), so you can change (few rows bellow)

var diff = me.ticks[me.ticks.length - 1].diff(me.lastTick, me.tickUnit);
if (diff !== 0 || me.scaleSizeInUnits === 0) {
    // this is a weird case. If the <max> option is the same as the end option, we can't just diff the times because the tick was created from the roundedStart
    // but the last tick was not rounded.
    if (me.options.time.max) {
        me.ticks.push(me.lastTick.clone());
        me.scaleSizeInUnits = me.lastTick.diff(me.ticks[0], me.tickUnit, true);
    } else {
        me.ticks.push(me.lastTick.clone());
        me.scaleSizeInUnits = me.lastTick.diff(me.firstTick, me.tickUnit, true);
    }
}

to

var diff = me.ticks[me.ticks.length - 1].diff(me.lastTick, me.tickUnit);
if (diff !== 0 || me.scaleSizeInUnits === 0) {
    // this is a weird case. If the <max> option is the same as the end option, we can't just diff the times because the tick was created from the roundedStart
    // but the last tick was not rounded.
    if (me.options.time.max) {
        me.ticks.push(me.lastTick.clone());
        me.scaleSizeInUnits = me.lastTick.diff(me.ticks[0], me.tickUnit, true);
    } 
}

[ghost]

@PuniCZ Unfortunately your suggestion doesn't fix the problem - overlapping still occurs.

[ianks]

pinging #2600 since it seems to be related. Let's try to get this fixed ASAP because the hack (setting a max on the x scale), is buggy as well.

[tredston]

This bug appears fixed in 2.5.0: https://jsfiddle.net/8gw084p6/2/

[etimberg]

@tredston that's good 😄 not sure what did it, but I also don't know why the left label is off the left edge of the chart 😖

[MeoMix]

Fairly confident it's only fixed for some label sizes/datasets. I'm able to reproduce locally on 2.5 with other label values.

[ankane]

@MeoMix I'm still seeing the issue with 2.5 as well. My fix is to remove these 3 lines:

Chart.js/src/scales/scale.time.js

Lines 301 to 303 in 1ca0ffb

	} else {
	me.ticks.push(me.lastTick.clone());
	me.scaleSizeInUnits = me.lastTick.diff(me.firstTick, me.tickUnit, true);

[MeoMix]

I played around with a fork where I did something very similar, but ultimately I ended up relying on the autoSkipPadding property as I was able to set it to a high enough value to fix the issue for my scenario.

[Evertvdw]

I still have this issue, autoSkipPadding does nothing for me. Is there a way to just remove the right tick, I'm creating live updating charts so that if that right tick can be removed my problem will be solved.

@ankane How do I manually remove/override those 3 lines?

[ankane]

@Evertvdw You clone the repo, remove them, and run:

npm install
npm install -g gulp
gulp build

The built files will be placed in the dist directory.

[etimberg]

Closing as duplicate of #2774 since I think it's the same underlying issue that hasn't been fixed for all cases