Sparkline
Tiny inline line, area or bar chart with last-point dot, min/max markers, trend colour, a hover/keyboard value tooltip and a sliding live mode.
Preview
Revenue
+12.4%Churn
−0.4 ptTickets
+9%Requests / s
live63
CPU46%
Memory66%
Disk I/O11 MB/s
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | number[] | — | Values, oldest first. |
| label | string | — | What the values are; the accessible name adds a summary. |
| type | "line" | "area" | "bar" | "line" | Mark type. |
| width | number | parent width | Width in px; omit to fill the parent. |
| height | number | 32 | Height in px. |
| color | string | trend or --chart-2 | Any CSS colour. |
| trend | boolean | false | Colour by direction: success up, danger down. |
| invertTrend | boolean | false | Treat a falling line as good. |
| showLast | boolean | true | Dot on the last point. |
| showMinMax | boolean | false | Markers on the lowest and highest points. |
| curve | "smooth" | "linear" | "smooth" | Monotone or straight segments. |
| labels | string[] | — | X labels shown in the tooltip. |
| valueFormatter | (value: number) => string | 1 decimal | Formats tooltip and summary values. |
| interactive | boolean | true | Hover and arrow-key value readout. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.