Photonix

RadarChartWidget

A Radar Chart widget perfect for comparing multiple quantitative variables in a centralized view.

Preview

Readiness

Release scorecard

Current

Target

Usage
"use client";

import { RadarChartWidget, type ChartConfig } from '@photonix/ultimate';

const data = [
    { name: 'Quality', current: 86, target: 92 },
    { name: 'Speed', current: 74, target: 88 },
    { name: 'Coverage', current: 68, target: 80 },
    { name: 'Reliability', current: 92, target: 95 },
];

const config: ChartConfig = {
    current: { label: 'Current', color: 'var(--chart-4)' },
    target: { label: 'Target', color: 'var(--chart-2)' },
};

export default function RadarChartWidgetBasicExample() {
    return <RadarChartWidget title="Readiness" subtitle="Release scorecard" data={data} config={config} dataKeys={['current', 'target']} showLegend chartHeight={340} />;
}

Component API

RadarChartWidget

Prop
Type
Default
Description
data
any[]
-
Data for the chart
config
ChartConfig
-
Chart configuration for colors and labels
dataKeys
string | string[]
-
The key(s) to use for the radar values. If multiple, multiple radars will be rendered.
polarAxisKey
string
'name'
The key to use for the polar axis categories
fillOpacity
number
0.5
Opacity of the radar fill (0 to 1)
strokeWidth
number
2
Stroke width of the radar border
showLegend
boolean
false
Whether to show a legend. Defaults to false.
legendPosition
"right" | "bottom"
'bottom'
Position of the legend. Defaults to 'bottom'.
radarChartProps
any
-
Any additional props to pass to the Recharts RadarChart component
className
string
-
Custom class name
style
React.CSSProperties
-
Custom style
title
React.ReactNode
-
The title of the widget
actions
React.ReactNode
-
Actions to display in the header (e.g. IconButton)
footer
React.ReactNode
-
Content to display below the chart
subtitle
string
-
Optional subtitle or description
loading
boolean
false
Loading state
appearance
WidgetAppearance
'outlined'
Widget appearance
padding
string | number
-
Widget padding (default: 16px)
chartHeight
string | number
300
Height of the chart container

Variants

Simple Radar Chart

Standard radar chart with a single data key.

Resource Density

Simple Radar Chart
"use client";

import { RadarChartWidget, type ChartConfig } from '@photonix/ultimate';

const data = [
    { name: 'Speed', value: 80 },
    { name: 'Strength', value: 90 },
    { name: 'Agility', value: 70 },
    { name: 'Intelligence', value: 85 },
    { name: 'Stamina', value: 75 },
    { name: 'Technique', value: 88 },
];

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

export default function RadarChartWidgetSimpleExample() {
    return <RadarChartWidget title="Resource Density" data={data} dataKeys="value" config={config} />;
}

Multi-radar Comparison

Compare two entities across the same radial axes.

A vs B Performance

Team A

Team B

Multi-radar Comparison
"use client";

import { RadarChartWidget, type ChartConfig } from '@photonix/ultimate';

const data = [
    { name: 'Q1', a: 80, b: 60 },
    { name: 'Q2', a: 90, b: 75 },
    { name: 'Q3', a: 70, b: 90 },
    { name: 'Q4', a: 85, b: 85 },
    { name: 'Q5', a: 75, b: 65 },
];

const config: ChartConfig = {
    a: { label: 'Team A', color: 'var(--chart-1)' },
    b: { label: 'Team B', color: 'var(--chart-2)' },
};

export default function RadarChartWidgetMultiRadarExample() {
    return <RadarChartWidget title="A vs B Performance" data={data} dataKeys={['a', 'b']} config={config} showLegend />;
}

Right Legend

Position the legend on the right side.

Horizontal Comparison

Team A

Team B

Right Legend
"use client";

import { RadarChartWidget, type ChartConfig } from '@photonix/ultimate';

const data = [
    { name: 'Q1', a: 80, b: 60 },
    { name: 'Q2', a: 90, b: 75 },
    { name: 'Q3', a: 70, b: 90 },
    { name: 'Q4', a: 85, b: 85 },
    { name: 'Q5', a: 75, b: 65 },
];

const config: ChartConfig = {
    a: { label: 'Team A', color: 'var(--chart-1)' },
    b: { label: 'Team B', color: 'var(--chart-2)' },
};

export default function RadarChartWidgetRightLegendExample() {
    return <RadarChartWidget title="Horizontal Comparison" data={data} dataKeys={['a', 'b']} config={config} showLegend legendPosition="right" />;
}

Loading State

Displays a skeleton preview while data is being fetched.

Loading State
"use client";

import { RadarChartWidget, type ChartConfig } from '@photonix/ultimate';

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

export default function RadarChartWidgetLoadingExample() {
    return <RadarChartWidget title="Skill Analysis" data={[]} dataKeys="value" config={config} loading />;
}

On this page

Preview
Component API
Variants
Simple Radar Chart
Multi-radar Comparison
Right Legend
Loading State
Photonix UI - React Components, Templates & Figma Design System