Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Radial Chart with Grid

Five browser rings over circular grid lines and spokes, with no track behind them, so you read each arc against the grid. In React on Recharts.

Framework
Charting library

Preview

Preview width

About

Use it when readers judge each ring by how far it gets around the circle and need marks to measure against. The circles and spokes do the job the track does in the plain radial chart, without filling the card with gray. For exact comparisons, a horizontal bar chart is still easier.

Five rings, Chrome innermost, each start at three o'clock and run counterclockwise as far as their visitor counts. A thin circle sits at every ring's radius and spokes cross them at even steps of the value scale.

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 { ChartRadialGrid } from "@/components/charts/chart-radial-grid";
<ChartRadialGrid />

Customize

  • <PolarGrid gridType="circle" /> draws the circles and spokes. Recharts places them from the radius and angle axes, so they follow the rings.
  • <RadialBar dataKey="visitors" /> has no background here, so the grid shows through between rings.
  • innerRadius={30} and outerRadius={100} on <RadialBarChart> set the rings' band.
  • Each row's fill, var(--color-chrome) and so on, colors its ring from chartConfig.
  • <ChartTooltipContent hideLabel nameKey="browser" /> names the hovered ring by its browser.

FAQ

How are the circles and spokes drawn?

<PolarGrid gridType="circle" /> inside <RadialBarChart> draws a circle per ring and the radial lines. ChartContainer turns its strokes to the border token. The default gridType is polygon.

How do I keep the circles and remove the spokes?

Set radialLines={false} on <PolarGrid>. To place the spokes yourself, pass polarAngles an array of angles in degrees.

Can I add a track behind each ring?

Add background to <RadialBar>; ChartContainer fills it with the muted token. With a track, the grid becomes noise, so most charts keep one or the other.

How do I resize the rings?

innerRadius={30} and outerRadius={100} on <RadialBarChart> set the band the rings share; both take pixels or a percentage string. Keep aspect-square on ChartContainer so the circles stay round.

Does the grid follow dark mode?

The grid uses the border token, which your theme defines for light and dark, so the lines dim with the page. The rings use --chart-1 to --chart-5 through chartConfig, which switch too.

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