Autoskipping or time unit determination issue in 2.9

[benmccann]

Report from @leovalencia10. (@leovalencia10 I'm migrating your comment to a new issue because I think it's slightly different than the issue you commented on and I want to keep them separate)

I updated from 2.8.0 to 2.9.3 and without touching the code, my time charts added lots of extra ticks. It seems the heuristic to auto space them is not working correctly. In 2.8.0 I would get ticks at different interval units depending on the amount of data (I have data that accumulates realtime during the day. So if I only had data for the first 20 minutes of a session, then I would get ticks nicely spaced at 1-minute intervals. Then as more data kept coming in the interval grew (5 minutes, 10 minutes, 30 minutes ) and finally, it settled around 1 hour wide ticks (very nice and clean). With 2.9.3 I seem to get 5-minute interval spacing as soon as the number of data points grows, which produces lots of gridlines that don't convey extra information, plus the labels for those unnecessary ticks start to eat vertical space reducing the visual area for useful information.

[benmccann]

@leovalencia10 is this chart live anywhere? Or could you make something like a jsfiddle or plunkr to reproduce? It would really help me to see it in action

[leovalencia10]

Thanks for looking into this issue Ben, let me quickly put together a live demo for the issue.

[leovalencia10]

I have two live examples here. This one shows the issue on the variance chart:

https://gandalf.gammawizard.com/variance2/

And this one uses an old version and the ticks are nicely spaced:

https://gandalf.gammawizard.com/variance/

The charts update realtime so it would be better to see them after 4:30 PM EST (UTC-5)

[benmccann]

variance is choosing hour while variance2 is choosing minute. It's hard to say one is necessarily "right" or "wrong". I agree the original looks better and we could probably do a better job with setting some defaults.

A few suggestions to give you more control over how things appear:

• Try setting unit in the options instead of letting Chart.js pick it if you know it will always be the same thing
• If you want more space between labels you can set autoSkipPadding. If you want to disable label rotation you can set maxRotation: 0
• You may want to enable major ticks. This will make sure that it chooses more meaningful points as labels (e.g. first of the month, etc.). You can also have major ticks formatted differently
• You can disable drawing the points and just draw the lines if you'd like

See this example that shows many of those tips that you might find useful:
https://www.chartjs.org/samples/latest/scales/time/financial.html

Let me know if setting those options will give you something more like you're looking for

[leovalencia10]

Thanks for the suggestions, I can't really set the units manually as the number of data points varies during the day. Of course, I can play with all the options until I get something that resembles the old versions, but realistically it is just easier to use an old version of ChartJS instead (I have literally dozens of charts scattered over many different apps).

It would seem that 2.9.0 is sticking to the "minute" units no matter the number of data points available. This seems like a code regression as old versions were able to adjust units based on the number of data points available, perhaps the new code is not taking into account that the X-axis is "time" based?

[benmccann]

I believe the unit is supposed to represent how far apart each data point is. In your case it looks like you have data for each minute, so the unit probably should be always unit. It seems to me like there was a bug in 2.8 that just so happened to give a behavior that was better for your use case, but I don't think we'd be likely to revert it. I don't think you actually have to set unit as it seems to already be doing the right thing. Just set autoSkipPadding and maybe maxRotation and I think your chart should look pretty good. You also might want to consider refactoring out some shared code so that if you make any changes it affects all charts and you don't have to make changes as many places

[leovalencia10]

Thanks for the assistance Ben, just for reference the nice auto tick behavior was present since a long time ago (probably earlier than 2.7.0), in fact, the example with the nice ticks is using the 2.7.3 version. I got confused with the units as I thought they were used to determine where to place ticks.

I'll play with the options to see if I can get the display to provide visually pleasing ticks and tick labels.