# Pie Chart

Unicode block pie chart with legend



<ComponentPreview base="opentui" name="pie-chart-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui-pie-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource base="opentui" name="pie-chart" title="components/ui/pie-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

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

```tsx
<PieChart
  data={[
    { label: "TypeScript", value: 45 },
    { label: "Rust", value: 25 },
    { label: "Go", value: 20 },
  ]}
  radius={6}
/>
```

API Reference [#api-reference]

PieChart [#piechart]

| Prop              | Type             | Default    |
| ----------------- | ---------------- | ---------- |
| `data`            | `PieChartItem[]` | `required` |
| `radius`          | `number`         | `5`        |
| `showLegend`      | `boolean`        | `true`     |
| `showPercentages` | `boolean`        | `true`     |