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

Combo charts

Bars and lines on one plot, with an optional secondary scale.

  • ComboChartCard
  • Bar
  • Line
  • scale: 'secondary'

Use ChartPlot bars={{ series: ['actual'] }} with a Bar for actual values and a Line for the budget. Only the listed bar series reserve group slots. Both marks share one scale, inspection, legend and lifecycle. Add stack to stack the bars under the same lines. For a different unit, give the line scale: 'secondary'.

TypeScript

<ChartPlot bars={{ series: ['actual'] }} tooltip={<Tooltip />}>
  <Grid pattern="dots" />
  <Bar series="actual" /><Line series="budget" />
  <XAxis /><YAxis showTicks={false} />
</ChartPlot>
PreviousStacked areaNextStat cards and sparklines