Radar Chart

import { RadarChartDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.RadarChart);

Usage

RadarChart is based on the recharts RadarChart component:

<Demo data={RadarChartDemos.usage} />

Multiple series

You can display multiple series on the same radar chart:

<Demo data={RadarChartDemos.multiple} />

Change color

You can reference colors from theme the same way as in other components, for example, blue, red.5, orange.7, etc. Any valid CSS color value is also accepted.

<Demo data={RadarChartDemos.color} />

Hide/show chart parts

<Demo data={RadarChartDemos.parts} />

With tooltip and dots

<Demo data={RadarChartDemos.tooltip} />

Recharts props

To pass props down to the underlying recharts components, use the following props:

• radarChartProps passes props to the RadarChart component
• polarGridProps passes props to the PolarGrid component
• polarAngleAxisProps passes props to the PolarAngleAxis component
• polarRadiusAxisProps passes props to the PolarRadiusAxis component

Example of passing props down to the PolarRadiusAxis component:

<Demo data={RadarChartDemos.rechartsProps} />

Legend

Set the withLegend prop to display the legend:

<Demo data={RadarChartDemos.legend} />