Skip to content

Buggy tick marks when large gaps in time #6431

Description

@jacobsorme

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions