Dot plot
Cleveland dot plot (dumbbell) comparing two values per row with a connecting line, deltas, sorting and hover detail.
Preview
Feature adoption, Q2 → Q3
% of active teamsQ2Q3
| Item | Q2 | Q3 | Change |
|---|---|---|---|
| Shared dashboards | 29% | 48% | +65.5% |
| Mobile app | 18% | 27% | +50% |
| Saved searches | 38% | 54% | +42.1% |
| Scheduled exports | 22% | 31% | +40.9% |
| Single sign-on | 61% | 64% | +4.9% |
| API keys | 47% | 44% | -6.4% |
| Alerts | 55% | 51% | -7.3% |
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | { key: string; label: string; a: number; b: number }[] | — | Rows with a first and a second value. |
| label | string | — | Accessible name and table caption. |
| aLabel | string | — | Name of the first value. |
| bLabel | string | — | Name of the second value. |
| defaultSort | "change" | "b" | "label" | "change" | Initial sort. |
| invert | boolean | false | A fall is good; colours flip. |
| 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.