Dither Pie Chart

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @termcn/ink/dither-pie-chart
Copy

Usage

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

Copyconst 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.

API Reference

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

Notes

Accessibility

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

• Keyboard: Arrow keys or h / j / k / l move through the chart; Enter / Space select a point; Escape clears the active point; r restarts enabled animation.
• Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
• Screen reader: Visual output exposes its meaningful value through a textual alternative or bounded accessible summary.