Combo Chart Card
Volume and rate on one canvas - rounded bars on the left axis, a line on its own right axis, each with its own formatting. Hovering a category darkens its bar, dims the rest, pops a pulsing dot on the line, and swaps the headline; the tiles below hold the bar total and the line average.
Sessions · Conversion 3.7%
83,200
+9.4%Installation
Combo Chart Card is part of BoardUI Pro.
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
Data
Both series read from the same rows: bar and line each name a field, a label, an optional colour and their own format - the axes are independent, so a count and a percentage sit together without one flattening the other. The period pill is a dropdown when you pass ranges; with no data props the card ships three demo periods.
// One row per category, carrying both series' fields.const data = [ { label: "Jan", sessions: 4200, rate: 2.4 }, { label: "Feb", sessions: 4800, rate: 2.6 }, // …];
<ComboChartCard title="Sessions" data={data} bar={{ key: "sessions", label: "Sessions", format: (n) => n.toLocaleString() }} line={{ key: "rate", label: "Conversion", color: "var(--color-chart-6)", format: (n) => `${n}%`, // the right axis keeps its own formatting }} delta={0.094} ranges={[ // period dropdown { id: "year", label: "This year", data: thisYear, delta: 0.094 }, { id: "prev", label: "Last year", data: lastYear, delta: -0.028 }, ]} tiles // bar total + line average below the chart/>