Chart
Responsive SVG area, line and bar charts with nice-number axes, a keyboard-driven crosshair tooltip, toggleable legend and draw-in animation.
Preview
Revenue, Jan – Aug
$40,300+4.4% vs Jul
| month | Subscriptions | Services |
|---|---|---|
| Jan | $18,400 | $6,200 |
| Feb | $19,650 | $5,800 |
| Mar | $21,300 | $7,400 |
| Apr | $20,900 | $9,100 |
| May | $23,800 | $8,300 |
| Jun | $26,150 | $9,800 |
| Jul | $27,400 | $11,200 |
| Aug | $29,900 | $10,400 |
Sign-ups this week
2,061+8.1%
| day | Web | App |
|---|---|---|
| Mon | 142 | 96 |
| Tue | 168 | 121 |
| Wed | 155 | 134 |
| Thu | 189 | 118 |
| Fri | 204 | 151 |
| Sat | 97 | 163 |
| Sun | 84 | 139 |
API latency, today
104 ms+6 ms p50
| hour | p50 | p95 |
|---|---|---|
| 00:00 | 84 ms | 212 ms |
| 03:00 | 79 ms | 198 ms |
| 06:00 | 91 ms | 236 ms |
| 09:00 | 118 ms | 311 ms |
| 12:00 | 126 ms | 342 ms |
| 15:00 | 112 ms | 287 ms |
| 18:00 | 104 ms | 264 ms |
| 21:00 | 88 ms | 221 ms |
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | Record<string, string | number>[] | — | Rows, one per x position. |
| index | string | — | Key of the category in each row. |
| series | { key: string; label: string; color?: string }[] | — | Series in legend order; colour defaults to --chart-1..5. |
| type | "area" | "line" | "bar" | "area" | Mark type. |
| stacked | boolean | false | Stack area or bar series; the tooltip adds a total. |
| label | string | — | Accessible name of the chart and caption of its hidden data table. |
| height | number | 240 | Plot height in px; width follows the container. |
| valueFormatter | (value: number) => string | Intl number | Formats tooltip, table and summary values. |
| tickFormatter | (value: number) => string | compact Intl | Formats y axis ticks. |
| tickCount | number | 4 | Approximate number of nice y ticks. |
| curve | "smooth" | "linear" | "smooth" | Monotone cubic or straight segments. |
| dots | boolean | false | Draw a dot at every point. |
| legend | boolean | true | Show toggleable legend pills (two or more series). |
| defaultHidden | string[] | [] | Series keys hidden at first. |
| defaultActive | number | — | Index read out at rest (crosshair and tooltip), e.g. the latest point. |
| locale | string | "en-US" | Locale of the default formatters. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.