Can recharts draw lines of data at different frequencies?

[hedi-at-wide]

I am currently pulling my hair around a problem that sounds simple at first: I have data at different frequencies (e.g. 1 point every 15minutes for one series, and 1 every 1hour for another) that I want to plot on the same chart, but can't seem to get the result I expect. I either get no line display for the daily data (as missing points are treated as missing using a single data set), or cannot get the tooltip to display data properly (if I set the data manually on the line), as the arrays do not have the same lengths. Additionally, I need to synchronize the tooltip across muliple trends (at either same or different frequencies)...

I already fiddled with:

• trying to fill the missing data with null or undefined, but that leads to no line being shown
• using array of data per line instead of global data array and dataKey, but that leads to out-of-sync tooltip and active dots
• to fix the above, set allowDuplicatedCategory={false}, which synchronizes the tooltip and the active dot, but does not shown anything in the tooltip

Any way to reconcile all this, or am I pushing the library to its bounds?

[ckifer]

What data type is your time data?

If you recreate an example of what you currently have in a codesandbox I can try to help.

[hstefanskiWT]

Hello,
Thanks for replying so promptly
I work with Hedi, he posted this on my behalf :-)

I prepared a repository with the various test cases:

repo

We basically map time values to epoch numbers, and set the type of the axis to number. I hope what I linked is simple enough to understand the situation better, feel free to ask for more info or less details if needed.

[ckifer]

thanks for the repro! makes it a lot easier

[ckifer]

The first way is the recommended approach, all data at the top of the chart. This way all components "know" about all of the data and not just some.

The issue here is that with dot={false} nothing will be rendered for the green line because there is no line. Its just a bunch of points.

Changing dot={true} you can see what I mean

If you want to connect the dots you can use the connectNulls prop on your Line resulting in

[hstefanskiWT]

Thank you for your reply. We however need to see a line with holes, as those are time-series data at fixed frequency. Holes help detect when data is missing. And a line is expected to connect the data when it is not missing :/

Here is something I did myself using d3 natively with angularJS in the previous version of our application:

[ckifer]

If the data isn't consecutive there will be considered missing values and it won't connect the dots.

I will take a look again today when I can

[ckifer]

I think for now you will have to accept some sort of compromise. You want the breaks in the data, so I would use the 2nd approach (data sent to individual chart items, allowDuplicatedCategory={false} and turn off Tooltip synchronization for now.

Will try to look into why synchronization starts to not work in this case in the mean time

[hstefanskiWT]

Thanks for the reply and clarifying. I'll see what I can do and if that is acceptable to our users.

Edit: one thing that I think might help could be to provide an "isUndefined" method at chart level, that could allow to distinguish between a dataKey not being found, and the dataKey being present with a null value for example