Combo Chart
Bars and lines on the same chart. Common for showing volume alongside a rate — revenue bars with a margin line, sessions with a conversion rate. Use dualAxis when the two scales are very different.
Examples
Dual axis
Multiple bars + line
Props
data*
Record<string, string | number>[]
Array of data objects, one per x-axis point.
index*
string
Key used as the x-axis label.
bars*
string[]
Keys to render as bar series.
lines*
string[]
Keys to render as line series.
colors= palette
string[]
Override chart palette colours. Bars are coloured first, then lines.
dualAxis= false
boolean
Plot line series against a second y-axis on the right. Use when bars and lines have very different scales.
valueFormatter= —
(value: number) => string
Format values on the primary (left) y-axis and bar tooltips.
secondaryFormatter= —
(value: number) => string
Format values on the secondary (right) y-axis and line tooltips. Falls back to valueFormatter.
curveType= 'monotone'
'linear' | 'monotone' | 'step'
Interpolation style for line series.
showLegend= true
boolean
Show the series legend.
showGrid= true
boolean
Show a horizontal background grid.
height= 300
number
Fixed height of the chart in px.
className= —
string
Extra class on the outer container.
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | Record<string, string | number>[] | — | Array of data objects, one per x-axis point. |
| index* | string | — | Key used as the x-axis label. |
| bars* | string[] | — | Keys to render as bar series. |
| lines* | string[] | — | Keys to render as line series. |
| colors | string[] | palette | Override chart palette colours. Bars are coloured first, then lines. |
| dualAxis | boolean | false | Plot line series against a second y-axis on the right. Use when bars and lines have very different scales. |
| valueFormatter | (value: number) => string | — | Format values on the primary (left) y-axis and bar tooltips. |
| secondaryFormatter | (value: number) => string | — | Format values on the secondary (right) y-axis and line tooltips. Falls back to valueFormatter. |
| curveType | 'linear' | 'monotone' | 'step' | 'monotone' | Interpolation style for line series. |
| showLegend | boolean | true | Show the series legend. |
| showGrid | boolean | true | Show a horizontal background grid. |
| height | number | 300 | Fixed height of the chart in px. |
| className | string | — | Extra class on the outer container. |