Bar list
Ranked horizontal bar list with glyph tiles, values and share, an ember top item, sort toggle, show-more expand and a previous-period comparison variant.
Preview
Top pages
PageVisitors
- /18,42039.4%
- /pricing9,31019.9%
- /docs/getting-started7,24515.5%
- /blog/shipping-faster4,98010.6%
- /changelog3,1206.7%
Referrers vs last month
SourceVisits
- Search engineschange +15%12,840
- Weekly newsletterchange -13%6,420
- Developer forumchange +41%4,180
- Partner directorychange -1%2,210
- Podcast mentionchange +316%1,290
Previous period
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { key: string; label: string; value: number; previous?: number; glyph?: ReactNode; href?: string }[] | — | Rows; ranked by value. |
| label | string | — | Name of the list and the label column header. |
| valueLabel | string | "Value" | Header of the value column. |
| variant | "default" | "compare" | "default" | Plain bars, or a dashed previous-period ghost bar and change. |
| limit | number | 5 | Rows shown before Show more. |
| sortable | boolean | true | Show the highest/lowest first toggle. |
| showShare | boolean | true | Show each row's share of the total. |
| valueFormatter | (value: number) => string | Intl number | Formats values. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.