Stat counter
KPI counter that counts up when in view, with prefix/suffix, a toned delta chip, a chart slot and a stats strip layout.
Preview
October at a glance
Active teams
1,284up 8.2% vs September
Uptime
99.98%unchanged vs September
Median build
41 sdown 13.7% vs September
Net revenue
$248,310up 12.4% vs last month
Refund rate
3.1%up 0.6% vs last month
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Final value; counts to it when in view and on change. |
| from | number | 0 | Where the first count starts. |
| label | string | — | What is measured; names the group. |
| format | Intl.NumberFormatOptions | — | Currency, percent, compact, digits. |
| locale | string | "en-US" | Formatting locale. |
| prefix | string | — | Text before the number. |
| suffix | string | — | Text after the number. |
| duration | number | 1.4 | Count duration in seconds (ease-out). |
| delta | number | — | Change vs the compare period (fraction by default). |
| deltaFormat | Intl.NumberFormatOptions | signed percent, 1 dp | Formats the delta chip. |
| deltaLabel | string | — | Compare period, e.g. "vs last month". |
| invertDelta | boolean | false | Lower is better: a fall shows as good. |
| description | ReactNode | — | Small print under the number. |
| chart | ReactNode | — | Slot for a compare-period chart such as a sparkline. |
| variant | "card" | "plain" | "card" | Own raised card, or plain inside StatStrip. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.