Function ScatterChart

A scatter draw layer: one mark per finite point at (x, column-value) — x from the series' key / axis column (time or value axis) — with data-driven radius + colour (the signed-off exception — encode from columns via scales, not a per-event style callback). Reads column into a ChartSeries (gaps as NaN → no mark), registers into the enclosing Layers (scaling against its axis), and renders nothing to the DOM — the row draws it.

Interactions. Hover snaps the tracker dot to the nearest point (sampleAt), and that sample flows to the container's onTrackerChanged — the nearest-point readout. Scatter reuses the shared tracker rather than adding a separate onNearest channel, so a scatter reads out exactly like a line. Click selection hit-tests each point's disc (hitTest) — opt-in via id; the selected point (matching the selection's series id and the sample key) gets a highlight ring. Without an id the scatter is display-only.

<Layers>
  <ScatterChart
    series={s}
    column="price"
    radius={{ column: 'volume', range: [3, 14] }}
    color={{ column: 'change', range: ['#e8836b', '#15B3A6'] }}
  />
</Layers>
Copy