Slope chart
Before/after slope chart with labelled endpoints, collision-free labels, up/down colouring and hover or keyboard highlight.
Preview
Signups by channel
Q2 → Q3| Item | Q2 | Q3 | Change |
|---|---|---|---|
| Search | 4,210 | 5,380 | +27.8% |
| Referral | 2,980 | 3,410 | +14.4% |
| Social | 3,150 | 2,240 | -28.9% |
| 1,820 | 2,690 | +47.8% | |
| Events | 960 | 610 | -36.5% |
| Partners | 1,240 | 1,260 | +1.6% |
Page load, before and after the rewrite
Lower is better| Item | v3 | v4 | Change |
|---|---|---|---|
| Home | 1840 ms | 920 ms | -50% |
| Search | 2310 ms | 1480 ms | -35.9% |
| Checkout | 1290 ms | 1350 ms | +4.7% |
| Account | 980 ms | 640 ms | -34.7% |
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { key: string; label: string; before: number; after: number }[] | — | Items with a before and an after value. |
| label | string | — | Accessible name and table caption. |
| beforeLabel | string | "Before" | Left column title. |
| afterLabel | string | "After" | Right column title. |
| height | number | 300 | Height in px; width follows the container. |
| invert | boolean | false | Treat a fall as good; colours flip. |
| valueFormatter | (value: number) => string | Intl number | Formats endpoint values. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.