Chart style

Applies to every chart.

Palette

Theme

Appearance

Depth
Surface
Background

Reading & motion

Axis
Hover
Legend
Numbers
Loading
Empty
Using chart defaults

Docs

Install, API and guides

  • Getting started

Reference2

  • API reference
  • Motion & accessibility
API reference/Chart families

Scatter, flow and profile charts

Points, conserved flows, profiles and before-and-after pairs.

  • ScatterChartCard
  • SankeyChartCard
  • RadarChartCard
  • SlopeChartCard

ScatterChartCard plots numeric x and y fields with an optional label; coincident points stay reachable with the arrow keys. SankeyChartCard takes links as rows of source, target and value, and checks that flows are conserved. RadarChartCard compares profiles across ordered dimensions with one shared unit; a missing value opens the outline rather than closing a false shape. SlopeChartCard joins each category's from and to values, as a slope or a dumbbell.

Each card supports hover, touch, keyboard inspection and pinning, loading states and reduced motion. Their chart pages list every prop: Scatter, Sankey, Radar and Slope.

TypeScript

<ScatterChartCard
  title="Campaign results"
  data={campaignResults}
  x="spend"
  y="signups"
  label="campaign"
/>
PreviousFunnels and heatmapsNextFinance