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

Composition contracts

The tooltip slot, the inspected series, and how bars and stacks share a plot.

  • Tooltip
  • inspectionSeries
  • renderContent
  • bars
  • stack

Tooltip is an optional component supplied through ChartPlot.tooltip, including through an ordinary React wrapper. You can also pass a configuration object to that slot. Use inspectionSeries to choose a series for observation inspection. A tooltip's className and aria-label apply to its floating panel. renderContent replaces the values body while keeping placement and pin actions, including in narrow plots. An unknown Line, Area or Bar series ID raises an error.

A plot has two independent choices: bars says which series draw as bars and holds their spacing, and stack says which series add up and how. Series in neither draw as lines, including over a stack. Category x accepts inspection and visibility; compare, focus, live, brush and linked controllers require time or numeric x.

TypeScript

<ChartPlot tooltip={{ className: 'details', 'aria-label': 'Revenue details' }}
  inspectionSeries="revenue">
  <RevenueMarks />
</ChartPlot>
PreviousValue legendsNextSmall and fixed-height plots