[BLOCKS]/Donut Chart

SYS.UNIT // DONUT-CHART

EXPO 52 NATIVE

STRICT_TYPES

Donut Chart

A radial donut chart with segment selection and central metric display.

RUNTIME: 0.00 KB

STYLES: StyleSheet

PLATFORMS: iOS • Android • Web

// SYSTEM.STAGE

Source

┌┐

SIMULATION.ACTIVE// LIVE REACT NATIVE WEBSIM.ACTIVE

└┘

Installation

Install the component and its peer dependencies automatically via the CLI:

pnpm dlx @rnblocks/cli add donut-chart

// SYS.USAGE

Drop this code into your screen or view:

donut-chart-example.tsx

27 lines

1import DonutChart from "@/components/donut-chart";
2 
3export default function RadialDistributionScreen() {
4  const data = [
5    { label: "Category A", value: 40, pattern: "solid", color: "#32C798", accentColor: "#32C798" },
6    { label: "Category B", value: 25, pattern: "solid", color: "#818CF8", accentColor: "#818CF8" },
7    { label: "Category C", value: 20, pattern: "vertical-stripes", patternColor: "#FBBF24", accentColor: "#FBBF24" },
8    { label: "Category D", value: 15, pattern: "diagonal-stripes", patternColor: "#38BDF8", accentColor: "#38BDF8" },
9  ];
10 
11  return (
12    <DonutChart
13      data={data}
14      theme="dark"
15      variant="brand"
16      size={250}
17      innerRadiusRatio={0.54}
18      padAngle={2.5}
19      explosionDistance={8}
20      animated={true}
21      centerLabel="Total"
22      onSelectSlice={(slice, index) => {
23        console.log("Selected slice:", slice?.label, "value:", slice?.value);
24      }}
25    />
26  );
27}

// SPEC.PROPS_API

Configurable interfaces for <DonutChart />

PROP_IDENTIFIER	TYPE_SIGNATURE	DEFAULT_VAL	TELEMETRY_NOTES
data	DonutDataPoint[]	`DEFAULT_DONUT_DATA`	Array of category data points with label, numerical value, pattern (solid, vertical-stripes, diagonal-stripes), and optional custom colors.
theme	"dark" \| "light"	`"dark"`	Color theme mode for card surface, center cutout backdrop, borders, and slice palette.
variant	"brand" \| "monochrome"	`"brand"`	Visual variant: brand emerald/indigo/amber/sky accents, or technical monochrome hatching.
size	number	`250`	Outer diameter in pixels of the SVG donut visualization.
innerRadiusRatio	number	`0.54`	Ratio of the inner hole radius relative to the outer radius (0.2 to 0.85).
padAngle	number	`0`	Angular gap in degrees between adjacent slices (defaults to 0 for a seamless continuous ring).
explosionDistance	number	`10`	Distance in pixels by which the active slice explodes outward along its bisector angle.
numberFontFamily	string	`monospace (JetBrains Mono / Menlo)`	Custom font family for the center numbers and tabular rolling counters.
startAngleOffset	number	`270`	Starting rotation offset in degrees (270 = 9 o'clock horizontal left).
animated	boolean	`true`	Whether to animate slice circular entrance and hover transitions.
loading	boolean	`false`	Whether the chart is in a loading state with a circular loading spinner ring.
centerLabel	string	`"Total"`	Default label displayed under the center total when idle.
initialIndex	number \| null	`null`	Optional initial active slice index on mount (defaults to null for idle overall total).
onSelectSlice	(slice: DonutDataPoint \| null, index: number \| null) => void	`undefined`	Callback fired when a slice is clicked, tapped, or hovered.

data

DonutDataPoint[]

Array of category data points with label, numerical value, pattern (solid, vertical-stripes, diagonal-stripes), and optional custom colors.

DEFAULT:DEFAULT_DONUT_DATA

theme

"dark" | "light"

Color theme mode for card surface, center cutout backdrop, borders, and slice palette.

DEFAULT:"dark"

variant

"brand" | "monochrome"

Visual variant: brand emerald/indigo/amber/sky accents, or technical monochrome hatching.

DEFAULT:"brand"

size

number

Outer diameter in pixels of the SVG donut visualization.

DEFAULT:250

innerRadiusRatio

number

Ratio of the inner hole radius relative to the outer radius (0.2 to 0.85).

DEFAULT:0.54

padAngle

number

Angular gap in degrees between adjacent slices (defaults to 0 for a seamless continuous ring).

DEFAULT:0

explosionDistance

number

Distance in pixels by which the active slice explodes outward along its bisector angle.

DEFAULT:10

numberFontFamily

string

Custom font family for the center numbers and tabular rolling counters.

DEFAULT:monospace (JetBrains Mono / Menlo)

startAngleOffset

number

Starting rotation offset in degrees (270 = 9 o'clock horizontal left).

DEFAULT:270

animated

boolean

Whether to animate slice circular entrance and hover transitions.

DEFAULT:true

boolean

Whether the chart is in a loading state with a circular loading spinner ring.

DEFAULT:false

centerLabel

string

Default label displayed under the center total when idle.

DEFAULT:"Total"

initialIndex

number | null

Optional initial active slice index on mount (defaults to null for idle overall total).

DEFAULT:null

onSelectSlice

(slice: DonutDataPoint | null, index: number | null) => void

Callback fired when a slice is clicked, tapped, or hovered.

DEFAULT:undefined

// PERFORMANCE_&_A11Y

Native touch gestures, screen reader attributes, and 60–120 FPS frame budgets:

Chart container declares accessibilityRole='summary' with a dynamically generated spoken narrative summarizing total value and category distributions.

Individual legend rows declare accessibilityRole='button' with dynamic accessibilityLabel and accessibilityState={{ selected }}.

allowFontScaling={false} on fixed-pixel center rolling digits and percentage badges to prevent text truncation.

Keyboard navigation support on web with ArrowLeft, ArrowRight, and Escape.

Mobile PanResponder angle tracking with automatic radius filtering ensures reliable touch scrubbing across all screen sizes.

[PREV]|Grouped Bar Chart

Pie Chart|[NEXT]