Components
Pie Chart
SketchPieChart — a hand-drawn pie (or donut) chart with slice labels.
SketchPieChart plots proportional data as rough.js arc slices with outer labels.
It's fluid — it fills the width of its container up to maxWidth, so wrap it to
size it. Pass donut to cut a hole in the centre.
Default
import { SketchPieChart } from "blackchalk";<SketchPieChartdata={[ { label: "Direct", value: 40 }, { label: "Search", value: 30 }, { label: "Social", value: 20 }, { label: "Email", value: 10 },]}/>Donut
<SketchPieChartdata={[ { label: "Direct", value: 40 }, { label: "Search", value: 30 }, { label: "Social", value: 20 }, { label: "Email", value: 10 },]}donut/>Props
| Prop | Type | Default |
|---|---|---|
data | { label: string; value: number }[] | — |
maxWidth | number | 400 |
donut | boolean | false |
See it in the Storybook playground, or read the source.