Documentation

DonutChart Examples

Interactive and highly customizable donut charts with hover effects, custom center values, legends, and more.

Basic Examples

Simple Donut Chart

The most basic donut chart with center values and legend showing data distribution.

<DonutChart
  config={{
    data,
    strokeWidth: 25,
    centerValues: { enabled: true },
    legend: { enabled: true },
    hover: { enabled: true },
  }}
/>

Custom Colors

Customize chart colors with a custom palette and longer animation duration.

<DonutChart
  config={{
    data: smallData,
    colors: ["#FF6B6B", "#4ECDC4", "#45B7D1"],
    strokeWidth: 25,
    centerValues: { enabled: true },
    legend: { enabled: true },
    hover: { enabled: true },
    animationDuration: 1500,
  }}
/>

Styling & Visual Effects

Gap with Rounded Corners

Add visual separation between segments with gaps and smooth rounded corners.

<DonutChart
  config={{
    data,
    strokeWidth: 25,
    gap: 5,
    roundedCorners: true,
    centerValues: { enabled: true },
    legend: { enabled: true },
    hover: { enabled: true },
  }}
/>

Interactive Features

Hover: Animate Opacity

Fade other segments when hovering over a specific one for better focus.

<DonutChart
  config={{
    data,
    strokeWidth: 25,
    centerValues: { enabled: true },
    legend: { enabled: true },
    hover: {
      enabled: true,
      animateOnHover: true,
      updateCenterOnHover: true,
    },
  }}
/>

Expanded Touch Area

Increase the interactive touch area with hitSlop for easier segment selection.

<DonutChart
  config={{
    data,
    strokeWidth: 25,
    centerValues: { enabled: true },
    legend: { enabled: true },
    hover: {
      enabled: true,
      animateOnHover: true,
      updateCenterOnHover: true,
      hitSlop: 50,
    },
  }}
/>

Advanced Features

Custom Center Values with Animation

Create fully custom center content with React Native components and smooth animations.

<DonutChart
  config={{
    data: smallData,
    colors: ["#FF6B6B", "#4ECDC4", "#45B7D1"],
    strokeWidth: 25,
    gap: 5,
    roundedCorners: true,
    legend: { enabled: true },
    hover: {
      enabled: true,
      animateOnHover: true,
      hitSlop: 100
    },
    centerValues: {
      enabled: true,
      renderContent: (_segments, total, hoveredSegment) => {
        const { value, label, color } = hoveredSegment || {
          value: total,
          label: "Total",
          color: "#1F2937",
        };

        return (
          <AnimatedCenterValues
            value={value}
            label={label}
            color={color}
            total={total}
          />
        );
      },
    },
  }}
/>