Slope chart
Revenue by region
$1.4M+14.6%vs Before
Usage
Import the component and the stylesheet once. See Getting started to install the package.
import { SlopeChartCard } from '@lilt-ui/charts';
import '@lilt-ui/charts/styles.css';<SlopeChartCard
title="Revenue by region"
data={regionRevenue}
category="region"
from="lastYear"
to="thisYear"
/>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. surface="ghost" controls only the visual frame. See Card composition.
Data
category names a text field; from and to name numeric fields, and TypeScript rejects anything else. The headline totals the later values (or averages them with aggregate="mean"). The change beside it compares only categories measured in both periods, so a new or late-reporting category never reads as growth or loss. Percentages appear only against a positive starting value.
// One row per category, with a numeric field for each period.
const regionRevenue = [
{ region: 'North America', lastYear: 412000, thisYear: 486000 },
{ region: 'Nordics', lastYear: null, thisYear: 64000 }, // new this year
];
<SlopeChartCard
title="Revenue by region"
data={regionRevenue}
category="region" // a text field
from="lastYear" // a numeric field
to="thisYear" // another numeric field
fromLabel="2025"
toLabel="2026"
/>For a working period select, pass ranges. Each range brings its own data and delta.
<SlopeChartCard
title="Revenue by region"
category="region"
from="lastYear"
to="thisYear"
ranges={[
{ id: 'year', label: '2025 → 2026', data: byYear },
{ id: 'half', label: 'H1 → H2', data: byHalf },
]}
/>Props
Every prop SlopeChartCard 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. |
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. |
data | Row[] | One row per category with both values. Omit when using ranges. |
category | text key of Row | Names each row. Must be unique. |
from | numeric key of Row | The earlier value. |
to | numeric key of Row | The later value. |
fromLabel | string | Names the earlier period. Defaults to the key. |
toLabel | string | Names the later period. Defaults to the key. |
variant | 'slope' | 'dumbbell' | Lines across two columns (default), or rows on one shared scale. |
sort | 'change' | 'to' | 'input' | Largest gain first by default; `to` ranks by the later value. |
aggregate | 'sum' | 'mean' | How the headline summarizes categories. Use mean for rates and shares. |
headline | number | Resting headline. Defaults to the later values, summarized. |
delta | number | Fractional change for the chip. Defaults to the change in total. |
deltaTone | 'default' | 'inverse' | 'neutral' | Use inverse when a decrease is good; it also swaps the line colors. |
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 rows. |
color | string | One color for every category instead of rise and fall colors. |
height | number | Plot height of the slope variant in pixels. Defaults to 260. |
depth | boolean | Draws each change as a lit tube between two spheres. Dumbbells get the same look. |
valueFormat | Intl.NumberFormatOptions | Formats the headline, tiles, and axis, e.g. currency. |
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. |
numberStyle | 'count' | 'pop' | 'slide' | 'roll' | 'flow' | 'scramble' | How the headline animates when its value changes. Count (default) counts to the new value. |
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. |
motion | 'auto' | 'none' | None turns off decorative motion; reduced motion does this automatically. |
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. |
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. |