Scatter chartPro
Points or bubbles on two measures with groups, hover card and keyboard-focusable dots.
MRR
When to use
- Relationships between two measures: seats vs revenue, price vs rating.
When not to use
- Time series: use a line chart.
Installation
Usage
Import it from @/components/ui/scatter-chart after installing.
example.tsx
import { ScatterChart } from "@/components/ui/scatter-chart";
<ScatterChart data={accounts} xLabel="Seats" yLabel="MRR" formatY={(n) => `$${n}`} />API reference
ScatterChart
Dots or bubbles with gridlines, groups and a hover card.
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { id; x; y; z?; label?; group? }[] | – | z sizes bubbles; group colors them. |
| xLabel / yLabel | string | – | Axis names. |
| colors | Record<string, string> | – | Color per group. |
| formatX / formatY / height | (n) => string / number | – | Labels and size. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Move between points |
Accessibility
- Each point is focusable and labelled with both values and its group.
Motion
- Points pop in with a stagger; the hovered point grows and others dim.
Responsive behavior
- Fills its width at a fixed height.
Performance
- Fine up to a few hundred points; aggregate beyond that.
Notes for AI
- Give every point a unique id.
This page as Markdown, for assistants and coding agents:
/components/scatter-chart/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt