Beautiful Charts
Get the charts

Instrument · Free · Recharts or ECharts

Donut chart: pick what's on it

Every option is a prop of the installed chart. The preview and the code use the same props, so what you copy is what you see.

Options, preview and code

Engine
Presets
Data
Shape
Surroundings
Legend
Tooltip
Colours
Behaviour
Feel
States

Traffic · September

Where visits come from

Organic is the largest share: 47% of 8,850, ahead of Referral at 21%.

7 segments making up 8,850. Organic is the largest share: 47% of 8,850, ahead of Referral at 21%.
ChannelVisitsShare
Code for this chart

"use client";

// Install: npx shadcn@latest add https://beautifulcharts.dev/r/instrument-donut-chart-recharts.json
import { DonutChart } from "@/components/beautiful-charts/themes/instrument/recharts/donut-chart";
import type { ChartConfig } from "@/components/beautiful-charts/core/contracts";

const data = [
  { channel: "Organic", visits: 4120 },
  { channel: "Referral", visits: 1860 },
  { channel: "Paid search", visits: 1340 },
  { channel: "Social", visits: 720 },
  { channel: "Email", visits: 410 },
  { channel: "Partners", visits: 260 },
  { channel: "Events", visits: 140 },
];

const config = {  } satisfies ChartConfig;

export function MyChart() {
  return (
    <DonutChart
      data={data}
      config={config}
      nameKey="channel"
      valueKey="visits"
      eyebrow="Traffic · September"
      title="Where visits come from"
    />
  );
}