# Dither Pie Chart

Dithered pie and donut charts with textured slices, legends, tooltips, and keyboard inspection



<ComponentPreview base="ink" name="dither-pie-chart-demo" rows="21" />

Installation [#installation]

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

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

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

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/lib/dither-chart-utils.ts" title="lib/dither-chart-utils.ts" />

      <ComponentSource src="registry/bases/ink/lib/dither-pie-chart-utils.ts" title="lib/dither-pie-chart-utils.ts" />

      <ComponentSource src="registry/bases/ink/ui/dither-chart.tsx" title="components/ui/dither-chart.tsx" />

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

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

Usage [#usage]

```tsx
import {
  Legend,
  Pie,
  PieChart,
  Tooltip,
} from "@/components/ui/dither-pie-chart";
import type { ChartConfig } from "@/components/ui/dither-pie-chart";
```

```tsx
const data = [
  { channel: "direct", value: 42 },
  { channel: "search", value: 31 },
  { channel: "social", value: 17 },
];

const config = {
  direct: { color: "blue", label: "Direct" },
  search: { color: "green", label: "Search" },
  social: { color: "pink", label: "Social" },
} satisfies ChartConfig;

<PieChart
  config={config}
  data={data}
  dataKey="value"
  innerRadius={0.42}
  nameKey="channel"
  width={46}
>
  <Pie variant="gradient" />
  <Legend align="left" />
  <Tooltip />
</PieChart>;
```

Examples [#examples]

Textures and donut shapes [#textures-and-donut-shapes]

All four fill variants work for pies and donuts. Set `innerRadius` between `0` and `0.92` to open the center.

<ComponentPreview base="ink" name="dither-pie-chart-variants" rows="23" />

API Reference [#api-reference]

| Prop               | Type                        | Default  |
| ------------------ | --------------------------- | -------- |
| `data`             | `TData[]`                   | required |
| `config`           | `ChartConfig`               | required |
| `dataKey`          | `string`                    | required |
| `nameKey`          | `string`                    | required |
| `innerRadius`      | `number` from `0` to `0.92` | `0`      |
| `width`            | `number`                    | `56`     |
| `height`           | `number`                    | `12`     |
| `markerIndex`      | `number \| null`            | `null`   |
| `noColor`          | `boolean`                   | `false`  |
| `screenReaderMode` | `boolean`                   | `false`  |

Use left/right to inspect slices and up/down to focus legend entries.