Pie 3D
An extruded 3D pie or donut with shaded walls in tilt perspective; hovering or focusing a slice lifts it out with its label, with a flat table for screen readers.
Preview
| Slice | Value | Share |
|---|---|---|
| Rent | $1,450 | 46% |
| Groceries | $620 | 20% |
| Savings | $500 | 16% |
| Transport | $240 | 8% |
| Fun | $310 | 10% |
| Slice | Value | Share |
|---|---|---|
| Search | 48k | 48% |
| Direct | 27k | 27% |
| Referral | 15k | 15% |
| 10k | 10% |
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | Pie3DDatum[] | — | Slices: { label, value, color? }; colours default to the chart tokens. |
| label | string | — | Caption and accessible name; also the table caption. |
| innerRadius | number | 0 | Hole size as a share of the radius: 0 is a pie, 0.5 a donut. |
| tilt | number | 0.55 | Vertical squash of the top face (0.3 flat … 0.8 near top-down). |
| depth | number | 28 | Height of the side walls in px. |
| size | number | 300 | Chart width in px. |
| formatValue | (value: number) => string | — | Formats values for the label and the table. |
| defaultActive | number | — | Index of the slice lifted at first. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.