VictoryArea/VictoryLine should support graphing with gaps in the y data

[scottdickerson]

Bugs and Questions

Checklist

• This is not a victory-native specific issue. (Issues that only appear in victory-native should be opened here)

• I have read through the FAQ and Guides before asking a question

• I am using the latest version of Victory

• I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

I'm trying to support time ranges of data, and sometimes this data has sparse values but I want the chart to make the data actually render across the whole time range. When I pass data with null values for days in-between value days, the graph will not render for either VictoryArea or VictoryLine graphs with a custom theme

Here's an example of the type of data I want to render:
const data = [

{ x: '10/21/2018', y0: 59, y: 60 },
{ x: '10/22/2018', y0: null, y: null },
{ x: '10/23/2018', y0: 2, y: 3 },
{ x: '10/24/2018', y0: null, y: null },
];

Reproduction

Graph with interim null values
https://codesandbox.io/s/xo818yl3yz

If you remove the custom stroke color in the theme it works..
https://codesandbox.io/s/qly4kxv726

[scottdickerson]

FYI, Passing a 0 for the interim value is an obvious workaround, but doesn't have the same meaning. I'm graphing sensor data and really need to let the user know that the sensors didn't collect any data on October 22nd. Furthermore, when I actually inspect the graph that has rendered in Chrome, it appears that it's actually rendered something in the graph svg for this data, it's just not visible for some reason.

[boygirl]

@scottdickerson This looks like a regression. I will take a look

[scottdickerson]

any pointers into where this problem might be @boygirl? I can work on a PR

[scottdickerson]

I can't seem to reproduce this anymore actually...

[scottdickerson]

I found out the secret to reproduce, see above, I updated the repro links to sandbox

[boygirl]

Weeeeeird! This will definitely help fix the issue. Thanks for doing the leg work

[doheto]

Hello !

is this solved ? why is it not possible to skip null values or ignore them ?

[becca-bailey]

There might still be a bug here, but I do want to flag a related issue I worked on a while back. By default, Victory will scale the axis linearly, so any missing dates or x-values will still appear in the axis. If you want to skip specific dates that don't have y-values, I would suggest using the scale prop to create a discontinuous scale, as documented here. https://formidable.com/open-source/victory/docs/common-props#scale

[jljorgenson18]

I'm still seeing this problem as well. It's definitely sub-optimal for many types of data, especially if you are plotting multiple lines from a single dataset on a line chart. If both gaps and continuous lines are both desired, perhaps a new prop could be added to handle this.

Edit: Recharts has a prop called "connectNulls" that does this (https://recharts.org/en-US/api/Line#connectNulls). It would be great if there was something similar in Victory

[becca-bailey]

I'll mark this as a feature request, and we can look into mimicking this behavior from recharts.

[codinsonn]

Sorry to be that guy, but any update on this yet?

[mcdunn51]

I'm wondering if this new feature ever got added? I have a chart made with Charts.js (in a web application), that I am trying to replicate using react native. I've almost done it, but i can't see a way to connect missing data points, as there is in Charts.js (see pic). Failing this, if anyone has any ideas regarding how i can accomplish this I would be very grateful.

Chart.js:

Victory-Native:

[carbonrobot]

The community has not implemented this feature yet.

@mcdunn51 Which version of Victory-Native are you using currently?