Pie chart

const data = [
  { name: "Farming", value: 420, color: "var(--color-malachite)" },
  { name: "Mining", value: 380, color: "var(--color-terracotta)" },
  { name: "Travel", value: 290, color: "var(--color-cobalt)" },
  { name: "Tourism", value: 510, color: "var(--color-tanzanite)" },
  { name: "Sports", value: 340, color: "var(--color-gold)" },
]

const chartConfig = {
  farming: { label: "Farming", color: "var(--color-malachite)" },
  mining: { label: "Mining", color: "var(--color-terracotta)" },
  travel: { label: "Travel", color: "var(--color-cobalt)" },
  tourism: { label: "Tourism", color: "var(--color-tanzanite)" },
  sports: { label: "Sports", color: "var(--color-gold)" },
}

<ChartContainer config={chartConfig} className="h-[300px]">
  <PieChart>
    <Pie data={data} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={100}>
      {data.map((entry) => (
        <Cell key={entry.name} fill={entry.color} />
      ))}
    </Pie>
    <ChartTooltip content={<ChartTooltipContent />} />
  </PieChart>
</ChartContainer>

<Pie
  data={data}
  dataKey="value"
  nameKey="name"
  cx="50%"
  cy="50%"
  innerRadius={60}
  outerRadius={100}
>
  {data.map((entry) => (
    <Cell key={entry.name} fill={entry.color} />
  ))}
</Pie>

<PieChart>
  <Pie data={data} dataKey="value" innerRadius={60} outerRadius={100}>
    {data.map((entry) => (
      <Cell key={entry.name} fill={entry.color} />
    ))}
  </Pie>
  <text x="50%" y="50%" textAnchor="middle" dominantBaseline="middle" className="fill-foreground text-2xl font-bold">
    1,940
  </text>
  <text x="50%" y="58%" textAnchor="middle" className="fill-muted-foreground text-xs">
    Total events
  </text>
</PieChart>

<ChartContainer config={chartConfig} className="h-[350px]">
  <PieChart>
    <Pie data={data} dataKey="value" nameKey="name" innerRadius={60} outerRadius={100}>
      {data.map((entry) => (
        <Cell key={entry.name} fill={entry.color} />
      ))}
    </Pie>
    <ChartLegend content={<ChartLegendContent />} />
    <ChartTooltip content={<ChartTooltipContent />} />
  </PieChart>
</ChartContainer>