Combo chart
Revenue
$722,000+21.2%
Usage
Import the component and the stylesheet once. See Getting started to install the package.
import { ComboChartCard } from '@lilt-ui/charts';
import '@lilt-ui/charts/styles.css';<ComboChartCard
title="Revenue"
data={finance}
x="month"
bars={[{ key: 'revenue' }]}
lines={[{ key: 'budget' }]}
/>Omit title to leave out the visible title. Set header={false} to remove the whole header, and use aria-label to name a chart inside your own card. legend={false} removes the legend independently. surface="ghost" controls only the visual frame. See Card composition.
Data
Pass your rows as they are; x, and every key in bars and lines, are checked against your row type. The headline totals the bars only, since a budget or a rate is not part of the amount. Each series gets a tile. null is an empty bar slot or a gap in the line, never zero.
// One row per x position, one numeric field per bar or line.
const finance = [
{ month: 'Jan', revenue: 42000, budget: 44000, margin: 0.262 },
{ month: 'Feb', revenue: 46000, budget: 46000, margin: 0.283 },
];
<ComboChartCard
title="Revenue"
data={finance}
x="month"
bars={[{ key: 'revenue', label: 'Revenue' }]}
lines={[
// A rate on its own scale, with its own format and summary.
{ key: 'margin', label: 'Margin', valueFormat: { style: 'percent' } },
]}
lineScale="own"
/>For a working period select, pass ranges. Each range brings its own data and delta.
<ComboChartCard
title="Revenue"
x="month"
bars={bars}
lines={lines}
ranges={[
{ id: 'year', label: 'This year', data: thisYear, delta: 0.212 },
{ id: 'last-year', label: 'Last year', data: lastYear, delta: 0.094 },
]}
/>Props
Every prop ComboChartCard accepts, in the order you are likely to reach for them.
| Prop | Type | Description |
|---|---|---|
title | string | Optional visible title. Omit to render no title. Also supplies the accessible name unless aria-label is set. |
data | Row[] | One row per x position. Omit when using ranges. |
x | key of Row | Text, number, or Date field for the x axis. |
bars | { key, label?, color? }[] | Numeric fields drawn as grouped bars. They make up the headline. |
lines | { key, label?, color?, dashed?, valueFormat?, aggregate? }[] | Numeric fields drawn over the bars, e.g. a budget, a forecast, or a rate. |
lineScale | 'shared' | 'own' | Shared (default) compares lines against bar heights directly. Own fits lines to their own scale for a different unit, labelled on the right with the same gridlines. |
radius | number | Corner radius of each bar’s value end. Defaults to 6. |
barWidth | number | Maximum bar width in pixels. |
barStyle | 'solid' | 'segmented' | 'needle' | 'gradient' | 'outline' | 'isometric' | How bars are drawn. |
curve | 'smooth' | 'linear' | Line shape. Smooth by default. |
points | boolean | Dots on line observations. On by default. |
aggregate | 'sum' | 'mean' | 'last' | 'max' | How the headline and tiles summarize the period. Lines on their own scale average by default. |
depth | boolean | Bars become solid blocks and lines lit tubes. Both keep their exact values. |
header | boolean | Defaults to true. False removes the whole header: title, headline, delta and period controls, with no reserved space. Pass data directly when your app owns period selection. |
aria-label | string | Accessible chart name, independent of the visible title. Falls back to title, then a generic chart name. |
delta | number | Fractional change for the chip: 0.082 shows +8.2%. |
deltaTone | 'default' | 'inverse' | 'neutral' | Use inverse when a decrease is good. |
headline | number | Resting headline. Defaults to the aggregate of non-reference series; dashed series are excluded. |
range | string | Static period label in the header. |
ranges | { id, label, data, delta?, headline? }[] | Turns the period label into a select. Each range swaps the data. |
valueFormat | Intl.NumberFormatOptions | Formats the headline, tiles, and axis, e.g. currency. |
tiles | boolean | Per-series value tiles. Defaults to true; false hides the legend. |
legend | false | 'tiles' | 'inline' | 'list' | 'pills' | 'bars' | False removes the legend without changing the data. How the legend under the plot lays out: value tiles (default), a compact inline key, list rows, tinted pills, or bars that also draw each value against the largest. |
legendSwatch | 'square' | 'dot' | 'line' | The mark beside each legend label. Defaults to a rounded square. |
height | number | Plot height in pixels. Defaults to 240. |
axis | 'minimal' | 'dots' | 'inline' | 'ruler' | 'classic' | 'segmented' | { x, y } | Axis preset. Minimal (default) labels only the x ends and has no grid. Set one per axis with `{ x, y }`; a segmented axis can take a `gradient` to read as a range. |
hover | 'pills' | 'tooltip' | 'strip' | 'headline' | The one readout for the hovered point: pills on the axes (default), a tooltip with every series, a strip docked above the plot, or the headline and tiles alone. |
hoverStyle | 'soft' | 'solid' | 'accent' | How the pills or tooltip look. Soft (default) is surface glass; accent tints it with the hovered series. |
pillSeries | 'nearest' | 'total' | key | Which series the y pill reads and the tooltip leads with. Nearest (default) follows the pointer. |
pillPosition | 'auto' | 'mark' | 'axis' | Where the value pill sits: above the hovered mark, or on the y axis. Auto picks mark when there are no y labels. |
tooltipIndicator | 'square' | 'dot' | 'line' | Series marker on each tooltip row, with hover="tooltip". Square by default. |
background | 'dots' | 'grid' | 'lines' | 'none' | Texture behind the marks. Dots by default, with a hover spotlight. |
surface | 'elevated' | 'outline' | 'ghost' | Card treatment. Ghost removes the visual frame only; header and legend are independent controls. |
palette | 'iris' | 'cobalt' | 'emerald' | Series colors. Iris by default; explicit series colors still win. |
axisInset | number | Padding between the plot edges and axis labels or pills. |
loading | boolean | Shows a neutral loading skeleton, not data. |
loadingStyle | 'shimmer' | 'draw' | 'breathe' | Shimmer sweeps a highlight over still shapes; draw reveals them in order; breathe lets them settle. Follows the selected look, including depth, and respects reduced motion. |
empty | 'dots' | 'shape' | ReactElement | null | What the card shows when the period has no data. Dots (default) gathers a quiet dot field around the message; shape lays the chart’s own outline behind it. Pass `<ChartEmpty>` with your own words, any element of your own, or null for nothing. Both looks stay still, so empty never reads as loading, and the headline reads a dash, never zero. |
compare | boolean | 'headline' | 'badge' | Drag across the plot to compare two points in time. True or headline reads the change in the headline; badge reads it in the card’s tab and leaves the headline at rest. |
target | number | { value, label? } | A goal each point should reach: a labeled line, a “vs target” chip on hover, and a count of points on target at rest. |
forecast | { from, lower?, upper?, label?, bands?: { lower, upper, label }[] } | Rows from `from` onward are projections: dotted and excluded from the headline. Supply lower/upper for one envelope, or bands ordered widest to narrowest for a fan on Line and unstacked Area. Every bound is inspectable; no forecast is estimated. |
sync | string | Link hover and pins with every card that uses the same name, matched by x value. A click pins them all, with a ghost pin on the others; Alt-click pins one card only. |
numberStyle | 'count' | 'pop' | 'slide' | 'roll' | 'flow' | 'scramble' | How the headline animates when its value changes. Count (default) counts to the new value. |
motion | 'auto' | 'none' | None turns off decorative motion; reduced motion does this automatically. |
headlineSeries | key of Row | Numeric series whose value drives the headline instead of the combined total. |
defaultRange | string | Initial range id; defaults to the first supplied range. |
locale | string | Locale used for number formatting. Defaults to en-US. |
formatValue | (value: number) => string | Custom value text, taking precedence over valueFormat. |
formatAxisValue | (value: number) => string | Custom compact axis value text. |
formatX | (value: string | number | Date) => string | Custom x label text. |
xType | 'category' | 'number' | 'time' | Override inferred x type. Use time for numeric Unix timestamps in milliseconds. |
spotlight | boolean | Highlight the inspected position in the plot background. Defaults to true. |
badge | ReactNode | Content in the tab above the card. A comparison badge can replace this while a comparison is active. |
className | string | Additional class on the card frame. |
style | CSSProperties | ChartStyle | Inline styles and scoped --lilt-* chart variables. |
stack | boolean | 'percent' | Stack the bar series with true or show percentage shares with percent. Lines remain unstacked. |
corners | 'end' | 'all' | Round the value end (default), or all bar corners. |
tracks | boolean | Draw full-height tracks behind bars or stacks. Defaults to false. |
decimate | boolean | Defaults to true. Line and Area marks retain at most four observations per pixel column. Other marks draw every row; inspection and summaries always read the full data. |
bleed | boolean | Let marks reach the card edges with a soft fade. |