Nivo: ResponsiveLine - Is there a way to handle x value of epochtime?

[wamiquem]

Is your feature request related to a problem? Please describe.
Is there a type mapping of epoch time for xScale attribute for Line graph?
Below is the array of data object where x holds value of type epoch time:

"data": [{x: 1591808400000, y: 0.01913120654800059}
{x: 1591815600000, y: 0.01980695317959469}
{x: 1591822800000, y: 0.015162935047661271}
{x: 1591830000000, y: 0.016875782812190994}
{x: 1591837200000, y: 0.04286819136007071}]

Describe the solution you'd like
Does the solution exists for xScale and axisBottom? If not how can I achieve this?

Describe alternatives you've considered
I have not found any direct solution for epoch type.

[wyze]

You will have to map the data to a Date, but then it should work fine. Here you go: https://codesandbox.io/s/frosty-fog-eozb6

[wamiquem]

@wyze Thanks a lot, I know this could work with Date format but is there a way where the epoch data can be used directly.

1 more question -- I don't know if it's appropriate to ask in the same ticket -- I am unable to get the default tootltip visible when I hover the mouse over the chart for my line chart, below is all the attribute used by me:

                        <ResponsiveLine
                                data={data}
                                colors={colors}
                                enablePoints={false}
                                enableArea={true}
                                enableGridX={false}
                                enableGridY={true}
                                margin={{ top: 20, bottom: 50, left: 80 }}
                                yScale={{
                                    type: "linear",
                                    min: config.yAxis.min,
                                    max: config.yAxis.max,
                                    stacked: true
                                  }}
                                axisLeft={{
                                    tickValues: 2,
                                    tickSize: 0,
                                    tickPadding: 10
                                  }}
                                gridYValues={2}
                                axisBottom={{ format: '%d.%b %H:%M' }}
                                xScale={{ type: 'time', min: config.xAxis.min,
                                max: config.xAxis.max,}}
                            />

Is it something that I am missing here?

[wyze]

You'll need to use useMesh property. I'm not sure if you can use epoch time directly, will have to check d3-scale and see if that is possible.

[paigewilliams]

@wyze It looks like the Code Sandbox link is broken. Would it be possible to have a working example of this? Thank you!

[Deliaz]

I have the same questions.
It looks like there is no support for epochtime/unix timestamp. Also tried to use ISO format, but receiving the error:

TypeError: Cannot read property 'getTime' of null

[wyze]

@paigewilliams Sorry about that. I think I cleaned up some of my sandboxes and this one got deleted. Based on the issue I have recreated one here: https://codesandbox.io/s/spring-violet-rqi02

[Deliaz]

@wyze Thank you.
While exploring your code I noticed that it throws if I set useMesh={true} and hover with a mouse.
Example base on your code: https://codesandbox.io/s/amazing-albattani-i7n50

[plouc]

@Deliaz, the issue when you enable useMesh is that x values are now Date objects, which cannot be rendered as is, please add xFormat="time:%d.%b %H:%M", this is gonna fix it.

[Deliaz]

Got it. Solved my case.
Thank you!

[stale[bot]]

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!

[stale[bot]]

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!