Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Radar Chart with Dots

A radar with a solid dot on every value, so each month's reading stands out from the filled shape. One series in React, drawn with Recharts.

Framework
Charting library

Preview

Preview width

About

Pick this one over the plain radar when people read individual values, not only the outline: a dot marks where each month actually lands, so small differences between neighbors are easier to see. It also helps when the grid is light or missing.

The shape is the same six-month polygon at 60% fill, with a solid dot of radius 4 on each corner in the series color, over polygon rings and spokes.

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 { ChartRadarDots } from "@/components/charts/chart-radar-dots";
<ChartRadarDots />

Customize

  • One <Radar dataKey="desktop"> draws both the shape and the dots: dot={{ r: 4, fillOpacity: 1 }} turns the markers on.
  • activeDot styles the dot of the active month; without it Recharts uses the default.
  • <PolarGrid /> with no props draws the polygon rings and the spokes behind it.
  • The tooltip is ChartTooltipContent with its default dot indicator and the month as its label.

FAQ

How are the dots drawn?

Through the dot prop on <Radar>: dot={{ r: 4, fillOpacity: 1 }}. r is the radius in pixels and fillOpacity: 1 makes the dots solid while the shape stays at 0.6.

How do I make the dots bigger or smaller?

Change r in the dot object on <Radar>. 4 suits six spokes; go down to 2 or 3 for many categories, up to 6 for a few.

Can the dots be a different color from the shape?

Yes. Pass fill and stroke in the dot object, dot={{ r: 4, fill: "var(--chart-2)", stroke: "var(--background)" }} for example. The shape keeps its own fill.

How do I enlarge the dot under the pointer?

Add activeDot to <Radar>, activeDot={{ r: 6 }} for example. Recharts draws it over the plain dot of the active month.

Does the chart work with the keyboard?

Yes. accessibilityLayer is on by default in Recharts 3: Tab into the chart and the Left and Right arrow keys move the tooltip from month to month.

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