Radial

RadialChart

D3 arc-based radial progress component for rings, partial gauges, stacked gauges, center totals, labels, and legends.

Examples

Rings

Radial Chart - Rings Multiple radial progress arcs. Desktop Mobile Tablet

Radial Chart - Rings
Label	Value	Max
Desktop	1.3K	1600
Mobile	980	1600
Tablet	620	1600

<RadialChart
  title="Radial Chart - Rings"
  data={radialData}
  showLabels
  centerLabel="Visitors"
/>

Gauge

Radial Chart - Gauge A partial radial gauge with center text.

Radial Chart - Gauge
Label	Value	Max
Visitors	1.3K	1600

<RadialChart
  title="Radial Chart - Gauge"
  data={[{label: 'Visitors', value: 1260, max: 1600}]}
  startAngle={-Math.PI * 0.75}
  endAngle={Math.PI * 0.75}
  showLegend={false}
/>

Stacked

Radial Chart - Stacked Stacked segments on a shared radial track. Running Swimming

Radial Chart - Stacked
Label	Value	Max
Running	380	1000
Swimming	420	1000

<RadialChart
  title="Radial Chart - Stacked"
  data={calories}
  variant="stacked"
  startAngle={-Math.PI * 0.75}
  endAngle={Math.PI * 0.75}
  maxValue={1000}
/>

Props

Prop	Type	Default	Description
`data`	`RadialDatum[]`	`—`	Radial segments with label, value, optional max, id, and color.
`variant`	`'rings' \| 'stacked'`	`'rings'`	Concentric progress rings or stacked segments on one shared track.
`startAngle`	`number`	`0`	Arc start angle in radians.
`endAngle`	`number`	`Math.PI * 2`	Arc end angle in radians.
`maxValue`	`number`	`—`	Shared max value for progress calculation.
`showLabels`	`boolean`	`false`	Render labels over each arc.
`centerValue`	`string`	`—`	Override the computed center total.
`centerLabel`	`string`	`'Total'`	Small label rendered under the center value.

Install

CLI

npm install d3-shape
npx @a3tai/mittsu add radial-chart --registry ./packages/charts/registry.json