Skip to content

Buggy tick marks when large gaps in time #6431

Closed
@jacobsorme

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.

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