Terminal
█
dither-radar-chart-demo █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Installation
$ pnpm dlx shadcn@latest add @termcn/opentui/dither-radar-chart
Usage
import {
Legend,
Radar,
RadarChart,
Tooltip,
} from "@/components/ui/dither-radar-chart";
import type { ChartConfig } from "@/components/ui/dither-radar-chart";const 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.
Terminal
█
dither-radar-chart-variants █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█API Reference
| Prop | Type | Default |
|---|---|---|
data | TData[] | required |
config | ChartConfig | required |
nameKey | string | required |
width | number | 56 |
height | number | 12 |
bloom | "off" | "low" | "high" | "aura" | BloomConfig | "off" |
markerIndex | number | null | null |
noColor | boolean | false |
screenReaderMode | boolean | false |
The standard chart keyboard controls inspect axes, focus series, and replay enabled entrance motion.