ComboChart
Combination bar + line chart on shared or dual y-axes.
Category: chart · WCAG 2.1-AA · chart, combo, bar, line, dual-axis, data-viz
Props
| Prop | Type | Default | Description |
|---|---|---|---|
bars | { label: string; value: number }[] | — | Bar series data |
line | { x: number; y: number }[] | — | Line series data points |
title | string | — | Title text for the component. |
description | string | — | Supporting description text. |
secondAxis | boolean | false | Render line on a secondary right y-axis |
width | number | — | Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks its container via a ResizeObserver; there is no correct pixel number in a responsive grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for this — charts call it internally. |
height | number | 320 | SVG height in px. Unlike `width`, height does NOT track the container — this is the knob you set to change the chart's aspect. |
tooltip | boolean | — | Enable hover/keyboard tooltip |
className | string | — | Additional CSS class names merged onto the root element. |
plain | boolean | false | Marks only — no axes, grid lines, or legend. For micro/inline charts. |
annotations | Annotation[] | — | Reference lines, shaded bands, and markers drawn over the plot (e.g. a target/threshold line). |
barsLabel | string | 'Bars' | Legend label for the bar series. |
format | (value: number | string | Date) => string | — | Format each X-axis tick label. |
legend | boolean | — | Show the legend. |
lineLabel | string | 'Line' | Legend label for the line series. |
xLabelEvery | number | — | Render every Nth category label. |
Design tokens
--cascivo-chart-1--cascivo-chart-2
When to use
- Overlaying two related metrics with different scales (e.g. volume bars + rate line)
- Pairing categorical totals with a continuous trend on a dual y-axis
When not to use
- Both metrics share a scale and type — use BarChart or LineChart
- More than two series of differing types — clarity breaks down
Examples
Basic combo chart
import { ComboChart } from '@cascivo/charts'
const bars = [{label:'Jan',value:100},{label:'Feb',value:120},{label:'Mar',value:90}]
const line = [{x:0,y:50},{x:1,y:70},{x:2,y:60}]
<ComboChart bars={bars} line={line} title="Sales vs Target" />