Donut Chart With Center Total

A donut/pie chart card that displays a breakdown of traffic sources with the total count shown in the center, built with Recharts.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Donut Chart With Center Total to your project and fits it to your theme.

import Component from "@/components/ui/c-chart-19";

export default function DemoPage() {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <Component />
    </div>
  );
}