question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Line xScale with time type not adding ticks as expected

See original GitHub issue

Describe/explain the bug When using <Line xScale={{ type: 'time', precision: 'day' }} /> the ticks on the x axis are added in weird positions. I have set the axisBottom tickValues to be the length of my data array which may be an issue but even if I change it to be 10 the ticks are still in strange positions.

In the example below I have 2 values that I want to plot on the graph. Despite being 3 days apart, even if I set the tickValues to be 10 I appear to get duplicate ticks but no tick on the last result in the data.

To Reproduce https://codesandbox.io/embed/mystifying-banzai-hfgie

Expected behavior I would always expect the values provided in my data to have a tick (my array is already pre-filtered so it will only ever deliver one score per day).

In the example provided I would expect there to be a Aug 02 tick.

Desktop (please complete the following information):

  • OS: Mac OSX
  • Browser: Chrome
  • Version: 75

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5

github_iconTop GitHub Comments

4reactions
wyzecommented, Aug 2, 2019

I always have to add useUTC: false to the xScale and it does seem to fix it in this case as well.

0reactions
stale[bot]commented, Nov 5, 2020

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

Read more comments on GitHub >

github_iconTop Results From Across the Web

x axis ticks not appearing in d3
The problem was that this line: const parseTime = d3.timeParse('%Y');. needed to be this line: const parseTime = d3.timeParse('%Y-%m-%d');.
Read more >
Using a date/time scale
The easiest way to get a date time scale for the X-axis is to use the pre-defined " dat " scale. To be...
Read more >
8. Axes - Interactive Data Visualization for the Web [Book]
Unlike scales, when an axis function is called, it doesn't return a value, but generates the visual elements of the axis, including lines,...
Read more >
Linear Axis
If not set, the ticks are labeled automatically using the nice numbers algorithm. This example sets up a chart with a y axis...
Read more >
Python Figure Reference: layout.xaxis
If the axis `type` is "date", then you must convert the time to milliseconds. ... If "True", the grid lines are drawn at...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found