Is there a good way to keep a continuous line without a fallback value in the case of missing data?

[c-kirkeby]

My datasets are time series and for some charts there can potentially be quite a lot of missing data points, and ideally I'd like the line to simply continue to the next available data point instead of breaking. A small slice of the data might look like:

[
  {
    "timestamp": 1707093300,
    "avgHighPrice": null,
    "avgLowPrice": 1689316073,
  },
  {
    "timestamp": 1707093600,
    "avgHighPrice": 1689316059,
    "avgLowPrice": 1688222222,
  },
  {
    "timestamp": 1707093900,
    "avgHighPrice": 1694000000,
    "avgLowPrice": null,
  }
]

without a fallbackValue

I don't like the idea of using a fallbackValue because it ends up showing an inaccurate picture of how the data is trending. For example:

without a fallbackValue - treating null values as undefined

with a fallbackValue (note I approximated the average instead of calculating here for the purpose of testing it)

The dataset I'm using upstream have a chart for the same item (note this one is for a 24h period, so the chart is slightly different):

I want to achieve something similar, where I simply disregard a null value and draw from the last point with data to the next point with data for a line. Is this possible with Unovis? Apologies if I've missed something obvious as I'm fairly new to Data Visualisation.

Source: https://github.com/c-kirkeby/osrs-price-site/blob/4313b1fb982241c670f1557e63cd510f69a7e2de/src/lib/components/charts/price-series-chart.svelte#L66

[rokotyan]

@c-kirkeby The easiest way to solve this with the current version of Unovis is to split your data array into two, filter out null data points, and have two separate VisLine components (you can provide data to components individually instead of providing data to VisXYContainer).

[c-kirkeby]

Thanks so much for your answer. That seemingly works if I set it up like this (for anyone stumbling upon this issue):

<script lang="ts">
  $: avgHighPriceSeries = data.filter((d) => d.avgHighPrice !== null);
  $: avgLowPriceSeries = data.filter((d) => d.avgLowPrice !== null);
  const yAvgLowPrice = (data: TimeSeries) => data.avgLowPrice;
  const yAvgHighPrice = (data: TimeSeries) => data.avgHighPrice;
</script>
  ...
  <VisXYContainer class="font-sans text-muted-foreground" height="300">
    <VisLine
      curveType="linear"
      data={avgLowPriceSeries}
      {x}
      y={yAvgLowPrice}
      color="var(--vis-color0)"
    />
    <VisLine
      curveType="linear"
      data={avgHighPriceSeries}
      {x}
      y={yAvgHighPrice}
      color="var(--vis-color1)"
    />
  ...
</VisXYContainer>

It does however seem to break the tooltip, crosshair and scatter points but at least this gives me something to go off for now. I'll have a crack at it and report back if I run into any issues.

Update: I wasn't passing the data to the other components. Once I passed {data} to the VisScatter and VisCrosshair it worked beautifully.

[rokotyan]

@c-kirkeby I'm glad it worked! And thanks for posting the update for other users.