Pie Chart

Dashboards 6

About

A pie chart card for showing proportions of a whole, with donut, inline-label, and legend display modes.

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

Code

How Pie Chart is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { PieChart } from "@/components/ui/pie-chart";

const data = [
  { source: "Direct", visitors: 1240 },
  { source: "Search", visitors: 980 },
  { source: "Social", visitors: 620 },
  { source: "Referral", visitors: 410 },
  { source: "Email", visitors: 280 },
];

export default function PieChartDefault() {
  return (
    <div className="w-full max-w-md">
      <PieChart
        data={data}
        nameKey="source"
        valueKey="visitors"
        title="Traffic Sources"
        description="Visitors by acquisition channel"
      />
    </div>
  );
}