Photonix

RadarChartWidget

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

Preview

Skill Analysis

Candidate proficiency scores
Usage
import { RadarChartWidget } from '@photonix/ultimate';

<RadarChartWidget 
  title="Candidate Skills" 
  data={data}
  dataKeys="value"
  config={{ value: { label: 'Score', color: 'var(--chart-4)' } }}
/>

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
<RadarChartWidget 
  title="Resource Density" 
  data={RADAR_DATA}
  dataKeys="value"
  config={{ value: { label: 'Density', color: 'var(--chart-3)' } }}
/>

Multi-radar Comparison

Compare two entities across the same radial axes.

A vs B Performance

Team A

Team B

Multi-radar Comparison
<RadarChartWidget 
  title="A vs B Performance" 
  data={COMPARE_DATA}
  dataKeys={['a', 'b']}
  config={{ 
    a: { label: 'Team A', color: 'var(--chart-1)' },
    b: { label: 'Team B', color: 'var(--chart-2)' }
  }}
  showLegend
/>

Right Legend

Position the legend on the right side.

Horizontal Comparison

Team A

Team B

Right Legend
<RadarChartWidget 
  title="Horizontal Comparison" 
  data={COMPARE_DATA}
  dataKeys={['a', 'b']}
  config={{ 
    a: { label: 'Team A', color: 'var(--chart-1)' },
    b: { label: 'Team B', color: 'var(--chart-2)' }
  }}
  showLegend
  legendPosition="right"
/>

Loading State

Displays a skeleton preview while data is being fetched.

Loading State
<RadarChartWidget 
  title="Skill Analysis" 
  data={[]}
  dataKeys="value"
  config={{ value: { label: 'Score', color: 'var(--chart-4)' } }}
  loading
/>

On this page

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