ComponentsCharts

Combo chart

Volume and rate together: bars on the start axis, a line on the end axis. Both axes share the zero line and the grid, so neither scale exaggerates; axis sides are logical and swap in RTL.

Recharts ComposedChart charts/combo-chart.tsxtheme · material · accent · density · font

May – Oct. Quotes sent: low 42 (May), high 71 (Oct), average 55. Win rate: low 29% (Jul), high 38% (Sep), average 34%.

Quotes sent and win rate
MonthQuotes sentWin rate
May4231%
Jun5135%
Jul4729%
Aug5833%
Sep6338%
Oct7136%

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { ComboChart } from "@vamos-ui/react/charts";

<ComboChart title="Quotes and win rate" data={rows} x="month" bars={["sent"]} lines={["winRate"]}
  config={{ sent: { label: "Quotes sent" }, winRate: { label: "Win rate", format: "percent" } }} />

config[key].axis moves any series to the other axis.

Examples

Stacked bars + line (HR)

stackBars stacks the bars; the line keeps its own axis.

Q1 2026 – Q4 2026. Engineering: low 8 (Q3 2026), high 12 (Q2 2026), average 10. Sales: low 4 (Q2 2026), high 7 (Q3 2026), average 6. Support: low 3 (Q1 2026), high 6 (Q2 2026), average 5. Avg. days to hire: low 29 d (Q4 2026), high 41 d (Q1 2026), average 35 d.

Hires and time to hire
QuarterEngineeringSalesSupportAvg. days to hire
Q1 202695341 d
Q2 2026124637 d
Q3 202687433 d
Q4 2026116529 d

End axis hidden (CMS)

endAxis={false}: the rate stays in the tooltip and the table.

Mon – Sun. Visits: low 2,080 (Sun), high 5,120 (Wed), average 3,999. Bounce rate: low 37% (Wed), high 55% (Sun), average 44%.

Visits and bounce rate
DayVisitsBounce rate
Mon4,21042%
Tue4,86039%
Wed5,12037%
Thu4,93041%
Fri4,48044%
Sat2,31052%
Sun2,08055%

API

ComboChart

PropTypeDefault
…Chart props
See Chart frame.
ChartProps—
bars
Keys drawn as bars (default axis start).
string[]—
lines
Keys drawn as lines (default axis end), drawn above the bars.
string[]—
areas
Keys drawn as tinted areas behind the bars.
string[]—
stackBars
Stack the bars.
booleanfalse
endAxis
Show the end axis.
booleantrue
endAxisFormat
End axis tick format. Default: the first end-axis series' format.
FormatSpec—
startAxisLabel / endAxisLabel
Axis titles — name both scales (label + unit).
string—
Previous
Color picker
Next
Combobox