Waffle chart
Part-to-whole waffle grid with whole-square allocation, a legend with values and shares, sequential fill-in and category highlight.
Preview
Where the engineering week goes
Hours, last 4 weeks- Building features1,184 h49.3%
- Code review412 h17.2%
- Meetings356 h14.8%
- Fixing bugs298 h12.4%
- On-call and ops150 h6.3%
Would you recommend us?
50 squares · 1,240 replies- Yes86870%
- Not sure24820%
- No12410%
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { key: string; label: string; value: number; color?: string }[] | — | Categories; shares become whole squares. |
| label | string | — | Accessible name of the chart. |
| cells | number | 100 | Total squares. |
| columns | number | 10 | Squares per row. |
| cellSize | number | 20 | Square size in px. |
| valueFormatter | (value: number) => string | Intl number | Formats legend values. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.