shadcn.io is not affiliated with official shadcn/ui
Chart examples · Radar
A radar chart with a radius axis for React
A radar chart with a radius axis showing the value scale along one spoke.
Use it when readers need a scale. PolarRadiusAxis draws the values along one spoke, so the distance of each point from the center can be read as a number.
Preview
Installation
FAQ
How is the value scale drawn?
PolarRadiusAxis sets angle to 60, orientation to middle, axisLine to false, and stroke to var(--foreground). The ticks sit along that spoke, and the axis line itself is off.
Where are the month names?
The months live on each row as month. This chart has no PolarAngleAxis, so those names stay off the rim. The tooltip points at the field with labelKey month.
Which shapes are filled?
One Radar uses dataKey desktop, fill var(--color-desktop), and fillOpacity 0.6. The other uses dataKey mobile and fill var(--color-mobile). config colors them with var(--chart-1) and var(--chart-2).
What does the tooltip show?
ChartTooltipContent sets indicator to line and labelKey to month, and cursor is false. The series rows are named Desktop and Mobile from config. The month values here are words like January, and those words are not keys in config.
Related
- A radar chartA radar chart plotting one series across
- A radar chart with a custom gridA radar chart whose grid is reduced to
- A line chartA line chart drawing one series as a
- A bar chartA bar chart with rounded corners
- A radar chart with multiple dataA radar chart overlaying desktop and
- A radar chart with a custom labelA radar chart whose axis labels show both