Buggy tick marks when large gaps in time

Expected Behavior

I use type: 'time' and distribution: 'series' as options for an x-axis (options.scales.xAxes) in a line chart. I then add data of the following type: {t: new Date( ... ), y: ... }, where there is a gap in time (see pic below). I expect the tick marks to look nice at this point.

Current Behavior

This is how the tick marks looks as of now, they get smashed.

Possible Solution

A possible solution proposed by @benmccann when discussing this is to use eg. autoSkip:true, and autoSkipPadding:75 as tick configuration for the axis (see in docs ). This however requires you to specify a certain padding (75 in example).

To solve this specifying a configuration as above could be to not have tick marks being drawn when there is no data, or have the auto-tick-thing consider possible large gaps in time of data that don’t need tick marks.

Steps to Reproduce (for bugs)

See JS Bin here.

Context

I have data points coming from a specific time stamp that I want to show. The data sometimes is of a format where there are lots of data points separated by the same small time-delta, eg. 10 ms. Then there is a gap of say 3 hours, and after that more data in the same way.

Environment

• Chart.js version: CDN 2.8.0, Chart.js/2.8.0/Chart.bundle.min.js.
• Browser name and version: Tried on Safari and Chrome.

[benmccann]

Thanks for the detailed report @jacobsorme. I have a PR that fixes this ready on my local machine, but it depends on https://github.com/chartjs/Chart.js/pull/6362 and https://github.com/chartjs/Chart.js/pull/6355, so I’m hoping folks can review those first and then I’ll send the PR for the bug fix

[kurkle]

Fixed in master: https://jsbin.com/jabafahaxu/1/edit?html,output