Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Radar Chart with Radius Axis

A two-series radar with its radius values printed along one spoke, 0 to 320, so the rings read as numbers. Built in React with Recharts.

Framework
Charting library

Preview

Preview width

About

Most radars hide their scale. This one prints it: the ring values run up one spoke, so people can tell that a corner sits near 240 without hovering. Use it for analytical views or when several radars need to share a visible scale.

Desktop and Mobile overlap on four polygon rings at 80, 160, 240 and 320, the numbers set along a tilted spoke in the foreground color. There are no month names at the edge; the tooltip gives the values per month.

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 { ChartRadarRadius } from "@/components/charts/chart-radar-radius";
<ChartRadarRadius />

Customize

  • <PolarRadiusAxis angle={60} orientation="middle" axisLine={false} stroke="var(--foreground)" /> prints the scale along one spoke.
  • There's no <PolarAngleAxis>, so the months aren't written around the edge.
  • <PolarGrid /> draws polygon rings at the radius axis' ticks.
  • <ChartTooltipContent indicator="line" labelKey="month" /> lists both series for the hovered month.

FAQ

How are the radius values drawn?

<PolarRadiusAxis angle={60} orientation="middle" axisLine={false} />. Recharts measures angle counterclockwise from three o'clock, so 60 lands between January and February.

How do I move the values to another spoke?

Change angle on <PolarRadiusAxis>, in degrees counterclockwise from three o'clock: 90 is straight up.

How do I change the numbers on the axis?

Set tickCount or domain on <PolarRadiusAxis>, and tickFormatter to change how each number prints.

Where are the month names?

There's no <PolarAngleAxis> in this chart. Add <PolarAngleAxis dataKey="month" /> to write the months around the edge.

When does a radius axis help?

Use the axis when people need to read approximate values off the rings, or when two radars sit side by side and must share a scale. For a quick sense of shape, the plain radar is calmer.

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