PieChart
PieChart shows how a whole splits into parts. Slices draw from the
--sina-color-chart--1…8 palette, ordered for color-blind safety. For a
centered summary figure, use DonutChart.
Usage
import { PieChart } from "@sina-design-system/core";
<PieChart label="Portfolio allocation" data={{ labels, datasets }} />Examples
Default · legend on
Formatted values · legend off
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Required accessible name. |
data | ChartData | — | The parts to plot (Chart.js shape). |
valueFormatter | (n: number) => string | — | Formats tooltip values. |
Accessibility
"use client". The canvas is hidden from assistive tech; role="img" plus
the label prop is the accessible path, so keep a text summary of the data
nearby. The built-in legend is drawn on the canvas and is not readable by a
screen reader.