Component
PieChart
Parts of a whole. `innerRadius` makes it a donut with a centre label.
import { PieChart } from '@loidolt/theme-charts';
Example
Pie chart of 5 parts totalling 1,603. Largest: Birch ply 812 (51%), Cork 351 (22%) and Acrylic 212 (13%).
| Name | Value | Share |
|---|---|---|
| Birch ply | 812 | 50.7% |
| Cork | 351 | 21.9% |
| Acrylic | 212 | 13.2% |
| MDF | 140 | 8.7% |
| Card | 88 | 5.5% |
Pie chart of 5 parts totalling 1,603. Largest: Birch ply 812 (51%), Cork 351 (22%) and Acrylic 212 (13%).
| Name | Value | Share |
|---|---|---|
| Birch ply | 812 | 50.7% |
| Cork | 351 | 21.9% |
| Acrylic | 212 | 13.2% |
| MDF | 140 | 8.7% |
| Card | 88 | 5.5% |
Notes
- Negative values throw — a part of a whole cannot be less than nothing. The data table adds each part’s share.
- Labels printed on slices take whichever ink reads better on that slice.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
data required | SliceDatum[] | — | The parts of the whole, one slice each. |
tableLabels | { nameLabel?: string; valueLabel?: string; shareLabel?: string } | {} | Headings of the data table columns. |
Plus the attributes of Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>andPieOptions, forwarded to the root element.