Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Radar Chart with Filled Circle Grid

A radar on filled round rings: tinted circles with faint outlines behind a soft shape. A polished one-series profile for React dashboards.

Framework
Charting library

Preview

Preview width

About

Use it when the chart sits in a marketing page or a summary card and should feel finished rather than technical. The tinted rings frame the shape with barely any lines, which suits a single series; with two overlapping series, the fills start to muddy.

Four concentric circles are each filled with the series color at 20%, so the tint deepens toward the center, and their outlines and the spokes are faded to 20%. The shape on top is filled at 50% with no outline, and the month names sit 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 { ChartRadarGridCircleFill } from "@/components/charts/chart-radar-grid-circle-fill";
<ChartRadarGridCircleFill />

Customize

  • <PolarGrid gridType="circle" className="fill-(--color-desktop) opacity-20" /> tints the rings with the series color.
  • <Radar fillOpacity={0.5}> without a stroke leaves the shape edgeless.
  • The tooltip is ChartTooltipContent with no props: the month as its label, a dot beside the value.
  • <PolarAngleAxis dataKey="month" /> names the spokes; the grid keeps its default ticks.

FAQ

How are the rings filled?

With a class on <PolarGrid>: className="fill-(--color-desktop) opacity-20" next to gridType="circle". The fill colors the rings and opacity-20 fades the whole grid.

Why are the spokes so faint?

In this version they're still drawn, faded to 20% with the rest of the grid. Add radialLines={false} to <PolarGrid> to remove them.

How do I keep the shape readable over the tint?

The grid is at 20% and <Radar> at fillOpacity={0.5}. Keep the shape well above the grid, or give <Radar> a stroke so its edge stays visible.

Does the tinted grid work in dark mode?

Yes. The ring fill is var(--color-desktop), which comes from chartConfig and follows --chart-1 into dark mode. For a different tint per mode, set theme: { light, dark } on the config entry.

Can the rings use a neutral color instead?

Change the class on <PolarGrid>: fill-muted gives a neutral backdrop. Keep the opacity low, 10 to 25%.

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