XYChart: Handling gaps in data

[RyKilleen]

Hello and thanks for an excellent library!

I'm curious if there's a definitive way to handle gaps in data with visx, specifically the XYChart?

For example, consider a time series that may have periods of time without data. The following example shows how it works today:

The path continues based on the curve to the next valid data point. Is it possible to have a gap in the line instead?

[williaster]

Hey @RyKilleen thanks for checking out visx. To create gaps in your LineSeries all you'll need to do is fill in the missing x values in your dataset and set the corresponding y values to null.

For example

[
  { x: '2023-04-30', y: 10 },
  { x: '2023-05-01', y: 10 },
  { x: '2023-05-02', y: null }, // add something like this
  { x: '2023-05-03', y: null }, // add something like this
  { x: '2023-05-04', y: 10 },
]

That should accomplish something like this (link). I would note that you must set stroke-linecap=round in order to see single points surrounded by missing data (this is the default in XYChart, but mentioning in case anyone overrides this)

[RyKilleen]

Thanks so much, appreciate it!