Import
tsx
import { DonutChart, PieChart } from "@indoku/ui"Examples
Pie
tsx
const data = [ { name: "Chrome", value: 540 }, { name: "Safari", value: 260 }, { name: "Firefox", value: 110 }, { name: "Edge", value: 90 },]function PieBasic() { return <PieChart data={data} legend />}Donut
tsx
const data = [ { name: "Chrome", value: 540 }, { name: "Safari", value: 260 }, { name: "Firefox", value: 110 }, { name: "Edge", value: 90 },]function DonutBasic() { return <DonutChart data={data} legend />}Angle padding
padAngle leaves a gap between slices.
tsx
const data = [ { name: "Chrome", value: 540 }, { name: "Safari", value: 260 }, { name: "Firefox", value: 110 }, { name: "Edge", value: 90 },]function PiePadAngle() { return <DonutChart data={data} padAngle={6} innerRadiusRatio={0.5} />}Radial text
radialText prints a label in the hole.
tsx
const data = [ { name: "Chrome", value: 540 }, { name: "Safari", value: 260 }, { name: "Firefox", value: 110 }, { name: "Edge", value: 90 },]function DonutRadialText() { return <DonutChart data={data} radialText={{ label: "1,000", sublabel: "visits" }} legend />}Detached segments
Push slices out with detached.
tsx
const data = [ { name: "Chrome", value: 540 }, { name: "Safari", value: 260 }, { name: "Firefox", value: 110 }, { name: "Edge", value: 90 },]function PieDetached() { return <PieChart data={data} detached={[0]} legend />}Props
PieChart / DonutChart
| Prop | Type | Default | Description |
|---|---|---|---|
data | PieDatum[] | – | Slices: name, value, color? |
innerRadiusRatio | number | – | 0 = pie; DonutChart defaults to 0.6. |
padAngle | number | 0 | Degrees between slices. |
detached | number[] | – | Slice indexes pushed outwards. |
radialText | { label: string; sublabel?: string } | – | Text in the center. |
* required. Style props and HTML attributes are accepted as well.
Created by @indokudev