Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Multiple Radar Chart

Two series overlaid on one radar grid, Desktop and Mobile, so you compare two profiles month by month in a single shape. Drawn with Recharts.

Framework
Charting library

Preview

Preview width

About

Use it to compare two profiles over the same categories: this year against last, two products, two teams. The overlap shows where they agree and the gaps where they differ. Add the legend version when nothing on the page names the two colors.

Desktop fills its shape at 60% and Mobile sits in front, fully opaque, both on a polygon grid with spokes and the month names around the edge.

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import { ChartRadarMultiple } from "@/components/charts/chart-radar-multiple";
<ChartRadarMultiple />

Customize

  • Two <Radar> elements, dataKey="desktop" and dataKey="mobile", read the same rows.
  • Desktop has fillOpacity={0.6}; Mobile has none, so it's solid and on top.
  • Both read their color from chartConfig through fill="var(--color-<key>)".
  • <ChartTooltipContent indicator="line" /> lists both values for the hovered month.

FAQ

How do I add a third series?

Add a <Radar dataKey="tablet" fill="var(--color-tablet)" /> and a tablet entry in chartConfig. Every row needs the new field.

Which series is drawn on top?

Later <Radar> elements paint on top. Mobile comes second and has no fillOpacity, so it's solid; Desktop sits behind at 0.6.

How many series can I compare?

Two or three. Past that, the overlapping fills turn into one dark patch. For more series, use the lines-only radar, small separate radars, or a grouped bar chart.

How does the tooltip pick a month?

<ChartTooltip> follows the angle axis: hovering anywhere near a spoke shows that month's values for both <Radar> elements.

How do I change the two colors?

Change color on each chartConfig entry. The marks read var(--color-desktop) and var(--color-mobile), so both shapes and the tooltip's indicators follow.

API Reference

ChartContainer

PropType
configChartConfig

Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.

initialDimension?{ height: number; width: number; }

The size it renders at before it's measured, so the first paint isn't * empty.

Type
{ height: number; width: number; }
Default
INITIAL_DIMENSION
className?string

Merged with the part's classes.

ChartLegend

ChartLegendContent

<div>

PropType
hideIcon?boolean

Hides each series' icon (from config), leaving its color swatch.

Default
false
nameKey?string

The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.

className?string

Merged with the part's classes.

ChartStyle

<style>

PropType
configChartConfig

The chart config whose colors it writes as --color-<key> variables.

idstring

The element's id.

ChartTooltip

ChartTooltipContent

<div>

PropType
hideIndicator?boolean

Hides each item's color indicator.

Default
false
hideLabel?boolean

Hides the tooltip's label, the hovered point's.

Default
false
indicator?"dashed" | "dot" | "line"

The color indicator's shape: a dot, a line or dashed.

Type
"dashed" | "dot" | "line"
Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode

Formats the tooltip's label; its value is untyped, as in recharts 3.8.

Type
(label: any, payload: TooltipPayload) → React.ReactNode
Parameters

label – any

payload – TooltipPayload

Returns
React.ReactNode
labelKey?string

The key in the data to read the label from, looked up in config.

nameKey?string

The key in each item's data to look its name up by in config.

className?string

Merged with the part's classes.

All 70 charts