Combo ChartNew

Bars and lines on one chart, such as revenue as bars and margin as a line, with a second axis on the right for values of another kind. Plain SVG.

$ pnpm dlx shadcn@latest add @dashral/combo-chart

Revenue
Margin

Installation

$ pnpm dlx shadcn@latest add @dashral/combo-chart

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/combo-chart.json

When to use

Two related measures over the same periods, one as bars and one as a line: revenue and margin, orders and a target.

When not to use

One kind of value only: Bar Chart or Line Chart.
Parts of a whole: Donut Chart.

Usage

Your rows, the column along the bottom (index), and each series as bars or a line; a line of another kind of value takes the right axis.

example.tsx

1import { ComboChart } from "@/components/dashral/combo-chart"
2
3const data = [
4  { month: "Aug", revenue: 52400, margin: 0.34 },
5  { month: "Sep", revenue: 58300, margin: 0.36 },
6  { month: "Oct", revenue: 61700, margin: 0.35 },
7]
8
9export default function RevenueAndMargin() {
10  return (
11    <ComboChart
12      data={data}
13      index="month"
14      series={[
15        { key: "revenue", label: "Revenue" },
16        { key: "margin", label: "Margin", type: "line", axis: "right" },
17      ]}
18      rightFormatOptions={{ style: "percent" }}
19      aria-label="Revenue and margin by month"
20    />
21  )
22}

Using the npm package? Import from @dashral/ui/components/combo-chart instead, here and in the examples; the rest is the same.

Examples

Orders against a target

A dashed line on the same axis as the bars, so a week above the goal reads at a glance.

Orders
Target

Revenue card

Two bar series side by side and a margin line; the range moves every mark and counts the total to its new sum.

Revenue

$308.2K

Revenue
Refunds
Margin

API reference

ComboChart

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`data`	`Record<string, string \| number>[]` The rows, in order along the x axis. Required.	—
`index`	`string` The key for the x axis: a label, or a timestamp or ISO date with timeFormat. Required.	—
`series`	`{ key, label, type?, axis?, color?, dashed? }[]` What to draw, in order. type: "bar" (the default) or "line"; axis: "right" reads a series against a second axis on the right (on the left in right-to-left). dashed is for lines. Required.	—
`rightFormatOptions`	`Intl.NumberFormatOptions` How the right axis' values are written, e.g. { style: "percent" }.	—
`alignZero`	`boolean` When the chart starts at zero, both axes put their zero on the same grid line, so a negative value on one (a negative margin) never floats above the other's baseline. false lets each axis fit its own values.	`true`
`curve`	`"smooth" \| "linear" \| "step"` How the lines bend; smooth never bends past a value it didn't have.	`"smooth"`
`radius`	`number` Corner radius of a bar's end; the end on the axis stays square.	`4`
`height`	`number` In pixels, axes included; the width follows the container.	`260`
`formatOptions`	`Intl.NumberFormatOptions` How values are written in the tooltip, e.g. { style: "currency", currency: "USD" }; the axis writes them compactly.	—
`timeFormat`	`Intl.DateTimeFormatOptions` Reads the index as dates and writes them like this.	—
`showLegend`	`boolean`	`more than one series`
`showGrid`	`boolean` Dashed lines at the axis values.	`true`
`showYAxis`	`boolean` The values along the left.	`true`
`locale`	`string`	`the LocaleProvider's`
`aria-label`	`string` What the chart shows, e.g. “Revenue by month”.	`"Trend from … to …"`
`classNames`	`{ legend, tooltip }`	—

Keyboard

Keys	Action
`Tab`	Focus the chart
`←`or`→`	Read the previous or next point
`Home`or`End`	The first or last point
`Esc`	Stop reading

Accessibility

A group named by your label (by default, how the first series went); the point you move to with the arrow keys is read out with every series' value.
The x axis runs left to right in every language, as on most charts; the legend and tooltip follow the page's direction.
The tooltip lists every series by name, so nothing depends on telling colors apart.
Values on the right axis are written with rightFormatOptions, in the tooltip and read out.

Motion

The bars grow up from the axis and the lines draw in from the left when it first shows; new data moves both to their new places. Instant with reduced motion.