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.