ComboChart

Bars and lines on a shared category axis, with an optional second value axis on the right. The dashboard staple: volume as bars against a rate or ratio as a line, each on its own scale. See Charts overview for the loading, empty, events and ref props shared by every chart.

Dual axis

Each series declares its type ('bar' or 'line'). Give a series axis: 'right' to bind it to a second value axis — here revenue in dollars on the left, growth percent on the right. The right axis appears only when a series uses it.

<ComboChart  ariaLabel="Revenue and growth rate by quarter"  categories={['Q1', 'Q2', 'Q3', 'Q4']}  valueFormatter={(v) => `$${(v / 1000).toFixed(0)}k`}  rightValueFormatter={(v) => `${v}%`}  series={[    { name: 'Revenue', type: 'bar', data: [42000, 51000, 48000, 63000] },    { name: 'Growth', type: 'line', data: [12, 21, -6, 31], axis: 'right', smooth: true },  ]}/>

Props

Prop	Type	Default	Notes
`categories`	`(string \| number)[]`	—	Shared x-axis labels.
`series`	`ComboSeries[]`	—	Each: { name, type: "bar" \| "line", data, axis?, area?, smooth? }.
`series[].axis`	`'left' \| 'right'`	`'left'`	Which value axis the series reads.
`valueFormatter`	`(value: number) => string`	—	Formats the left value axis.
`rightValueFormatter`	`(value: number) => string`	—	Formats the right value axis (falls back to valueFormatter).
`colors`	`string[]`	—	Override the theme palette; one colour per series.