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/Core

Value legends

Legends that show inspected values, inspect on hover and pin on click.

  • Legend
  • ValueLegend

Legend sits in normal layout flow. Its default cards show rounded-square color keys and the inspected values, returning to the latest values when inspection clears. Use variant="inline" for compact dots, orby="observation" with one series to list categories such as months. Hovering a legend entry inspects the corresponding chart value; clicking pins it. Render callbacks can replace the label, swatch, value, difference or entire item. Comparison JSX remains yours. ValueLegend accepts independently computed, typed entries when a family uses category or dimension legends.

TypeScript

<Legend model={model} variant="cards" />
<Legend model={model} by="observation" series="revenue" variant="inline" />
PreviousToolkitNextComposition contracts