shadcn.io is not affiliated with official shadcn/ui
About
Use it when the chart has to work without hovering: a printed report, a slide, a screenshot in a doc. Each spoke shows Desktop and Mobile as a pair above the month, so the exact numbers sit beside the shape. With more than two series, the labels get too long; use a table.
Two overlapping shapes, Desktop at 60% and Mobile solid, sit on a polygon grid. Each label reads like 186/80 in the foreground color with the month under it in a muted tone.
Installation
Usage
import { ChartRadarLabelCustom } from "@/components/charts/chart-radar-label-custom";<ChartRadarLabelCustom />Customize
<PolarAngleAxis dataKey="month" tick={…} />renders each label with a function that receivesx,y,textAnchorandindex.- Inside,
<tspan>s printchartData[index].desktop, a muted slash and.mobile, then the month on a second line withdy="1rem". - The first label moves up 10 pixels (
index === 0) so it clears the top of the chart. marginof 10 on every side of<RadarChart>keeps the labels inside the container.
FAQ
How are the two-line labels drawn?
Through a tick function on <PolarAngleAxis>. It returns a <text> with <tspan>s: the two values, then the month on a second line with dy="1rem" and the same x.
How do I change what the labels say?
Edit the <tspan>s in the tick function. It gets the tick's index, which you use to read chartData[index] and print any field.
Why is the radar smaller than the others?
The labels sit outside the grid, so margin on <RadarChart> adds 10 pixels on each side, and the tick function nudges the top label up by 10 to clear the edge.
API Reference
ChartContainer
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>
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>
configChartConfig
The chart config whose colors it writes as --color-<key> variables.
idstring
The element's id.
ChartTooltip
ChartTooltipContent
<div>
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– anypayload– 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.
Related
Multiple Radar Chart
Radar chartsTwo series overlaid on the same radar grid.
Radar Chart with Radius Axis
Radar chartsA radar with its radius axis and values drawn on a spoke.
Radar Chart with Legend
Radar chartsTwo radar series with a legend naming them.
Bar Chart with Custom Labels
Bar chartsHorizontal bars with the name inside each bar and the value after it.
Line Chart with Custom Labels
Line chartsEach point labeled with its category's name, in its color.
Radar Chart
Radar chartsOne series on a polygon grid, six months around the center.