Scatter Chart

Mobile

Tablet

Desktop

SessionsConversions

Installation

pnpm add @blakeui/pro-react

npm install @blakeui/pro-react

yarn add @blakeui/pro-react

bun add @blakeui/pro-react

ScatterChart is built on visx scales and the motion library. It is a single component: pass time-series data (one row per date) and a series array — each series draws an offset-ring mark (an inner dot plus a stroke-only outer ring) at every row. Series colors cycle --chart-1 … --chart-5 positionally; chart chrome (grid, crosshair, axis labels) maps to the neutral tokens. On mount the points blur-fade in as a left→right wipe across the plot. Hovering resolves the nearest row by time — the rest of the field dims and blurs behind the active row's scaled-up markers, while the crosshair, floating tooltip, and time pill track the point.

import {ScatterChart} from "@blakeui/pro-react";

const activity = [
  {date: "2025-01-01", sessions: 420, conversions: 180},
  {date: "2025-02-01", sessions: 510, conversions: 260},
  // …
];

function App() {
  return (
    <ScatterChart
      data={activity}
      series={[
        {dataKey: "sessions", name: "Sessions"},
        {dataKey: "conversions", name: "Conversions"},
      ]}
    />
  );
}

Motion

On mount each point fades in from a 2px blur over 500ms, staggered by its x position so the reveal wipes left→right across the animationDuration window. Hover dimming transitions over 150ms; the tooltip panel spring-follows the crosshair, and the tooltip values always roll through the shared Odometer. All motion collapses to an instant render under prefers-reduced-motion, and the chart exposes the active point to assistive tech through a polite live region (arrow keys, Home/End, and Escape drive the crosshair from the keyboard).

Loading state

Set status="loading" to show a stroke-only skeleton wave while data resolves; flip it to "ready" and the load→ready choreography plays — the pulse flows out, the caption exits, and the points blur-fade in left→right.

Mobile

Tablet

Desktop

Loading activity…

SessionsConversions

API Reference

ScatterChart

The single chart component. Measures its container, derives the time x-scale and shared linear y-scale from the data, and renders the point series, hover layer, and loading chrome.

Prop	Type	Default	Description
`data`	`Record<string, unknown>[]`	—	One row per time point — the x key plus one numeric field per series.
`series`	`ScatterChartSeries[]`	—	The point series to draw, in paint order (see the series table below).
`xDataKey`	`string`	`"date"`	Key in each row holding the x (time) value: `Date`, ISO string, or epoch ms.
`margin`	`Partial<Margin>`	`40`	Plot margins (all sides default to 40).
`aspectRatio`	`string`	`"2 / 1"`	CSS aspect ratio of the chart box (ignored when `height` is set).
`height`	`number`	—	Fixed pixel height. Overrides aspectRatio.
`animationDuration`	`number`	`1100`	Entrance duration in ms — the left→right point-reveal stagger window.
`tickMode`	`"data" \| "domain"`	`"data"`	X ticks snap to data rows or spread evenly across the time span.
`numTicks`	`number`	`5`	Approximate x tick count.
`xTickFormat`	`(date: Date, index: number) => string`	—	Custom x tick formatter.
`yTickFormat`	`(value: number) => string`	—	Custom y tick formatter.
`showGrid`	`boolean`	`true`	Render grid rows.
`showXAxis`	`boolean`	`true`	Render the x axis.
`showYAxis`	`boolean`	`false`	Render the y axis. The canonical scatter look is x-axis-only.
`showTooltip`	`boolean`	`true`	Show the hover tooltip layer.
`showCrosshair`	`boolean`	`true`	Show the vertical crosshair.
`showPill`	`boolean`	`true`	Show the animated time pill under the crosshair.
`fadeOnHover`	`boolean`	`true`	Dim + blur the non-active points (and scale up the active row) while hovering.
`valuePrefix`	`string`	—	Static text rendered before each tooltip value (e.g. `"$"`).
`status`	`"loading" \| "ready"`	`"ready"`	While loading, shows the skeleton wave. Flipping to ready plays the entrance.
`loadingLabel`	`string`	`""`	Centered caption shown while loading. Empty string hides it.

Also supports all native div HTML attributes.

ScatterChartSeries

Each entry in the series array describes one point series.

Option	Type	Default	Description
`dataKey`	`string`	—	Key in each data row for this series' y values.
`name`	`string`	`dataKey`	Legend/tooltip label.
`color`	`string`	`var(--chart-1..5)`	Series color. Defaults cycle the chart palette by series position.
`radius`	`number`	`5`	Inner dot radius in px.
`strokeWidth`	`number`	`2`	Outer offset-ring stroke width in px; `0` disables the ring for solid dots.
`ringGap`	`number`	`2`	Gap between the inner dot and the offset ring in px.