Ridgeline
Traffic by hour
55,937
| Observation | Value |
|---|---|
| Mon · 00:00 | 40 |
| Mon · 01:00 | 64 |
| Mon · 02:00 | 88 |
| Mon · 03:00 | 58 |
| Mon · 04:00 | 84 |
| Mon · 05:00 | 59 |
| Mon · 06:00 | 105 |
| Mon · 07:00 | 176 |
| Mon · 08:00 | 449 |
| Mon · 09:00 | 649 |
| Mon · 10:00 | 679 |
| Mon · 11:00 | 689 |
| Mon · 12:00 | 771 |
| Mon · 13:00 | 928 |
| Mon · 14:00 | 952 |
| Mon · 15:00 | 921 |
| Mon · 16:00 | 747 |
| Mon · 17:00 | 583 |
| Mon · 18:00 | 371 |
| Mon · 19:00 | 253 |
| Mon · 20:00 | 183 |
| Mon · 21:00 | 100 |
| Mon · 22:00 | 98 |
| Mon · 23:00 | 58 |
| Tue · 00:00 | 82 |
| Tue · 01:00 | 52 |
| Tue · 02:00 | 76 |
| Tue · 03:00 | 46 |
| Tue · 04:00 | 72 |
| Tue · 05:00 | 47 |
| Tue · 06:00 | 93 |
| Tue · 07:00 | 218 |
| Tue · 08:00 | 437 |
| Tue · 09:00 | 691 |
| Tue · 10:00 | 667 |
| Tue · 11:00 | 677 |
| Tue · 12:00 | 759 |
| Tue · 13:00 | 916 |
| Tue · 14:00 | 940 |
| Tue · 15:00 | 909 |
| Tue · 16:00 | 789 |
| Tue · 17:00 | 571 |
| Tue · 18:00 | 413 |
| Tue · 19:00 | 241 |
| Tue · 20:00 | 171 |
| Tue · 21:00 | 88 |
| Tue · 22:00 | 86 |
| Tue · 23:00 | 46 |
| Wed · 00:00 | 70 |
| Wed · 01:00 | 40 |
| Wed · 02:00 | 64 |
| Wed · 03:00 | 88 |
| Wed · 04:00 | 60 |
| Wed · 05:00 | 89 |
| Wed · 06:00 | 81 |
| Wed · 07:00 | 206 |
| Wed · 08:00 | 425 |
| Wed · 09:00 | 679 |
| Wed · 10:00 | 655 |
| Wed · 11:00 | 665 |
| Wed · 12:00 | 801 |
| Wed · 13:00 | 904 |
| Wed · 14:00 | 982 |
| Wed · 15:00 | 897 |
| Wed · 16:00 | 777 |
| Wed · 17:00 | 559 |
| Wed · 18:00 | 401 |
| Wed · 19:00 | 229 |
| Wed · 20:00 | 159 |
| Wed · 21:00 | 130 |
| Wed · 22:00 | 74 |
| Wed · 23:00 | 88 |
| Thu · 00:00 | 58 |
| Thu · 01:00 | 82 |
| Thu · 02:00 | 52 |
| Thu · 03:00 | 76 |
| Thu · 04:00 | 48 |
| Thu · 05:00 | 77 |
| Thu · 06:00 | 69 |
| Thu · 07:00 | 194 |
| Thu · 08:00 | 467 |
| Thu · 09:00 | 667 |
| Thu · 10:00 | 697 |
| Thu · 11:00 | 653 |
| Thu · 12:00 | 789 |
| Thu · 13:00 | 892 |
| Thu · 14:00 | 970 |
| Thu · 15:00 | 885 |
| Thu · 16:00 | 765 |
| Thu · 17:00 | 601 |
| Thu · 18:00 | 389 |
| Thu · 19:00 | 271 |
| Thu · 20:00 | 147 |
| Thu · 21:00 | 118 |
| Thu · 22:00 | 62 |
| Thu · 23:00 | 76 |
| Fri · 00:00 | 46 |
| Fri · 01:00 | 70 |
| Fri · 02:00 | 40 |
| Fri · 03:00 | 64 |
| Fri · 04:00 | 90 |
| Fri · 05:00 | 65 |
| Fri · 06:00 | 111 |
| Fri · 07:00 | 182 |
| Fri · 08:00 | 455 |
| Fri · 09:00 | 655 |
| Fri · 10:00 | 685 |
| Fri · 11:00 | 641 |
| Fri · 12:00 | 777 |
| Fri · 13:00 | 934 |
| Fri · 14:00 | 958 |
| Fri · 15:00 | 927 |
| Fri · 16:00 | 753 |
| Fri · 17:00 | 589 |
| Fri · 18:00 | 377 |
| Fri · 19:00 | 259 |
| Fri · 20:00 | 135 |
| Fri · 21:00 | 106 |
| Fri · 22:00 | 104 |
| Fri · 23:00 | 64 |
| Sat · 00:00 | 88 |
| Sat · 01:00 | 58 |
| Sat · 02:00 | 82 |
| Sat · 03:00 | 52 |
| Sat · 04:00 | 76 |
| Sat · 05:00 | 46 |
| Sat · 06:00 | 71 |
| Sat · 07:00 | 43 |
| Sat · 08:00 | 74 |
| Sat · 09:00 | 112 |
| Sat · 10:00 | 113 |
| Sat · 11:00 | 191 |
| Sat · 12:00 | 243 |
| Sat · 13:00 | 372 |
| Sat · 14:00 | 451 |
| Sat · 15:00 | 558 |
| Sat · 16:00 | 560 |
| Sat · 17:00 | 552 |
| Sat · 18:00 | 493 |
| Sat · 19:00 | 354 |
| Sat · 20:00 | 273 |
| Sat · 21:00 | 161 |
| Sat · 22:00 | 131 |
| Sat · 23:00 | 70 |
| Sun · 00:00 | 76 |
| Sun · 01:00 | 46 |
| Sun · 02:00 | 70 |
| Sun · 03:00 | 40 |
| Sun · 04:00 | 64 |
| Sun · 05:00 | 88 |
| Sun · 06:00 | 59 |
| Sun · 07:00 | 85 |
| Sun · 08:00 | 62 |
| Sun · 09:00 | 100 |
| Sun · 10:00 | 101 |
| Sun · 11:00 | 179 |
| Sun · 12:00 | 231 |
| Sun · 13:00 | 360 |
| Sun · 14:00 | 493 |
| Sun · 15:00 | 546 |
| Sun · 16:00 | 602 |
| Sun · 17:00 | 540 |
| Sun · 18:00 | 481 |
| Sun · 19:00 | 342 |
| Sun · 20:00 | 261 |
| Sun · 21:00 | 149 |
| Sun · 22:00 | 119 |
| Sun · 23:00 | 112 |
Usage
Import the component and the stylesheet once. See Getting started to install the package.
import { RidgelineCard } from '@lilt-ui/charts';
import '@lilt-ui/charts/styles.css';<RidgelineCard title="Traffic by hour" data={weekdayTraffic} series="day" x="hour" value="visits" />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
One row per series and x position. Ridges stack back to front in the order series first appear, and x positions keep their first-seen order. Every ridge shares one value scale so heights compare. Null draws on the baseline but reads as no data; duplicate pairs are rejected.
const weekdayTraffic = [
{ day: 'Mon', hour: '00:00', visits: 64 },
{ day: 'Mon', hour: '01:00', visits: 58 },
// …one row per day and hour
];Props
Every prop RidgelineCard 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 observation. Omit when using ranges. |
height | number | Minimum plot height, default 300px. Dense data may expand within the scrollable viewport. |
depth | boolean | Lit tiles, solid bars, or spheres. Data positions remain exact; loading keeps the same depth treatment. |
color | string | Override the palette with one CSS color. |
aggregate | 'sum' | 'mean' | 'max' | Resting headline summary; Strip defaults to mean, the others to sum. |
headline | number | Override the resting headline. |
delta | number | Fractional change shown alongside the headline. |
deltaTone | 'default' | 'inverse' | 'neutral' | Use inverse when a decrease is good. |
range | string | Static period label. |
ranges | { id, label, data, headline?, delta? }[] | Period choices with their own data. |
defaultRange | string | Initial period id. |
locale | string | Locale for numbers and dates; defaults to en-US. |
formatValue | (value: number) => string | Custom value formatter. |
badge | ReactNode | Content for the glass tab above the card. |
className | string | Class on the card frame. |
style | CSSProperties | ChartStyle | Inline styles and scoped chart variables. |
onSelectionChange | (selection | null) => void | Reports id, original row (or null for an absent day), value, and pinned state. |
renderReadout | (selection | null) => ReactNode | Consumer-owned readout, including when the header is hidden. |
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. |
series | text key of Row | One ridge per value, back to front. |
x | text, number, or date key of Row | Position along each ridge, in first-seen order. |
value | numeric key of Row | Ridge height and headline. |
overlap | number | How many rows the tallest peak rises over the ridges behind it, default 2.2. |
domain | [number, number] | Fixed value domain that must contain every value. Defaults to zero through the largest. |
onKeyDown | KeyboardEventHandler<HTMLElement> | Keyboard handler on the card frame. Chart inspection also has its own keyboard handling. |