import { DonutChart } from "semiotic"
DonutChart is a pie chart with a hole in the center. TheinnerRadius prop controls the hole size, andcenterContent lets you place a label or value in the center. Like PieChart, it wrapsStreamOrdinalFrame with radial projection.
Quick Start
The simplest donut chart requires just data. The default inner radius is 60 pixels.
import { DonutChart } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { category: "Complete", value: 72 }, { category: "In Progress", value: 18 }, { category: "Not Started", value: 10 } ], /* --- Process --- */ valueAccessor: "value", categoryAccessor: "category", /* --- Customize --- */ colorScheme: ["#22c55e", "#f59e0b", "#e2e4e8"] } export default () => { return <DonutChart {...frameProps} /> }
Examples
Larger Inner Radius
Increase innerRadius for a thinner ring.
import { DonutChart } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { category: "Engineering", value: 450000 }, { category: "Marketing", value: 280000 }, { category: "Sales", value: 320000 }, { category: "Operations", value: 180000 }, { category: "HR", value: 120000 } ], /* --- Layout --- */ innerRadius: 100, /* --- Process --- */ valueAccessor: "value", categoryAccessor: "category" } export default () => { return <DonutChart {...frameProps} /> }
Rounded Corners
Use cornerRadius to round the outer and inner corners of each wedge arc. Particularly effective on donut charts where the arc thickness is visible.
import { DonutChart } from "semiotic" const frameProps = { /* --- Data --- */ data: sampleData, /* --- Layout --- */ innerRadius: 60, /* --- Process --- */ valueAccessor: "value", categoryAccessor: "category", /* --- Customize --- */ colorBy: "category", /* --- Other --- */ cornerRadius: 6 } export default () => { return <DonutChart {...frameProps} /> }
JSX
<DonutChart data={sampleData} categoryAccessor="category" valueAccessor="value" colorBy="category" cornerRadius={6} innerRadius={60} />
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. |
innerRadius | number | — | 60 | Inner radius in pixels. Controls the donut hole size. |
centerContent | ReactNode | — | — | Content to render in the center of the donut (e.g., a total label). |
colorBy | string | function | — | categoryAccessor | Field name or function to determine slice color. |
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. |
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
For full control, useStreamOrdinalFrame directly withprojection="radial" andtype={{ type: "bar", innerRadius: 60 }}.
Chart (simple)
JSX
import { DonutChart } from "semiotic" <DonutChart data={progressData} categoryAccessor="category" valueAccessor="value" innerRadius={80} centerContent={<span>72%</span>} />
Frame (full control)
JSX
import { StreamOrdinalFrame } from "semiotic" <StreamOrdinalFrame data={progressData} oAccessor="category" rAccessor="value" type={{ type: "bar", innerRadius: 80 }} projection="radial" style={d => ({ fill: colorScale(d.category) })} hoverAnnotation={true} size={[400, 400]} />
- PieChart — full circle without a center hole
- BarChart — an alternative for comparing values across categories
- StreamOrdinalFrame — the underlying Frame with full control over every rendering detail