Preview Updated 2026-05-10

Scatter plot

Two-dimensional scatter chart, colored by group.

Basic usage

Data is passed via props and rendered as pure SVG, with no third-party charting dependency. Colors are drawn from the --viz-1..8 tokens and are colorblind-friendly.

src/App.vue vue

<CfScatterPlot ... />

src/App.tsx tsx

<CfScatterPlot ... />

Multi-group clustering

A point’s group field decides its color; if omitted, it falls into default.

src/App.vue vue

<CfScatterPlot :data="points" />

src/App.tsx tsx

<CfScatterPlot data={points} />

API

Prop	Type	Default	Description
`data`	`ScatterPoint[]`	`—`	{ x, y, r?, group? }[]
`width / height`	`number`	`480 / 240`