Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Radar Chart with Circle Grid, No Lines

Round rings with no spokes from the center: a target-like grid behind one series with dots on its values, drawn in React with Recharts.

Framework
Charting library

Preview

Preview width

About

Pick it when even spokes feel like clutter: a summary tile, a slide, a profile card. The rings still give a sense of scale, and the dots mark each month. Keep the spokes, as the circle grid does, when people need to trace values back to the center.

Four concentric circles sit behind a 60% filled shape with a dot on every value. There are no lines from the center; the month names sit at the edge on their own.

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 { ChartRadarGridCircleNoLines } from "@/components/charts/chart-radar-grid-circle-no-lines";
<ChartRadarGridCircleNoLines />

Customize

  • <PolarGrid gridType="circle" radialLines={false} /> gives circles without spokes.
  • <PolarAngleAxis dataKey="month" /> keeps the month names at the edge.
  • <Radar dot={{ r: 4, fillOpacity: 1 }} fillOpacity={0.6}> draws the shape and its markers.
  • <ChartTooltipContent hideLabel /> shows only the value row.

FAQ

How are the spokes removed?

radialLines={false} on <PolarGrid>, next to gridType="circle". The circles stay and the lines from the center go.

Can people still tell which spoke is which?

Yes. <PolarAngleAxis dataKey="month" /> writes the names at the edge whether or not <PolarGrid> draws the spokes.

Does hiding the spokes hurt readability?

A little. Without spokes it's harder to follow a value back toward the center, which matters in an analytical view. For a dashboard tile, the cleaner look is usually worth it; the tooltip gives the exact value.

How do I turn it into a filled target?

Add className="fill-(--color-desktop) opacity-20" to <PolarGrid>, as the filled circle grid does.

Why are there dots on the shape?

dot={{ r: 4, fillOpacity: 1 }} on <Radar>. Without spokes they're the only cue to where each value sits on its angle.

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