Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Radar Chart with Filled Grid

A radar on filled polygon rings that echo its own shape, the grid lines faded. One series in React, the backdrop tinted in the series color.

Framework
Charting library

Preview

Preview width

About

Use it when the radar should read as one solid object: a profile card, a feature summary. The tinted hexagons behind the shape repeat its angles, so the whole chart feels of a piece. For a softer, rounder look, the filled circle grid does the same with circles.

Four polygon rings are each tinted with the series color at 20%, so the tint deepens toward the center, and their outlines are faded to 20%. The data shape sits on top at 50% with no 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 { ChartRadarGridFill } from "@/components/charts/chart-radar-grid-fill";
<ChartRadarGridFill />

Customize

  • <PolarGrid className="fill-(--color-desktop) opacity-20" /> fills the polygon rings and fades the grid.
  • <Radar fillOpacity={0.5}> without a stroke gives an edgeless shape.
  • <ChartTooltipContent hideLabel /> shows only the value row.
  • Change the fill class to recolor the grid without touching chartConfig.

FAQ

How is the polygon grid filled?

A class on <PolarGrid>: className="fill-(--color-desktop) opacity-20". Without gridType, the grid stays polygonal.

Filled polygons or filled circles?

Polygons repeat the angles of the data; circles contrast with them. Add gridType="circle" to <PolarGrid> to compare.

How do I keep the data visible against the fill?

Keep <Radar fillOpacity> well above the grid's 20%: 0.5 here. With a second <Radar>, lower the grid to opacity-10 or remove its fill class.

Does it adapt to dark mode?

Yes. The fill and the shape both read var(--color-desktop), which follows --chart-1 from light to dark. The labels use var(--muted-foreground).

How do I change the bands?

Add <PolarRadiusAxis tickCount={3} tick={false} axisLine={false} /> and the grid follows its ticks, or set polarRadius on <PolarGrid> in pixels.

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