Combo Chart React component
A bar and line combo chart on two axes: bars for an amount like revenue, a smooth line for a rate like margin, with a dashed target, bars that grow in one after another, a line that draws over them, and a column tooltip with the change from the month before.
About the Combo Chart component
Combo Chart puts two measures with different units on one chart: an amount as bars on the left axis and a rate as a line on the right axis, so you can see revenue and margin, orders and conversion or signups and churn together.
The bars grow in one after another and the line draws over them. Hover, tap or use the arrow keys to read a month's values with the change from the month before, and add a dashed target for the line.
When to use it
Use it when two related numbers move together and the story is in how they relate: revenue vs margin, sessions vs conversion rate, tickets vs response time.
If both series share a unit, a single-axis line or bar chart is easier to read; dual axes can suggest relationships that aren't there.
Installation
Add the Combo Chart component to your project with the shadcn CLI. It lands in components/combo-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/combo-chartOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<ComboChart /> accepts 12 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Revenue and gross margin" |
| subtitle | string | "Monthly, FY 2025" |
| data | { label: string; bar: number; line: number }[] | DEFAULT_DATA |
| barLabel | string | "Revenue" |
| lineLabel | string | "Gross margin" |
| barColor | string | — |
| lineColor | string | — |
| lineTarget Optional goal for the line series, drawn as a dashed rule on the right axis. | number | 68 |
| height Height of the plot area, in px. | number | 300 |
| formatBar | (value: number) => string | (v) => money.format(v) |
| formatLine | (value: number) => string | (v) => `${v.toFixed(1)}%` |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Revenue and gross margin"
- subtitlestringDefault: "Monthly, FY 2025"
- data{ label: string; bar: number; line: number }[]Default: DEFAULT_DATA
- barLabelstringDefault: "Revenue"
- lineLabelstringDefault: "Gross margin"
- barColorstring
- lineColorstring
- lineTarget
Optional goal for the line series, drawn as a dashed rule on the right axis.
numberDefault: 68 - height
Height of the plot area, in px.
numberDefault: 300 - formatBar(value: number) => stringDefault: (v) => money.format(v)
- formatLine(value: number) => stringDefault: (v) => `${v.toFixed(1)}%`
npm dependencies
Installed for you by the shadcn CLI.
Combo Chart FAQ
- How do I pass my data?
- data is one entry per x position: { label, bar, line }. barLabel and lineLabel name the two series in the legend, header and tooltip.
- Can I change the number formats?
- formatBar and formatLine format each axis, the header and the tooltip. The defaults are compact dollars for bars and one-decimal percentages for the line.
- What's the dashed line?
- lineTarget draws a goal for the line series on the right axis. Leave it undefined to hide it.
- Is it accessible?
- The plot is focusable with a text summary; arrow keys, Home and End move between columns, Escape clears the tooltip. With reduced motion the chart shows straight away.
