Charts

<PieChart data={pieData} size={200}>
  {pieData.map((item, index) => (
    <PieSlice index={index} key={item.label} />
  ))}
</PieChart>

<PieChart data={pieData} innerRadius={60} size={200}>
  {pieData.map((item, index) => (
    <PieSlice index={index} key={item.label} />
  ))}
  <PieCenter defaultLabel="Total" />
</PieChart>

const [hoveredIndex, setHoveredIndex] = useState(null);

<PieChart
  data={pieData}
  hoveredIndex={hoveredIndex}
  innerRadius={55}
  onHoverChange={setHoveredIndex}
  size={180}
>
  {pieData.map((_, i) => <PieSlice index={i} key={i} />)}
  <PieCenter defaultLabel="Browsers" />
</PieChart>
<Legend
  hoveredIndex={hoveredIndex}
  items={legendItems}
  onHoverChange={setHoveredIndex}
>
  <LegendItemComponent>
    <LegendMarker />
    <LegendLabel />
  </LegendItemComponent>
</Legend>

<PieChart data={pieData} size={200}>
  <PatternLines height={6} id="pp-1" orientation={["diagonal"]}
    stroke="var(--chart-1)" width={6} />
  <PatternLines height={6} id="pp-2" orientation={["horizontal"]}
    stroke="var(--chart-2)" width={6} />
  <PatternLines height={6} id="pp-3" orientation={["vertical"]}
    stroke="var(--chart-3)" width={6} />
  <PatternLines height={8} id="pp-4" orientation={["diagonalRightToLeft"]}
    stroke="var(--chart-4)" width={8} />
  <PieSlice fill="url(#pp-1)" index={0} />
  <PieSlice fill="url(#pp-2)" index={1} />
  <PieSlice fill="url(#pp-3)" index={2} />
  <PieSlice fill="url(#pp-4)" index={3} />
</PieChart>

<PieChart data={pieData} size={200}>
  <RadialGradient from="#0ea5e9" id="pg-1" to="#06b6d4" />
  <RadialGradient from="#a855f7" id="pg-2" to="#ec4899" />
  <RadialGradient from="#f59e0b" id="pg-3" to="#ef4444" />
  <PieSlice fill="url(#pg-1)" index={0} />
  <PieSlice fill="url(#pg-2)" index={1} />
  <PieSlice fill="url(#pg-3)" index={2} />
</PieChart>

<PieChart data={pieData} size={200}>
  {pieData.map((item, index) => (
    <PieSlice hoverEffect="grow" index={index} key={item.label} />
  ))}
</PieChart>

<PieChart data={pieData} innerRadius={65} size={200}>
  {pieData.map((_, i) => <PieSlice index={i} key={i} />)}
  <PieCenter>
    {({ value, label, isHovered, data }) => (
      <div className="text-center">
        <div className="font-bold text-xl"
          style={{ color: isHovered ? data.color : undefined }}>
          {value.toLocaleString()}
        </div>
        <div className="text-muted-foreground text-xs">{label}</div>
      </div>
    )}
  </PieCenter>
</PieChart>

<PieChart data={pieData} innerRadius={55} size={200}>
  <PatternLines height={6} id="dp-1" orientation={["diagonal"]}
    stroke="var(--chart-1)" width={6} />
  <PatternLines height={6} id="dp-2" orientation={["horizontal"]}
    stroke="var(--chart-2)" width={6} />
  <PatternLines height={6} id="dp-3" orientation={["vertical"]}
    stroke="var(--chart-3)" width={6} />
  <PatternLines height={8} id="dp-4" orientation={["diagonalRightToLeft"]}
    stroke="var(--chart-4)" width={8} />
  <PieSlice fill="url(#dp-1)" index={0} />
  <PieSlice fill="url(#dp-2)" index={1} />
  <PieSlice fill="url(#dp-3)" index={2} />
  <PieSlice fill="url(#dp-4)" index={3} />
  <PieCenter defaultLabel="Total" />
</PieChart>

<PieChart data={pieData} innerRadius={55} size={200}>
  {pieData.map((item, index) => (
    <PieSlice hoverEffect="grow" index={index} key={item.label} />
  ))}
  <PieCenter defaultLabel="Browsers" />
</PieChart>