Skyline
Contributions
872
| Observation | Value |
|---|---|
| 2025-10-08 | 0 |
| 2025-10-09 | 1 |
| 2025-10-10 | 2 |
| 2025-10-11 | 3 |
| 2025-10-12 | 0 |
| 2025-10-13 | 0 |
| 2025-10-14 | 0 |
| 2025-10-15 | 5 |
| 2025-10-16 | 2 |
| 2025-10-17 | 4 |
| 2025-10-18 | 6 |
| 2025-10-19 | 7 |
| 2025-10-20 | 0 |
| 2025-10-21 | 0 |
| 2025-10-22 | 5 |
| 2025-10-23 | 6 |
| 2025-10-24 | 2 |
| 2025-10-25 | 2 |
| 2025-10-26 | 2 |
| 2025-10-27 | 0 |
| 2025-10-28 | 0 |
| 2025-10-29 | 1 |
| 2025-10-30 | 2 |
| 2025-10-31 | 3 |
| 2025-11-01 | 0 |
| 2025-11-02 | 1 |
| 2025-11-03 | 0 |
| 2025-11-04 | 0 |
| 2025-11-05 | 0 |
| 2025-11-06 | 1 |
| 2025-11-07 | 2 |
| 2025-11-08 | 3 |
| 2025-11-09 | 0 |
| 2025-11-10 | 3 |
| 2025-11-11 | 0 |
| 2025-11-12 | 3 |
| 2025-11-13 | 0 |
| 2025-11-14 | 1 |
| 2025-11-15 | 2 |
| 2025-11-16 | 4 |
| 2025-11-17 | 0 |
| 2025-11-18 | 0 |
| 2025-11-19 | 6 |
| 2025-11-20 | 8 |
| 2025-11-21 | 6 |
| 2025-11-22 | 7 |
| 2025-11-23 | 8 |
| 2025-11-24 | 0 |
| 2025-11-25 | 0 |
| 2025-11-26 | 5 |
| 2025-11-27 | 5 |
| 2025-11-28 | 5 |
| 2025-11-29 | 1 |
| 2025-11-30 | 2 |
| 2025-12-01 | 0 |
| 2025-12-02 | 3 |
| 2025-12-03 | 0 |
| 2025-12-04 | 1 |
| 2025-12-05 | 2 |
| 2025-12-06 | 3 |
| 2025-12-07 | 0 |
| 2025-12-08 | 0 |
| 2025-12-09 | 0 |
| 2025-12-10 | 3 |
| 2025-12-11 | 1 |
| 2025-12-12 | 2 |
| 2025-12-13 | 3 |
| 2025-12-14 | 5 |
| 2025-12-15 | 0 |
| 2025-12-16 | 0 |
| 2025-12-17 | 4 |
| 2025-12-18 | 5 |
| 2025-12-19 | 1 |
| 2025-12-20 | 2 |
| 2025-12-21 | 2 |
| 2025-12-22 | 0 |
| 2025-12-23 | 0 |
| 2025-12-24 | 1 |
| 2025-12-25 | 2 |
| 2025-12-26 | 3 |
| 2025-12-27 | 0 |
| 2025-12-28 | 1 |
| 2025-12-29 | 0 |
| 2025-12-30 | 0 |
| 2025-12-31 | 0 |
| 2026-01-01 | 1 |
| 2026-01-02 | 2 |
| 2026-01-03 | 3 |
| 2026-01-04 | 0 |
| 2026-01-05 | 0 |
| 2026-01-06 | 0 |
| 2026-01-07 | 3 |
| 2026-01-08 | 0 |
| 2026-01-09 | 1 |
| 2026-01-10 | 2 |
| 2026-01-11 | 3 |
| 2026-01-12 | 0 |
| 2026-01-13 | 0 |
| 2026-01-14 | 6 |
| 2026-01-15 | 8 |
| 2026-01-16 | 7 |
| 2026-01-17 | 9 |
| 2026-01-18 | 10 |
| 2026-01-19 | 0 |
| 2026-01-20 | 0 |
| 2026-01-21 | 7 |
| 2026-01-22 | 7 |
| 2026-01-23 | 7 |
| 2026-01-24 | 3 |
| 2026-01-25 | 3 |
| 2026-01-26 | 3 |
| 2026-01-27 | 0 |
| 2026-01-28 | 0 |
| 2026-01-29 | 1 |
| 2026-01-30 | 2 |
| 2026-01-31 | 3 |
| 2026-02-01 | 0 |
| 2026-02-02 | 0 |
| 2026-02-03 | 0 |
| 2026-02-04 | 3 |
| 2026-02-05 | 0 |
| 2026-02-06 | 1 |
| 2026-02-07 | 2 |
| 2026-02-08 | 3 |
| 2026-02-09 | 0 |
| 2026-02-10 | 0 |
| 2026-02-11 | 3 |
| 2026-02-12 | 4 |
| 2026-02-13 | 1 |
| 2026-02-14 | 2 |
| 2026-02-15 | 2 |
| 2026-02-16 | 0 |
| 2026-02-17 | 3 |
| 2026-02-18 | 1 |
| 2026-02-19 | 2 |
| 2026-02-20 | 3 |
| 2026-02-21 | 0 |
| 2026-02-22 | 1 |
| 2026-02-23 | 0 |
| 2026-02-24 | 0 |
| 2026-02-25 | 0 |
| 2026-02-26 | 1 |
| 2026-02-27 | 2 |
| 2026-02-28 | 3 |
| 2026-03-01 | 0 |
| 2026-03-02 | 0 |
| 2026-03-03 | 0 |
| 2026-03-04 | 3 |
| 2026-03-05 | 0 |
| 2026-03-06 | 1 |
| 2026-03-07 | 2 |
| 2026-03-08 | 3 |
| 2026-03-09 | 0 |
| 2026-03-10 | 0 |
| 2026-03-11 | 5 |
| 2026-03-12 | 8 |
| 2026-03-13 | 7 |
| 2026-03-14 | 10 |
| 2026-03-15 | 12 |
| 2026-03-16 | 0 |
| 2026-03-17 | 0 |
| 2026-03-18 | 10 |
| 2026-03-19 | 10 |
| 2026-03-20 | 9 |
| 2026-03-21 | 5 |
| 2026-03-22 | 4 |
| 2026-03-23 | 0 |
| 2026-03-24 | 0 |
| 2026-03-25 | 0 |
| 2026-03-26 | 1 |
| 2026-03-27 | 2 |
| 2026-03-28 | 3 |
| 2026-03-29 | 0 |
| 2026-03-30 | 0 |
| 2026-03-31 | 0 |
| 2026-04-01 | 3 |
| 2026-04-02 | 0 |
| 2026-04-03 | 1 |
| 2026-04-04 | 2 |
| 2026-04-05 | 3 |
| 2026-04-06 | 0 |
| 2026-04-07 | 0 |
| 2026-04-08 | 2 |
| 2026-04-09 | 3 |
| 2026-04-10 | 0 |
| 2026-04-11 | 1 |
| 2026-04-12 | 2 |
| 2026-04-13 | 3 |
| 2026-04-14 | 0 |
| 2026-04-15 | 1 |
| 2026-04-16 | 2 |
| 2026-04-17 | 3 |
| 2026-04-18 | 0 |
| 2026-04-19 | 1 |
| 2026-04-20 | 0 |
| 2026-04-21 | 0 |
| 2026-04-22 | 0 |
| 2026-04-23 | 1 |
| 2026-04-24 | 2 |
| 2026-04-25 | 3 |
| 2026-04-26 | 0 |
| 2026-04-27 | 0 |
| 2026-04-28 | 0 |
| 2026-04-29 | 3 |
| 2026-04-30 | 0 |
| 2026-05-01 | 1 |
| 2026-05-02 | 2 |
| 2026-05-03 | 3 |
| 2026-05-04 | 0 |
| 2026-05-05 | 3 |
| 2026-05-06 | 5 |
| 2026-05-07 | 8 |
| 2026-05-08 | 7 |
| 2026-05-09 | 10 |
| 2026-05-10 | 12 |
| 2026-05-11 | 0 |
| 2026-05-12 | 0 |
| 2026-05-13 | 13 |
| 2026-05-14 | 13 |
| 2026-05-15 | 12 |
| 2026-05-16 | 7 |
| 2026-05-17 | 6 |
| 2026-05-18 | 0 |
| 2026-05-19 | 0 |
| 2026-05-20 | 1 |
| 2026-05-21 | 1 |
| 2026-05-22 | 2 |
| 2026-05-23 | 3 |
| 2026-05-24 | 0 |
| 2026-05-25 | 0 |
| 2026-05-26 | 0 |
| 2026-05-27 | 3 |
| 2026-05-28 | 0 |
| 2026-05-29 | 1 |
| 2026-05-30 | 2 |
| 2026-05-31 | 3 |
| 2026-06-01 | 0 |
| 2026-06-02 | 0 |
| 2026-06-03 | 2 |
| 2026-06-04 | 3 |
| 2026-06-05 | 0 |
| 2026-06-06 | 1 |
| 2026-06-07 | 2 |
| 2026-06-08 | 0 |
| 2026-06-09 | 0 |
| 2026-06-10 | 1 |
| 2026-06-11 | 2 |
| 2026-06-12 | 3 |
| 2026-06-13 | 0 |
| 2026-06-14 | 1 |
| 2026-06-15 | 0 |
| 2026-06-16 | 0 |
| 2026-06-17 | 0 |
| 2026-06-18 | 1 |
| 2026-06-19 | 2 |
| 2026-06-20 | 3 |
| 2026-06-21 | 0 |
| 2026-06-22 | 0 |
| 2026-06-23 | 0 |
| 2026-06-24 | 3 |
| 2026-06-25 | 0 |
| 2026-06-26 | 1 |
| 2026-06-27 | 2 |
| 2026-06-28 | 3 |
| 2026-06-29 | 3 |
| 2026-06-30 | 0 |
| 2026-07-01 | 4 |
| 2026-07-02 | 6 |
| 2026-07-03 | 6 |
| 2026-07-04 | 9 |
| 2026-07-05 | 12 |
| 2026-07-06 | 0 |
| 2026-07-07 | 0 |
| 2026-07-08 | 14 |
| 2026-07-09 | 15 |
| 2026-07-10 | 15 |
| 2026-07-11 | 10 |
| 2026-07-12 | 9 |
| 2026-07-13 | 0 |
| 2026-07-14 | 0 |
| 2026-07-15 | 2 |
| 2026-07-16 | 2 |
| 2026-07-17 | 2 |
| 2026-07-18 | 3 |
| 2026-07-19 | 0 |
| 2026-07-20 | 0 |
| 2026-07-21 | 3 |
| 2026-07-22 | 3 |
| 2026-07-23 | 0 |
| 2026-07-24 | 1 |
| 2026-07-25 | 2 |
| 2026-07-26 | 3 |
| 2026-07-27 | 0 |
| 2026-07-28 | 0 |
| 2026-07-29 | 2 |
| 2026-07-30 | 3 |
| 2026-07-31 | 0 |
| 2026-08-01 | 1 |
| 2026-08-02 | 2 |
| 2026-08-03 | 0 |
| 2026-08-04 | 0 |
| 2026-08-05 | 1 |
| 2026-08-06 | 2 |
| 2026-08-07 | 3 |
| 2026-08-08 | 0 |
| 2026-08-09 | 1 |
| 2026-08-10 | 0 |
| 2026-08-11 | 0 |
| 2026-08-12 | 0 |
| 2026-08-13 | 1 |
| 2026-08-14 | 2 |
| 2026-08-15 | 3 |
| 2026-08-16 | 0 |
| 2026-08-17 | 0 |
| 2026-08-18 | 0 |
| 2026-08-19 | 3 |
| 2026-08-20 | 0 |
| 2026-08-21 | 1 |
| 2026-08-22 | 2 |
| 2026-08-23 | 3 |
| 2026-08-24 | 0 |
| 2026-08-25 | 0 |
| 2026-08-26 | 3 |
| 2026-08-27 | 5 |
| 2026-08-28 | 4 |
| 2026-08-29 | 7 |
| 2026-08-30 | 11 |
| 2026-08-31 | 0 |
| 2026-09-01 | 0 |
| 2026-09-02 | 15 |
| 2026-09-03 | 16 |
| 2026-09-04 | 16 |
| 2026-09-05 | 12 |
| 2026-09-06 | 11 |
| 2026-09-07 | 0 |
| 2026-09-08 | 0 |
| 2026-09-09 | 3 |
| 2026-09-10 | 3 |
| 2026-09-11 | 2 |
| 2026-09-12 | 3 |
| 2026-09-13 | 0 |
| 2026-09-14 | 3 |
| 2026-09-15 | 0 |
| 2026-09-16 | 3 |
| 2026-09-17 | 0 |
| 2026-09-18 | 1 |
| 2026-09-19 | 2 |
| 2026-09-20 | 3 |
| 2026-09-21 | 0 |
| 2026-09-22 | 0 |
| 2026-09-23 | 2 |
| 2026-09-24 | 3 |
| 2026-09-25 | 0 |
| 2026-09-26 | 1 |
| 2026-09-27 | 2 |
| 2026-09-28 | 0 |
| 2026-09-29 | 0 |
| 2026-09-30 | 1 |
| 2026-10-01 | 2 |
| 2026-10-02 | 3 |
| 2026-10-03 | 0 |
| 2026-10-04 | 1 |
| 2026-10-05 | 0 |
| 2026-10-06 | 3 |
| 2026-10-07 | 0 |
Usage
Import the component and the stylesheet once. See Getting started to install the package.
import { SkylineCard } from '@lilt-ui/charts';
import '@lilt-ui/charts/styles.css';<SkylineCard title="Contributions" data={yearContributions} date="date" value="commits" />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 UTC day. Bounds default to the observed dates and span at most ten years. Height and color both carry the value. Null days stay a low grey slab, measured zero keeps a tinted slab, and days after today lie flat as outlines. Duplicate days are rejected; aggregate them first.
const yearContributions = [
{ date: '2025-10-08', commits: 4 },
{ date: '2025-10-09', commits: 11 },
// …one row per day
];Props
Every prop SkylineCard 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 320px. 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. |
date | date, string, or numeric key of Row | UTC date per day; numbers are milliseconds since the Unix epoch. |
value | numeric key of Row | Height, color, and headline. |
from | string | number | Date | Inclusive UTC bounds. Defaults to the first and last observed dates. |
to | string | number | Date | Inclusive UTC bounds. Defaults to the first and last observed dates. |
today | string | number | Date | UTC cutoff for future days; defaults to today. |
weekStartsOn | 0 | 1 | Sunday (0) or Monday (1, default). |
domain | [number, number] | Fixed value domain that must contain every value. Defaults to zero through the largest. |
rise | number | How many cell lengths the largest value rises above the floor, default 5. |
gap | number | Space between neighbouring prisms as a share of a cell, 0 to 0.6, default 0.2. |
onKeyDown | KeyboardEventHandler<HTMLElement> | Keyboard handler on the card frame. Chart inspection also has its own keyboard handling. |