Pie Chart

Cards 31

About

Here is Pie Chart component

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 { Card } from "@/components/ui/card"
import { Chart, type ChartConfig, ChartTooltip, ChartTooltipContent } from "@/components/ui/pie-chart"
import { Pie, PieChart } from "recharts"

const chartData = [
  { category: "Sales", amount: 275, fill: "var(--color-sales)" },
  { category: "Marketing", amount: 200, fill: "var(--color-marketing)" },
  { category: "IT", amount: 187, fill: "var(--color-it)" },
  { category: "HR", amount: 173, fill: "var(--color-hr)" },
  { category: "Operations", amount: 90, fill: "var(--color-operations)" },
]

const chartConfig = {
  amount: {
    label: "Amount",
  },
  sales: {
    label: "Sales",
    color: "var(--chart-1)",
  },
  marketing: {
    label: "Marketing",
    color: "var(--chart-2)",
  },
  it: {
    label: "IT",
    color: "var(--chart-3)",
  },
  hr: {
    label: "HR",
    color: "var(--chart-4)",
  },
  operations: {
    label: "Operations",
    color: "var(--chart-5)",
  },
} satisfies ChartConfig

export default function Component() {
  return (
    <Card>
      <Card.Header className="items-center pb-0">
        <Card.Title>Departmental Budget Allocation</Card.Title>
        <Card.Description>Jan - Jun 2024</Card.Description>
      </Card.Header>
      <Card.Content className="flex-1 pb-0">
        <Chart config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
          <PieChart>
            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
            <Pie data={chartData} dataKey="amount" nameKey="category" />
          </PieChart>
        </Chart>
      </Card.Content>
    </Card>
  )
}