Budget meter
Segmented budget meter with stacked categories, a limit marker, hatched overflow, a dashed forecast and a rolling remaining amount.
Preview
Cloud spend, October$7,990 of $12,000
- Compute$4,18052%
- Storage$1,96025%
- Network$1,24016%
- Other$6108%
Forecast $11,400
Day 21 of 31
Design team, Q4 software$3,280 of $3,000
- Seats$2,28070%
- Plugins$54016%
- Fonts$46014%
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | What the budget is for; names the meter. |
| limit | number | — | The budget; drawn as a marker. |
| categories | { key: string; label: string; value: number; color?: string }[] | — | Spend so far by category, in stacking order. |
| forecast | number | — | Projected total; drawn as a dashed segment. |
| format | Intl.NumberFormatOptions | USD, no cents | Formats amounts. |
| legend | boolean | true | Show the category legend. |
| barHeight | number | 14 | Bar height in px. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.