Terminal
█
dither-pie-chart-demo █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Installation
$ pnpm dlx shadcn@latest add @termcn/opentui/dither-pie-chart
Usage
import {
Legend,
Pie,
PieChart,
Tooltip,
} from "@/components/ui/dither-pie-chart";
import type { ChartConfig } from "@/components/ui/dither-pie-chart";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
Textures and donut shapes
All four fill variants work for pies and donuts. Set innerRadius between 0 and 0.92 to open the center.
Terminal
█
dither-pie-chart-variants █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█import { Pie, PieChart } from "@/components/ui/dither-pie-chart";
import type { ChartConfig } from "@/components/ui/dither-pie-chart";
const data = [
{ channel: "direct", value: 42 },
{ channel: "search", value: 31 },
{ channel: "social", value: 17 },
{ channel: "email", value: 10 },
];
const config = {
direct: { color: "blue", label: "Direct" },
email: { color: "orange", label: "Email" },
search: { color: "green", label: "Search" },
social: { color: "pink", label: "Social" },
} satisfies ChartConfig;
const variants = ["gradient", "dotted", "hatched", "solid"] as const;
export function DitherPieChartVariants() {
return (
<box flexDirection="column" gap={1}>
{[variants.slice(0, 2), variants.slice(2)].map((row, rowIndex) => (
<box gap={2} key={rowIndex}>
{row.map((variant, index) => (
<box key={variant}>
<PieChart
animate={false}
config={config}
data={data}
dataKey="value"
height={9}
innerRadius={(rowIndex + index) % 2 === 0 ? 0 : 0.48}
interactive={false}
nameKey="channel"
title={variant}
width={27}
>
<Pie variant={variant} />
</PieChart>
</box>
))}
</box>
))}
</box>
);
}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.