PieChart

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

Slices of a whole, each filled with a pattern, with a legend naming every slice and its share.

The pie stays round in any box: it is drawn as large as the box holds and centered, in the widget and in its previews alike. The legend sits around it and wraps or stacks to fit the room left. Negative values take no share of the pie, and a chart with no value above zero draws nothing.

Import

import { PieChart } from "~lib/charts/pie-chart";

Props

Name	Type	Required	Default	Description
`data`	`{ label: string; value: number; pattern?: PatternType }[]`	Yes	N/A	Slice data
`showLegend`	`boolean`	No	`true`	Show a legend naming each slice and its share
`legendPosition`	`"bottom" \| "right" \| "top" \| "left"`	No	`"bottom"`	Where the legend sits around the pie
`width`	`number \| string`	No	`300`	Chart width
`height`	`number \| string`	No	`300`	Chart height

PatternType: "solid" | "diagonal" | "dots" | "crosshatch" — patterns cycle automatically if not specified.

Examples

Import​

Props​

Examples​

Simple​

With Explicit Patterns​

Without Legend​

Small Size​

Legend Beside a Wide Pie​

See Also​

Import

Props

Examples

Simple

With Explicit Patterns

Without Legend

Small Size

Legend Beside a Wide Pie

See Also