Time axes creates overlapping labels when data doesn't match standard interval

[mcoms]

With Chart.js v2.1.5 and a time axes, my last two x-axis tick labels always overlap, causing a jumble of text. My data points are every five minutes, but they don't start exactly on 00, 05, etc.

(see bottom right)

Code and data demonstrating this issue:
https://jsfiddle.net/w37nvpju/

Thanks!

[MattBubernak]

Any developments here? I'm having the same issue.

[mcoms]

Could be related to #2249?

[freewil]

I'm running into this issue as well, I think there is a bug in how the time scale selects a max tick if you don't define one yourself. See this solution that adds time.max to fix the issue:

https://jsfiddle.net/sbdfucjb/1/

[freewil]

I'm currently working on a solution to this. Here is the suspect code:

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

Lines 240 to 247 in 0c07b1e

	// Only round the last tick if we have no hard maximum
	if (!me.options.time.max) {
	var roundedEnd = me.getMomentStartOf(me.lastTick);
	if (roundedEnd.diff(me.lastTick, me.tickUnit, true) !== 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));
	}
	}

[theawesomenayak]

This code was changed in #3064. Maybe it could have fixed this too.

[mcoms]

Hey, I've built master (as at 8a161a3) and tried it with my original code. Unfortunately #3064 doesn't seem to change the overlapping behaviour for my case.

I've been able to get by thanks to @freewil's suggestion:

# maximum_timestamp = moment.max [ ... ]
x_axis_max = if maximum_timestamp.minutes() <= 30
    maximum_timestamp.startOf 'hour'
  else
    maximum_timestamp.endOf('hour').add(1, 'second')

scales: {
  xAxes: [{
    type: 'time',
    display: true,
    time: {
      max: x_axis_max
    }
  }],
}

It's a bit of a hack though, and very particular to my data, but forces the axis to render like this...

If the last point is 21:05:21:

If I add 30 minutes to everything, to make the last point 21:35:21:

My last charting library, Flot, handled this data very well — just trying to wrap my head around how it figures out the ticks to see if a similar approach could help.

Thanks for the help so far!

[etimberg]

@mcoms I think flot (from what little I know about it's internal structure) just keeps the times as unix seconds and then it becomes more straightforward. Maybe we should do the same and only use moment for the parsing and display sections

[ianks]

Unforuntately the max hack does not work so well, since it starts cutting off my data toward the end of the X axis.

[buddyp450]

I'm surprised this isn't higher priority to people considering this was opened over a year ago now. I'm new to the library but going to check this out today as it's currently ruining a demo. :(

[simonbrunel]

@buddyp450 I think it's been fixed by #4556 (updated reported fiddle). Can you please try this development build and confirm if it fixed the issue for you?

[buddyp450]

@simonbrunel looks good! The decision being made on what the interval between ticks should be seems a little odd but I'm willing to bet I'm just missing an api option to specify it. Thanks, eagerly awaiting 2.7 release.

[simonbrunel]

We are currently working on that interval between ticks, so any feedback or ideas to make it better are really welcome: what are your thoughts?

Fixed by #4556, closing.

[paulrajib]

Is there any way to remove space between ticks when there is no data(or data value is zero/NULL) for a long time?