Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Radar Chart without Grid

A radar with no grid at all: only the filled shape, its dots and the month names. The leanest way to show one profile in React with Recharts.

Framework
Charting library

Preview

Preview width

About

Use it when the shape alone says enough and the grid would only add lines: a small tile, a compact profile, a print layout. Without rings, nobody reads exact values off the chart, so keep the tooltip or label the values when they matter.

Only the 60% filled shape, a dot on each value and the six month names are drawn. Nothing marks the 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 { ChartRadarGridNone } from "@/components/charts/chart-radar-grid-none";
<ChartRadarGridNone />

Customize

  • No <PolarGrid>: the chart is <PolarAngleAxis>, <Radar> and the tooltip.
  • <Radar dot={{ r: 4, fillOpacity: 1 }}> adds the markers that stand in for the grid.
  • <ChartTooltipContent hideLabel /> leaves the month out of the tooltip.
  • To bring the grid back, add <PolarGrid /> inside <RadarChart>, as the plain radar does.

FAQ

How is the grid removed?

There's no <PolarGrid> in the chart. <PolarAngleAxis> still writes the month names and <Radar> the shape.

When should I drop the grid?

When the shape is the message: a hero, a profile card, a chart people read for its outline. Keep a grid wherever people compare values, or add one ring, as the custom grid version does.

Why keep the dots?

With no rings to compare against, the dot prop on <Radar> gives each month a point to read.

Does the tooltip still work without a grid?

Yes. ChartTooltip reads the data, not the grid, so hovering still shows each value. hideLabel drops the month from it.

How do I add one ring back?

Add <PolarGrid polarRadius={[90]} radialLines={false} /> for one ring, or <PolarGrid /> for the full grid.

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