Small multiples
Grid of mini line or area charts on shared or independent scales, with each panel's max marked and a crosshair synced across panels.
Preview
Monthly rainfall, mm
DeclatestShared scale
| Point | North Ridge | Bayside | Millbrook | Fenwick | Stonegate | Dry Hollow |
|---|---|---|---|---|---|---|
| Jan | 88 | 62 | 48 | 34 | 120 | 12 |
| Feb | 74 | 55 | 43 | 30 | 104 | 10 |
| Mar | 70 | 51 | 46 | 33 | 92 | 14 |
| Apr | 58 | 44 | 52 | 37 | 77 | 18 |
| May | 52 | 39 | 61 | 45 | 66 | 24 |
| Jun | 44 | 30 | 74 | 51 | 58 | 31 |
| Jul | 41 | 22 | 88 | 49 | 63 | 37 |
| Aug | 49 | 25 | 92 | 44 | 71 | 33 |
| Sep | 63 | 38 | 70 | 40 | 90 | 21 |
| Oct | 82 | 57 | 55 | 38 | 118 | 15 |
| Nov | 96 | 66 | 50 | 36 | 141 | 13 |
| Dec | 101 | 70 | 49 | 35 | 152 | 12 |
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| series | { key, label, values: number[] }[] | — | One panel per series. |
| labels | string[] | — | One label per point on the shared x axis. |
| label | string | — | Accessible name and table caption. |
| type | "area" | "line" | "area" | Line with a soft area fill, or the line alone. |
| yScale | "shared" | "independent" | "shared" | One y range for every panel, or each panel's own. |
| columns | 2 | 3 | 4 | 3 | Panels per row at full width. |
| panelHeight | number | 92 | Plot height of each panel in px. |
| valueFormatter | (value: number) => string | Intl, 1 decimal | Formats readouts, max labels and the table. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.