Lollipop chart
Sorted horizontal lollipops with value labels, a target line, highlighted top and bottom items, and a deltas variant around a centre axis.
Preview
Test coverage
% of linesChange since last quarter
pointsInstall
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { key: string; label: string; value: number; previous?: number }[] | — | Items; previous enables the delta variant. |
| label | string | — | Names the list. |
| variant | "value" | "delta" | "value" | Values from zero, or change from previous around a centre axis. |
| target | number | — | Goal drawn as a dashed line (value variant). |
| targetLabel | string | "Target" | Name of the goal line. |
| highlight | { top?: number; bottom?: number } | { top: 1, bottom: 1 } | Colour the top and bottom N items. |
| sort | boolean | true | Sort highest first (by change for deltas). |
| rowHeight | number | 30 | Row height in px. |
| valueFormatter | (value: number) => string | 1 decimal | Formats values. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.