Nivo: Line xScale with time type not adding ticks as expected

Created on 2 Aug 2019  路  5Comments  路  Source: plouc/nivo

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
stale

Most helpful comment

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

All 5 comments

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

@wyze you are right, useUTC: false does fix this instance but a simple change to the data set appears to confuse things again.

Forked example here: https://codesandbox.io/embed/sweet-cohen-1ehz7
I have added useUTC: false to the xScale but changed the first data point to be a day earlier.

I think the problem is now there is a decent gap in your data, but you tell nivo that you only want 2 tick values, so it does exactly that.

I have a similar graph where I had to do something custom based on the data length because nivo was being crazy with it's tick values.

  const dataLength = data[0].data.length
  const tickValues =
    dataLength < 5
      ? data[0].data.map(({ x }) => new Date(x, 0))
      : `every ${Math.round(dataLength / 10)} year`

My data is on year instead of day, but it would be similar. I noticed if there was less than 5 data points it would generate points that didn't make sense, so I passed points from my data.

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

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!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

barnapisti1994 picture barnapisti1994  路  3Comments

luisrudge picture luisrudge  路  3Comments

gcloeval picture gcloeval  路  3Comments

vagnervst picture vagnervst  路  4Comments

indvstry picture indvstry  路  3Comments