Compare bar
Two-sided comparison bars meeting at a centre axis with values, a winner highlight per row and win counts.
Preview
October, this year vs last
Two checkout designs
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | { key: string; label: string; left: number; right: number; invert?: boolean }[] | — | Rows to compare; invert means lower wins. |
| label | string | — | Name of the comparison. |
| leftLabel | string | — | Name of the left side. |
| rightLabel | string | — | Name of the right side. |
| leftColor | string | "var(--chart-1)" | Colour of the left side. |
| rightColor | string | "var(--chart-2)" | Colour of the right side. |
| perRow | boolean | false | Scale each row on its own (rows with different units). |
| valueFormatter | (value: number) => string | Intl number | Formats values. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.