Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Radar Chart with Custom Grid

A radar with one polygon ring around the shape and no spokes, so the grid frames the data instead of measuring it. One series in React.

Framework
Charting library

Preview

Preview width

About

Use it when the shape matters and the scale doesn't: a quick profile on a slide, a comparison people read at a glance. One ring gives the polygon an edge to sit against without the full grid. When values need reading, go back to the plain radar's four rings.

A single hexagon outlines the space just inside the edge, with no spokes and no inner rings. The 60% filled shape and the month names are the rest.

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 { ChartRadarGridCustom } from "@/components/charts/chart-radar-grid-custom";
<ChartRadarGridCustom />

Customize

  • <PolarGrid polarRadius={[90]} radialLines={false} strokeWidth={1} /> draws one ring 90 pixels out and no spokes.
  • polarRadius is in pixels: a different chart size can leave the ring too close or too far from the shape.
  • <Radar fillOpacity={0.6}> draws the shape, with no dots in this version.
  • <ChartTooltipContent hideLabel /> shows the value without the month.

FAQ

How do I draw only one ring?

polarRadius={[90]} on <PolarGrid> draws one ring 90 pixels from the center. Each number in the array is one ring.

Can I put rings at specific values?

List them in polarRadius, [30, 60, 90] for three rings. These are pixels, not data values, so recompute them if the chart's size changes or use <PolarRadiusAxis> ticks instead.

Why are there no spokes?

radialLines={false} on <PolarGrid> removes them. Drop the prop to bring them back.

How do I make the ring thicker or dashed?

<PolarGrid> takes strokeWidth (1 here) and strokeDasharray, strokeDasharray="4 4" for a dashed ring.

Can the single ring be a circle?

Add gridType="circle" to <PolarGrid> beside polarRadius.

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