Scatter Chart Card
The correlation view - one dot per record placed by two measures, sized by a third when the data carries one. Points are grouped into series so each cohort keeps its own colour; hovering one swaps the headline to that record and dims the other series, and axis captions sit under the plot.
Revenue per account
742
+6.8%Installation
Scatter Chart Card is part of BoardUI Pro.
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
Without bubbles
Bubbles switch on automatically when any point carries a z; pass bubble={false}for even dots when the third measure isn't worth encoding.
Data
series is { label, points, color? }[] and each point is { x, y, z?, label? }. The point's label is what the header shows on hover; averages, the legend and the tiles are derived. The period pill is a dropdown when you pass ranges.
// Points are grouped into series - each gets a colour, a legend row and a tile.// Any point carrying `z` turns the card into a bubble chart.<ScatterChartCard title="Revenue per account" series={[ { label: "Starter", points: [ { x: 12, y: 180, z: 40, label: "Acme" }, { x: 18, y: 240, z: 60, label: "Bolt" }, ], }, { label: "Growth", points: growthPoints, color: "var(--color-chart-6)" }, ]} axisLabels={["Sessions", "Revenue"]} // captions under the plot format={(n) => `$${n.toLocaleString()}`} // y measure formatX={(n) => `${n}k`} // x measure bubble={false} // force plain dots even when the data carries z tiles // average y per series below the chart/>