Dither Radar Chart

Installation

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

Usage

Copyimport {
  Legend,
  Radar,
  RadarChart,
  Tooltip,
} from "@/components/ui/dither-radar-chart";
import type { ChartConfig } from "@/components/ui/dither-radar-chart";

Copyconst data = [
  { metric: "Speed", desktop: 82, mobile: 68 },
  { metric: "Quality", desktop: 74, mobile: 79 },
  { metric: "Reach", desktop: 66, mobile: 88 },
  { metric: "Trust", desktop: 91, mobile: 72 },
];
 
const config = {
  desktop: { color: "blue", label: "Desktop" },
  mobile: { color: "pink", label: "Mobile" },
} satisfies ChartConfig;
 
<RadarChart config={config} data={data} nameKey="metric" width={52}>
  <Radar dataKey="desktop" variant="gradient" />
  <Radar dataKey="mobile" variant="dotted" />
  <Legend align="left" />
  <Tooltip labelKey="metric" />
</RadarChart>;

Examples

Fill variants

Choose gradient, dotted, hatched, or solid polygon fills independently for each radar series.

API Reference

The standard chart keyboard controls inspect axes, focus series, and replay enabled entrance motion.

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.