Chart.js: [BUG] Wrong time unit chosen for labels (hours instead of date with hours)

[gkemp94]

I'm creating several charts, most with time axis, and I've noticed that chartjs has an odd way of picking it's labeling. Generally the information on the x-Axis isn't ideal for the data range. The following example is an example of a small dataset with data over 6 days plotted on an x-axis. The data labels produced are in the format of 12AM etc.

I understand that forcing a unit is one way to fix these, but we have zoom & pan plugins and want the data labels to be dynamic and select different labels based on the range of the x-axis.

https://codepen.io/gkemp94/pen/KQyELW?editors=1111

Expected Behavior

The x-axis labels to suit the range.

Current Behavior

Time values i.e. 12AM/12PM mark days vs. the dates themselves i.e. 12-07-2017 etc.

Possible Solution

I'd be happy to hear suggestions as to additional ways to fix this that don't include editing the source code. But if other people also experience the same issues, then maybe the code that picks the type of labels need to be refined?

Steps to Reproduce (for bugs)

https://codepen.io/gkemp94/pen/KQyELW?editors=1111

[benmccann]

100% agreed about this. I'd plan to fix it.

The first step is adding proper time zone support so that we can understand where the boundry of a day is. And then I'll tackle this next.

I have a PR currently pending to add Luxon support to Chart.js which would be the pre-requisite since moment does not support time zones

[gkemp94]

@benmccann Perfect, happy to know that it's not just me who think there is an issue. Keep us updated with your progress. Thanks! :)

[Esysteme]

+1

[logical-and]

Hey guys, any workaround we could use at the time it's being fixed?

[benmccann]

You could change the display format for hour to include the day: https://www.chartjs.org/docs/latest/axes/cartesian/time.html

You may also be able to futz around with the time unit

[dmrickey]

Any update on this?

It's easily seen in this example https://www.chartjs.org/samples/latest/scales/time/combo.html

[benmccann]

If you set options.ticks.major.enabled it should make this much better. It doesn't totally work under all scenarios today, but I've sent https://github.com/chartjs/Chart.js/pull/6274 which should solve any remaining issues

[kurkle]

ticks: {source: 'data'} could be another solution

[etimberg]

v3.0.0-beta.4 with the luxon adaptor and major ticks enabled looks pretty good: https://codepen.io/etimberg/pen/gOMrqEN

Coupling that with overriding the display formats, I think this is as far as we can reasonably go. Thoughts @kurkle?