Donut Chart

Usage

import { DonutChart } from '@epilot/spark-ui/donut-chart'

function Mix() {
  return (
    <DonutChart
      centerLabel="100"
      centerSub="total"
      segments={[
        { value: 48, color: 'var(--orange-9)' },
        { value: 32, color: 'var(--green-9)' },
        { value: 20, color: 'var(--blue-9)' },
      ]}
    />
  )
}

Use DonutChart for a compact part-to-whole ring. It is a presentational SVG: you supply segment colors and the center copy. For a labeled energy mix with percentage rows, use Energy Breakdown, which wraps this component.

The ring is fixed at 180×180 px. Segment angles are proportional to value; a total of 0 draws only the empty track.

API Reference

DonutChartProps

Accessibility

• The SVG has no built-in text alternative for segments. Pair it with a list or table of the same values (as Energy Breakdown does).
• Do not rely on color alone; keep labels next to the chart.