Scatter Chart

A scatter chart for how two measures relate, with optional dot size for a third.

When to use

Use when: How two measures relate, one dot per item, with dot size for a third.
Avoid when: Categories on one axis; use a Bar Chart.

Installation

bunx shelf add chart-scatter

The source lands in src/components/ui/chart-scatter.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Chart from "@/components/ui/chart-scatter";

<ScatterChart aria-label="Price against rating">
  <Chart.Grid vertical />
  <Chart.XAxis type="number" dataKey="price" name="Price" />
  <Chart.YAxis type="number" dataKey="rating" name="Rating" />
  <Chart.Tooltip />
  <Scatter data={data} name="Products" />
</ScatterChart>

Built on

Packages: @stylexjs/stylex, recharts
Shelf items: Chart, foundations
Figma: In progress. See Designers and Figma.