shadcn.io is not affiliated with official shadcn/ui
Chart examples · Radar
A radar chart with a grid and circle fill for React
A radar chart with a circular grid tinted in the series color.
A radar chart on a round grid tinted with the series color at low opacity, so the shape sits on a soft background. The grid's className sets the tint, and the shape is the series color at 50% opacity.
Preview
Installation
FAQ
How are the circular rings tinted?
PolarGrid sets gridType to circle and className to fill-(--color-desktop) opacity-20. The rings are circles, filled with the desktop color at 20% opacity.
How is the data shape filled?
Radar uses dataKey desktop, fill var(--color-desktop), and fillOpacity 0.5. config maps desktop to var(--chart-1) and the label Desktop, which is the --color-desktop both the grid and the shape read.
Where do the month names come from?
PolarAngleAxis sets dataKey to month, so the rim prints the stored names, January through June. Radar in this file has no dot.
What does the tooltip show?
ChartTooltip renders ChartTooltipContent with cursor set to false. The month stays as the title, and the row is named Desktop from config.
Related
- A radar chart with a grid and circleA radar chart with a circular grid and a
- A radar chart with a grid filledA radar chart with its polygon grid
- A radar chartA radar chart plotting one series across
- An area chart with gradient fillA stacked area chart whose areas fade
- A radar chart with a grid and circle fill (no lines)A radar chart with circular grid rings
- A radial chart with a gridA radial bar chart with circular grid