Radar Chart

Recharts
Loading...

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/radar-chart

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

chart

Manual installation

Install the chart dependencies, then copy the component source into your project.

npm install recharts react-aria-components

Usage

Pass the dimension field to dataKey, then describe every numeric field in series. The matching keys in config provide labels and optional colors for the tooltip and legend.

<RadarChart
  data={data}
  dataKey="metric"
  series={[
    { dataKey: "current", name: "Current quarter" },
    { dataKey: "previous", name: "Previous quarter" },
  ]}
  config={{
    current: { label: "Current quarter" },
    previous: { label: "Previous quarter" },
  }}
/>

Examples

Multiple series

Add multiple series to compare profiles. A selectable legend is shown automatically when more than one series is present.

Loading...

Custom colors

Set a color on each series in the chart configuration to match your product or data semantics.

Loading...

Circular grid

Forward options to the Recharts polar primitives to customize the grid and radial scale.

Loading...

Component API

RadarChart

RadarChart extends the native <div> element and composes the Intent UI <Chart> component.

angleAxisPropsOmit<ComponentProps<typeof PolarAngleAxis>, "dataKey">
chartPropsOmit<ComponentProps<typeof RadarChartPrimitive>, "data">
childrenReactNode
classNamestring
colorsreadonly string[]
Default: DEFAULT_COLORS
configChartConfig
containerHeightnumber
Default: 360
dataRecord<string, any>[]
dataKeystring
legendboolean
Default: series.length > 1
polarGridPropsComponentProps<typeof PolarGrid>
radiusAxisPropsComponentProps<typeof PolarRadiusAxis>
seriesRadarChartSeries[]
tooltipboolean | ComponentProps<typeof ChartTooltip>["content"]
Default: true
tooltipPropsOmit<ComponentProps<typeof ChartTooltip>, "content">

See the Recharts RadarChart API reference for primitive-specific options.

RadarChartSeries

dataKeystring
namestring
radarPropsOmit<ComponentProps<typeof Radar>, "dataKey" | "name">
Design
Pie Chart
Radial Bar Chart