# Scatter chart

> Points or bubbles on two measures with groups, hover card and keyboard-focusable dots.

Component · Pro · https://lodeui.com/components/scatter-chart

## When to use

- Relationships between two measures: seats vs revenue, price vs rating.

## When not to use

- Time series: use a line chart.

## Installation

```bash
npx shadcn@latest add @lode/scatter-chart
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="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.

## Related

- [Line chart](https://lodeui.com/components/line-chart) — Multi-series lines with legend toggles, crosshair and shared tooltip.
- [Radar chart](https://lodeui.com/components/radar-chart) — Compare series across dimensions; shapes morph and legend toggles series.
- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.