Time scale should show 1:00, 1:05, 1:10, etc. rather than 0.59, 1:04, 1:09, etc.

[bertysentry]

Feature Proposal

When auto-skipping ticks on a time scale, ChartJS must ensure that remaining ticks are "easy to read" for a normal human being (i.e. multiple of the current rounding).

Feature Use Case

Time scales nicely auto-skip ticks. However, the "remaining" ticks may look odd to a human being.

Example:

When time.unit is "minute" and there is not enough space to display every minute on the time scale, ChartJS will skip ticks to display 1 tick every 5 minutes.

However, instead of showing 1:00, 1:05, 1:10, etc. it may show 0:59, 1:04, 1:09, etc. or 1:02, 1:07, 1:12, etc., depending on time.min.

While perfectly correct from a mathematical point of view, these ticks are not easy to read. Of course, one could simply round time.min to the closest "5 minutes", but this supposes that one knows in advance how the time scale will be adjusted by ChartJS. Also, this will not work at all with the zoom plugin.

It would be better if ChartJS would skip ticks 1:01, 1:02, 1:03 and 1:04 when it's showing ticks every 5 minutes. Same goes for other units, but most importantly for seconds, minutes and hours, where rounding does not work very well.

Possible Implementation

For time scales only, check which ticks should be skipped to ensure that, when rounding to 5 minutes, all multiples of 5 minutes are displayed while the others are skipped. (and so one for 15 minutes as in the attached examples, and other similar values)

[benmccann]

I plan on addressing this as one of my next tasks after the pending time adapters and mixed charts improvements are committed. See also #4612

[bertysentry]

Hi @benmccann , just checking if you had a chance to look into this improvement. I would love to fix it myself and submit a PR, but this part of the code is quite intricate and changes may have unpredictable consequences (unpredictable by me anyway)… Thank you! :-)

[benmccann]

Yeah, I have a branch on my local machine, but it's still a little buggy. I have to work through a few more edge cases still before sending it as a PR

[nagix]

Please try ticks.major.enabled: true. In my case, ticks are aligned to nice values: https://jsfiddle.net/nagix/y3thjpu6/

[bertysentry]

Okay @nagix , it just works, that's great! Adding ticks.major.enabled = true does solve the problem and works perfectly with the zoom plugin. Thank you!

I don't know how this could be documented somehow, as I'm not the only one who struggled with this (there are a few similar issues in the repo). At least, I hope that others will find this issue and get the solution! :-)

Thank you also @benmccann for your work. I think that @nagix 's solution is perfect and it doesn't need any code change.

Edits: typos

[benmccann]

Glad it worked! It works better on some charts than others. I've sent #6274 which should make it work on the remaining cases

[aguegu]

Thanks for this option. But it does not help my case that my (real)time axle is only 1 minute long. And I would like it ticks on the 5, 10, 15, 20, ... seconds, not 59, 04, 09, 14, .... even I got stepSize set to 5 and major enabled.