Scatter Plot
An interactive scatter: hover or focus a point for its label, drag to brush a region, and a trend line with its r value.
scatter-plot.tsxscatter-plot.css
Checking access…
Overview
Points are SVG circles; groups are told apart by shape (circle, square), not colour. A least-squares line runs through the data with the correlation in the header.
Drag across the plot to select a rectangle; the selection count and its average show below. Clear resets it.
When to use
- Comparing two measures, finding outliers, pricing studies.
When not to use
- Thousands of points: use canvas.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/scatter-plot.json$
npx shadcn@latest add https://sundaeui.dev/r/scatter-plot.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/scatter-plot.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/scatter-plot.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy scatter-plot.tsx and scatter-plot.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { ScatterPlot } from '@/components/sundae/scatter-plot'
<ScatterPlot />Props
| Prop | Type | Default |
|---|---|---|
points*Data. | { id: string; x: number; y: number; label: string; group?: 0 | 1 }[] | — |
xLabelX axis. | string | — |
yLabelY axis. | string | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Each point is focusable with its label and values; arrow keys step through points.
- Brush results are announced.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-sct; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Scatter Plot free?
- Scatter Plot is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Scatter Plot?
- Run npx shadcn@latest add https://sundaeui.dev/r/scatter-plot.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Scatter Plot support keyboard and screen readers?
- Each point is focusable with its label and values; arrow keys step through points. Brush results are announced.
- Does Scatter Plot respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All data →Stacked Bars
Data · Refined- Pro
Scrub Sparkline
Data · Refined - Pro
Funnel Chart
Data · Refined - Pro
Histogram
Data · Refined - Pro
Activity Rings
Data · Expressive - Pro
Heatmap Grid
Data · Understated