Radar Chart
One subject scored across several dimensions.
Introduction
A radar chart shows a profile — the shape matters more than any single axis.
All chart types share one component. Installation, the palette, and the reason every chart ships with a screen-reader data table are on the Charts page.
Example
Service quality scores
Five service dimensions scored out of 100, this quarter against last.
| Category | This quarter | Last quarter |
|---|---|---|
| Accessibility | 82 | 70 |
| Speed | 74 | 66 |
| Clarity | 68 | 60 |
| Coverage | 90 | 84 |
| Support | 61 | 58 |
'use client';
import { useMemo } from 'react';
import { Chart } from '@/components/ui/chart';
const MONTHS = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'];
const DISTRICTS = ['Pune', 'Nashik', 'Nagpur', 'Thane', 'Solapur'];
export default function Component() {
const data = useMemo(
() => ({
labels: ['Accessibility', 'Speed', 'Clarity', 'Coverage', 'Support'],
datasets: [
{ label: 'This quarter', data: [82, 74, 68, 90, 61] },
{ label: 'Last quarter', data: [70, 66, 60, 84, 58] },
],
}),
[],
);
return (
<Chart
type='radar'
data={data}
title='Service quality scores'
summary='Five service dimensions scored out of 100, this quarter against last.'
height={340}
className='max-w-[460px]'
/>
);
}When to use it
Use it to compare two or three profiles across the same dimensions, such as this quarter against last. Keep the axes to a handful and the scales identical, or the shape misleads.
Usage
import { Chart } from '@/components/ui/chart';See the Charts page for the full API.