Pie Chart
Pie charts display data as slices of a circular pie, ideal for showing proportions and percentages that add up to 100%.
Important: Pie charts use
--start and --end instead of
--size.
Each segment's --start should equal the previous segment's --end.
Values range from 0.0 to 1.0 (representing 0% to 100%).
Usage
To create a pie chart, use type: 'pie' and specify start and
end for each segment:
Chart({ type: 'pie' },
Chart.Body({},
Chart.Row({},
Chart.Data({ start: 0.0, end: 0.5, color: '#4CAF50' }) // 50%
),
Chart.Row({},
Chart.Data({ start: 0.5, end: 0.8, color: '#2196F3' }) // 30%
),
Chart.Row({},
Chart.Data({ start: 0.8, end: 1.0, color: '#FF9800' }) // 20%
)
)
)With Labels
Add data labels with labels: true and include a
<span class="data">:
| Chrome | 60% |
|---|---|
| Firefox | 25% |
| Safari | 15% |
Chart({ type: 'pie', labels: true },
Chart.Body({},
Chart.Row({},
Chart.Label({}, 'Chrome'),
Chart.Data({ start: 0.0, end: 0.6, color: '#4CAF50' },
$('span', { class: 'data' }, '60%'))
),
Chart.Row({},
Chart.Label({}, 'Firefox'),
Chart.Data({ start: 0.6, end: 0.85, color: '#F44336' },
$('span', { class: 'data' }, '25%'))
),
Chart.Row({},
Chart.Label({}, 'Safari'),
Chart.Data({ start: 0.85, end: 1.0, color: '#2196F3' },
$('span', { class: 'data' }, '15%'))
)
)
)Spacing
Add gaps between slices with the spacing prop:
No spacing
spacing: 5
Color Schemes
Use custom colors for each slice via the color prop:
| Desktop | 45% |
|---|---|
| Mobile | 35% |
| Tablet | 15% |
| Other | 5% |
Chart({ type: 'pie', labels: true, spacing: 2 },
Chart.Body({},
Chart.Row({},
Chart.Label({}, 'Desktop'),
Chart.Data({ start: 0.0, end: 0.45, color: '#00BCD4' },
$('span', { class: 'data' }, '45%'))
),
Chart.Row({},
Chart.Label({}, 'Mobile'),
Chart.Data({ start: 0.45, end: 0.80, color: '#8BC34A' },
$('span', { class: 'data' }, '35%'))
),
Chart.Row({},
Chart.Label({}, 'Tablet'),
Chart.Data({ start: 0.80, end: 0.95, color: '#FFC107' },
$('span', { class: 'data' }, '15%'))
),
Chart.Row({},
Chart.Label({}, 'Other'),
Chart.Data({ start: 0.95, end: 1.0, color: '#607D8B' },
$('span', { class: 'data' }, '5%'))
)
)
)Calculating Values
Here's how to calculate --start and --end from percentages:
| Segment | Percentage | --start | --end |
|---|---|---|---|
| First | 50% | 0.0 | 0.5 (0 + 0.5) |
| Second | 30% | 0.5 (prev end) | 0.8 (0.5 + 0.3) |
| Third | 20% | 0.8 (prev end) | 1.0 (0.8 + 0.2) |
// Helper function to convert percentages to pie chart values
function percentagesToPie(percentages) {
let cumulative = 0;
return percentages.map(pct => {
const start = cumulative;
cumulative += pct / 100;
return { start, end: cumulative };
});
}
// Example:
const slices = percentagesToPie([50, 30, 20]);
// Returns: [
// { start: 0, end: 0.5 },
// { start: 0.5, end: 0.8 },
// { start: 0.8, end: 1.0 }
// ]