Donut Chart

The DonutChart component is used to visualize data in a donut chart format. It is a wrapper around the Recharts PieChart component.

Usage

import { DonutChart } from "@sparrowengg/twigs-charts";

const Chart = () => {
  return (
    <DonutChart
      data={[
        {
          name: "Jan",
          value: 4000,
          color: "$list.0",
        },
        {
          name: "Feb",
          value: 3000,
          color: "$list.1",
        },
        {
          name: "Mar",
          value: 2000,
          color: "$list.2",
        },
        {
          name: "Apr",
          value: 2780,
          color: "$list.3",
        }
      ]}
      size={200}
    />
  );
};

Props

Examples

Gauge Chart

In the above example, showLabel is set to false to hide the labels on the chart. paddingAngle is set to 1 to control the spacing between individual sectors. showActiveValueInCenter is set to false to hide the active value in the center of the chart. pieProps is used to control the start and end angles of the chart. middleLabel is used to add a custom label at the center of the chart.

With Value Formatter

With Custom Legend Icon

AutoHide Slice Labels

Enable showLabel and autoHideLabels together to automatically hide overlapping slice labels. Higher-value slices take priority and are always shown first.

Default Labels

Enable both showLabel and autoHideLabels — no other changes needed. The built-in label renderer handles collision detection automatically.

<DonutChart
  showLabel
  autoHideLabels
  ...
/>

Custom Labels

If you use a custom label renderer via pieProps.label, you must opt in to collision detection manually. Two things are required:

1. Wrap your output in <g data-twigs-label-key={labelKey}> so the collision detector can find and measure it.
2. Read useHiddenLabels() and apply visibility styles — wrapping alone does not hide the label.

useHiddenLabels() returns null before the first measurement pass (apply opacity: 0 to prevent a flash of all labels), then a Set<string> of overlapping label keys to hide. The label must be a React component (not an inline function) to call useHiddenLabels(), and must be passed as a React element so per-slice props (cx, cy, midAngle, outerRadius, value, index) are injected automatically. Any extra props you add are preserved and passed through unchanged.