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... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█import {
Radar,
RadarChart,
} from "@/components/ui/dither-radar-chart";
import type { ChartConfig } from "@/components/ui/dither-radar-chart";
const data = [
{ metric: "Speed", value: 82 },
{ metric: "Quality", value: 74 },
{ metric: "Reach", value: 66 },
{ metric: "Trust", value: 91 },
{ metric: "Value", value: 78 },
];
const config = {
value: { color: "pink", label: "Score" },
} satisfies ChartConfig;
const variants = ["gradient", "dotted", "hatched", "solid"] as const;
export function DitherRadarChartVariants() {
return (
<box flexDirection="column" gap={1}>
{[variants.slice(0, 2), variants.slice(2)].map((row, rowIndex) => (
<box gap={2} key={rowIndex}>
{row.map((variant) => (
<box key={variant}>
<RadarChart
animate={false}
config={config}
data={data}
height={11}
interactive={false}
nameKey="metric"
title={variant}
width={27}
>
<Radar dataKey="value" variant={variant} />
</RadarChart>
</box>
))}
</box>
))}
</box>
);
}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.