Photonix

Radar Chart

Compare multiple quantitative variables using RadarChart.

Preview

Usage
import { ChartContainer, RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ChartLegend, ChartLegendContent } from '@photonix/ultimate';

const config = {
  desktop: { label: 'Desktop', color: 'var(--chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--chart-2)' },
};

const data = [
  { subject: 'Math', desktop: 120, mobile: 110, fullMark: 150 },
  { subject: 'English', desktop: 98, mobile: 130, fullMark: 150 },
];

<ChartContainer config={config}>
  <RadarChart data={data}>
    <PolarGrid stroke="var(--border-neutral-tertiary)" strokeDasharray="4 4" />
    <PolarAngleAxis dataKey="subject" tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
    <PolarRadiusAxis 
        angle={30} 
        stroke="var(--border-neutral-tertiary)" 
        strokeDasharray="4 4"
        tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} 
    />
    <ChartLegend content={<ChartLegendContent />} />
    <Radar name="Desktop" dataKey="desktop" stroke="var(--color-desktop)" fill="var(--color-desktop)" fillOpacity={0.6} />
    <Radar name="Mobile" dataKey="mobile" stroke="var(--color-mobile)" fill="var(--color-mobile)" fillOpacity={0.6} />
  </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.

On this page

Preview
Usage
Component API
Photonix UI - React Components, Templates & Figma Design System