Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Buggy tick marks when large gaps in time #6431

Closed
jacobsorme opened this issue Aug 2, 2019 · 6 comments
Closed

Buggy tick marks when large gaps in time #6431

jacobsorme opened this issue Aug 2, 2019 · 6 comments

Comments

@jacobsorme
Copy link
Contributor

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.
image

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
Copy link
Contributor

Thanks for the detailed report @jacobsorme. I have a PR that fixes this ready on my local machine, but it depends on #6362 and #6355, so I'm hoping folks can review those first and then I'll send the PR for the bug fix

@jacobsorme
Copy link
Contributor Author

jacobsorme commented Aug 3, 2019

Btw: It is said in docs that autoSkip is true by default, but I can't get the autoSkipPadding to work unless I explicitly say autoSkip should be true. See this JSBin.

Docs on autoSkipPadding: "Padding between the ticks on the horizontal axis when autoSkip is enabled."

@jacobsorme
Copy link
Contributor Author

Wait, having autoSkip as false or true does not make any difference to my graph and my ticks.

Docs on having autoSkip as false: "Turn autoSkip off to show all labels no matter what."

Am I missing something here? What would "show all labels no matter what" mean? Is some part of the code calling the things autoSkip should do if true without checking the actual value?

@benmccann
Copy link
Contributor

The other part of the workaround I suggested was setting ticks: { source: 'data' }. Did you do that as well?

@jacobsorme
Copy link
Contributor Author

Oh I forgot about that, thanks! 😅 So since ticks.source is default 'auto' I guess the ticks. autoSkip does not really make any difference at that point, makes sense!

@kurkle
Copy link
Member

kurkle commented Jan 21, 2020

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

@kurkle kurkle closed this as completed Jan 21, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants