import { PieChart } from "semiotic"
PieChart visualizes proportions as slices of a circle. Each slice's arc size is proportional to its value relative to the total. It wrapsStreamOrdinalFrame with radial projection, so all ordinal annotations and interactions work out of the box.
Quick Start
The simplest pie chart requires just data. The defaults expect each object to have category andvalue fields. Each unique category becomes one slice.
import { PieChart } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { category: "Electronics", value: 340 }, { category: "Clothing", value: 210 }, { category: "Grocery", value: 450 }, { category: "Furniture", value: 180 }, { category: "Books", value: 120 } ], /* --- Process --- */ valueAccessor: "value", categoryAccessor: "category" } export default () => { return <PieChart {...frameProps} /> }
Examples
Custom Color Scheme
Pass a colorScheme array to use your own palette.
import { PieChart } from "semiotic" const frameProps = { /* --- Data --- */ data: sampleData, /* --- Process --- */ valueAccessor: "value", categoryAccessor: "category", /* --- Customize --- */ colorScheme: ["#6366f1", "#22c55e", "#f59e0b", "#ef4444", "#06b6d4"] } export default () => { return <PieChart {...frameProps} /> }
Rotated Start Angle
Use startAngle to rotate the starting position of the first slice.
import { PieChart } from "semiotic" const frameProps = { /* --- Data --- */ data: sampleData, /* --- Layout --- */ startAngle: 90, /* --- Process --- */ valueAccessor: "value", categoryAccessor: "category" } export default () => { return <PieChart {...frameProps} /> }
Slice Stroke
Add a stroke between slices using frameProps.pieceStyle. The var(--semiotic-bg) token resolves to white in light mode and the dark background in dark mode, so slice borders always match the chart background.
import { PieChart } from "semiotic" const frameProps = { /* --- Data --- */ data: sampleData, /* --- Process --- */ valueAccessor: "value", categoryAccessor: "category", /* --- Annotate --- */ frameProps: { pieceStyle: () => ({ stroke: "var(--semiotic-bg, #fff)", // adapts to dark/light mode strokeWidth: 2, }), } } export default () => { return <PieChart {...frameProps} /> }
Rounded Corners
Use cornerRadius to round the outer corners of each wedge arc. Works on both PieChart and DonutChart. The radius is clamped by d3-shape so it can't exceed the wedge's angular width.
import { PieChart } from "semiotic" const frameProps = { /* --- Data --- */ data: sampleData, /* --- Process --- */ valueAccessor: "value", categoryAccessor: "category", /* --- Customize --- */ colorBy: "category", /* --- Other --- */ cornerRadius: 8 } export default () => { return <PieChart {...frameProps} /> }
JSX
<PieChart data={sampleData} categoryAccessor="category" valueAccessor="value" colorBy="category" cornerRadius={8} />
Props
| Prop | Type | Required | Default | Description |
|---|
data | array | Yes | — | Array of data points, one per slice. |
categoryAccessor | string | function | — | "category" | Field name or function to access slice labels. |
valueAccessor | string | function | — | "value" | Field name or function to access slice values. |
colorBy | string | function | — | categoryAccessor | Field name or function to determine slice color. Defaults to the category accessor. |
colorScheme | string | array | — | "category10" | Color scheme name or custom colors array. |
startAngle | number | — | 0 | Starting angle offset in degrees. |
cornerRadius | number | — | 0 | Rounded corner radius on wedge arcs. Clamped by wedge angular width. |
enableHover | boolean | — | true | Enable hover annotations on slices. |
showLegend | boolean | — | true | Show a legend. |
tooltip | object | function | — | — | Tooltip configuration or render function. |
width | number | — | 400 | Chart width in pixels. |
height | number | — | 400 | Chart height in pixels. |
margin | object | — | { top: 20, bottom: 20, left: 20, right: 20 } | Margin around the chart area. |
animate | boolean | object | — | false | Enable animated intro and smooth data-change transitions. `true` for defaults (300ms ease-out, intro enabled), or `{ duration, easing, intro }`. Set `{ intro: false }` to disable intro. |
title | string | — | — | Chart title displayed at the top. |
frameProps | object | — | — | Additional StreamOrdinalFrame props for advanced customization. |
Graduating to the Frame
When you need more control — custom annotations, label positioning, exploded slices — graduate toStreamOrdinalFrame directly. EveryPieChart is just a configured StreamOrdinalFramewith projection="radial".
Chart (simple)
JSX
import { PieChart } from "semiotic" <PieChart data={salesData} categoryAccessor="category" valueAccessor="value" colorScheme={["#6366f1", "#22c55e", "#f59e0b"]} showLegend />
Frame (full control)
JSX
import { StreamOrdinalFrame } from "semiotic" <StreamOrdinalFrame data={salesData} oAccessor="category" rAccessor="value" type="bar" projection="radial" style={d => ({ fill: colorScale(d.category) })} oPadding={2} hoverAnnotation={true} size={[400, 400]} margin={{ top: 20, bottom: 20, left: 20, right: 20 }} />
- DonutChart — pie chart with a hole in the center, ideal for displaying a total or summary value
- BarChart — an alternative for comparing values across categories
- StreamOrdinalFrame — the underlying Frame with full control over every rendering detail