How can I show points only for series with exactly one data-point?

[jamesarosen]

I have a chart with 4 series. Most of them have lots of data and adding Points would make the chart noisy. But one series often only has a single data-point, which doesn't appear on a Line or Area without a Point.

My first thought was to set pointSize={0} in the main chart, then add a custom layer that calls <Points>, passing in only the points that are the only entry for their series. Unfortunately, <Points> isn't exported, so I have to copy the source to make my custom layer.

Does anyone have a better suggestion?

[jamesarosen]

After a few attempts with custom points, I decided the best solution was to extend every series out to the next tick, if such a tick exists. This won't work if the single data point is after the last tick, but that's easily solved by configuring the tick marks.

Here's the code:

function extendData({
  axisBottom,
  computedSerie,
  xScale,
  yScale,
}: Pluck<RenderSerieProps, 'axisBottom' | 'computedSerie' | 'xScale' | 'yScale'): ComputedDatum[] {
  const { data } = computedSerie;
  if (data.length === 0) return data;

  const ticks = axisBottom?.tickValues;
  if (!Array.isArray(ticks) || ticks.length === 0 || !(ticks[0] instanceof Date)) return data;

  const lastDatum = data.at(-1);
  const nextTick = (ticks as Date[]).find((d) => d > lastDatum.data.x);
  if (nextTick == null) return data;

  const x = new Date(+nextTick - 1);
  return data.concat({
    data: { x, y: lastDatum.data.y },
    position: { x: xScale(x), y: yScale(lastDatum.data.y) },
  });
}

function renderArea({ areaGenerator, computedSerie, fill, yScale, ...rest }: RenderSerieProps) {
  const d = areaGenerator(extendData({ computedSerie, yScale, ...rest }).map(d => d.data));
  return <path d={d} fill={fill} />
}