DonutChart

DonutChart visualises share-of-total values inside a circular ring. It uses pure SVG without any chart engine and stays accessible through an explicit label.

#Default usage

<DonutChart
  data={[
    { label: "Stable", value: 62 },
    { label: "Beta", value: 28 },
    { label: "Alpha", value: 10 },
  ]}
  label="Release channel mix"
/>

#Import

import { DonutChart } from "@froggdesign/enter-ui-react";

#Accessibility

Provide an aria-label or label so screen readers announce the chart. When none is given, the SVG is marked aria-hidden for decorative use.

#API

• data: array of { value, color?, label? } slices.
• size: outer pixel size (default 120).
• strokeWidth: ring thickness (default 14).
• centerLabel: optional ReactNode rendered in the centre.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.