ComboChart

Combine lines, bars, and areas in a single chart with optional dual Y-axes. Perfect for showing correlated metrics with different scales.

Playground

Experiment with different settings:

Props

Midnight

barRatio

0.6

strokeWidth

showGrid

OffOn

Code

<ComboChart
  data={data}
  theme="midnight"
  barRatio={0.6}
  strokeWidth={2}
  showGrid
/>

Bar + Line (Dual Axis)

The classic combo chart: bars for absolute values, line for rates/percentages:

Revenue

Growth %

tsx

<ComboChart
  data={data}
  series={[
    { key: 'revenue', label: 'Revenue', type: 'bar', yAxis: 'left' },
    { key: 'growth', label: 'Growth %', type: 'line', yAxis: 'right' },
  ]}
  categoryKey="month"
  theme="midnight"
  yLabelLeft="Revenue ($)"
  yLabelRight="Growth (%)"
  formatYLeft={(v) => `$${(v / 1000).toFixed(0)}K`}
  formatYRight={(v) => `${v.toFixed(0)}%`}
/>

Multiple Bars + Line

Compare multiple bar series with a trend line:

Revenue

Expenses

Growth %

Area + Line

Use area for volume and line for rates:

Revenue

Growth %

Series Configuration

Each series is configured with a ComboSeriesConfig object:

Prop	Type	Default	Description
`key*`	`string`	-	Data key for this series
`label*`	`string`	-	Display label
`type*`	`"line" \| "bar" \| "area"`	-	Series type
`yAxis`	`"left" \| "right"`	`"left"`	Which Y-axis to use
`color`	`string`	-	Custom color (overrides theme)

Props

Prop	Type	Default	Description
`data*`	`T[]`	-	Data array
`series*`	`ComboSeriesConfig[]`	-	Series configuration
`categoryKey*`	`keyof T`	-	Key for X-axis categories
`width`	`number`	`600`	Chart width
`height`	`number`	`400`	Chart height
`theme*`	`ThemeName`	-	Theme name
`yLabelLeft`	`string`	-	Left Y-axis label
`yLabelRight`	`string`	-	Right Y-axis label
`xLabel`	`string`	-	X-axis label
`formatYLeft`	`(value: number) => string`	-	Left Y-axis formatter
`formatYRight`	`(value: number) => string`	-	Right Y-axis formatter
`barRatio`	`number`	`0.6`	Bar width ratio (0-1)
`strokeWidth`	`number`	`2`	Line stroke width
`fillOpacity`	`number`	`0.3`	Area fill opacity
`showGrid`	`boolean`	`true`	Show grid lines
`onDataPointClick`	`(event: DataPointClickEvent) => void`	-	Click handler
`renderTooltip`	`(props: TooltipRenderProps) => ReactNode`	-	Custom tooltip
`annotations`	`Annotation[]`	-	Reference lines and areas