Photonix

Radar Chart

Compare multiple quantitative variables using RadarChart.

Preview

Usage
"use client";

import { ChartContainer, ChartTooltip, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, type ChartConfig } from '@photonix/ultimate';

const data = [
    { area: 'Quality', score: 86 },
    { area: 'Speed', score: 74 },
    { area: 'Reliability', score: 92 },
    { area: 'Coverage', score: 68 },
];

const config: ChartConfig = {
    score: { label: 'Score', color: 'var(--chart-4)' },
};

export default function RadarChartBasicExample() {
    return (
        <ChartContainer config={config} minHeight={300}>
            <RadarChart data={data}>
                <PolarGrid />
                <PolarAngleAxis dataKey="area" tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                <PolarRadiusAxis tick={false} axisLine={false} />
                <ChartTooltip />
                <Radar dataKey="score" stroke="var(--color-score)" fill="var(--color-score)" fillOpacity={0.35} />
            </RadarChart>
        </ChartContainer>
    );
}

Component API

RadarChart

Prop
Type
Default
Description
outerRadius
string | number
80%
The outer radius of radar.
cx
string | number
50%
The x-coordinate of center.
cy
string | number
50%
The y-coordinate of center.
children
ReactElement
-
Chart components (Radar, Legend, etc).

Radar

Prop
Type
Default
Description
dataKey
string
-
The key of data to be displayed.
stroke
string
-
The color of the border.
fill
string
-
The fill color of the area.
fillOpacity
number
0.6
Opacity of the fill.

Variants

Multi-radar comparison

Compare two entities across the same radial dimensions.

Multi-radar comparison
"use client";

import { ChartContainer, ChartLegend, ChartTooltip, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, type ChartConfig } from '@photonix/ultimate';

const data = [
    { metric: 'Speed', alpha: 82, beta: 64 },
    { metric: 'Quality', alpha: 74, beta: 88 },
    { metric: 'Reach', alpha: 68, beta: 72 },
    { metric: 'Retention', alpha: 91, beta: 78 },
    { metric: 'Cost', alpha: 58, beta: 69 },
];

const config: ChartConfig = {
    alpha: { label: 'Alpha', color: 'var(--chart-2)' },
    beta: { label: 'Beta', color: 'var(--chart-1)' },
};

export default function RadarChartMultiRadarExample() {
    return (
        <ChartContainer config={config} minHeight={300}>
            <RadarChart data={data} outerRadius={110}>
                <PolarGrid />
                <PolarAngleAxis dataKey="metric" tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                <PolarRadiusAxis axisLine={false} tick={false} />
                <ChartTooltip />
                <ChartLegend />
                <Radar dataKey="alpha" stroke="var(--color-alpha)" fill="var(--color-alpha)" fillOpacity={0.2} />
                <Radar dataKey="beta" stroke="var(--color-beta)" fill="var(--color-beta)" fillOpacity={0.2} />
            </RadarChart>
        </ChartContainer>
    );
}

Radius scale

Show radial scale labels when the numeric range needs context.

Radius scale
"use client";

import { ChartContainer, ChartTooltip, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, type ChartConfig } from '@photonix/ultimate';

const data = [
    { metric: 'A', value: 42 },
    { metric: 'B', value: 76 },
    { metric: 'C', value: 64 },
    { metric: 'D', value: 88 },
    { metric: 'E', value: 57 },
];

const config: ChartConfig = {
    value: { label: 'Score', color: 'var(--chart-2)' },
};

export default function RadarChartWithRadiusExample() {
    return (
        <ChartContainer config={config} minHeight={300}>
            <RadarChart data={data} outerRadius={110}>
                <PolarGrid />
                <PolarAngleAxis dataKey="metric" tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                <PolarRadiusAxis angle={90} domain={[0, 100]} tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                <ChartTooltip />
                <Radar dataKey="value" stroke="var(--color-value)" fill="var(--color-value)" fillOpacity={0.24} />
            </RadarChart>
        </ChartContainer>
    );
}

On this page

Preview
Component API
Variants
Multi-radar comparison
Radius scale
Photonix UI - React Components, Templates & Figma Design System