Doughnut chart in React Chart.js 2

A doughnut chart splits a total into segments so you can compare the share of each part. react-chartjs-2 wraps the Chart.js doughnut as a React component.

All React Chart.js 2 examples React Chart.js 2: usage and stats

Doughnut chart in React Chart.js 2: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Register the Chart.js pieces. Before rendering, the example calls ChartJS.register(ArcElement, Tooltip, Legend). The arc element draws the segments, and the tooltip and legend plugins add hover labels and the legend. [1]
Render the Doughnut component. Doughnut is imported from react-chartjs-2 and receives the chart data through its data prop. Each value in data becomes one segment. [2]
Set the hole size. The cutout option controls how much of the middle is removed. This example sets it to "60%" for a thinner ring. [2]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";

// Register only the pieces a doughnut chart needs
ChartJS.register(ArcElement, Tooltip, Legend);

const data = {
  labels: ["Desktop", "Mobile", "Tablet"],
  datasets: [
    {
      label: "Visits",
      data: [300, 50, 100],
      backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"],
      hoverOffset: 4,
    },
  ],
};

const options = { cutout: "60%", animation: false };

const page = { minHeight: "100vh", background: "#111", display: "flex", alignItems: "center",
  justifyContent: "center", fontFamily: "system-ui, sans-serif" };
const card = { background: "#fff", color: "#1f2937", borderRadius: 12, padding: 16, boxSizing: "border-box" };

export default function App() {
  return (
    <div style={page}>
      <div style={card}>
        <h3 style={{ margin: "0 0 8px", fontSize: 16 }}>Visits by device</h3>
        <div style={{ width: 280 }}>
          <Doughnut data={data} options={options} />
        </div>
      </div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Hover a segment to see its tooltip; change cutout to 0 to turn the doughnut into a pie. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with react-chartjs-2 5.3.1, react 19.3.0, react-dom 19.3.0, chart.js 4.5.1. Needs WebGL.

More React Chart.js 2 examples

Bar chart in React Chart.js 2 Line chart in React Chart.js 2 Stacked bar chart in React Chart.js 2 Horizontal bar chart in React Chart.js 2

Sources

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with React Chart.js 2? Ask AgentGid →