React Chart.js 2 Examples You Can Edit and 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>
  );
}