Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Radar Chart with Lines Only

Two radar series drawn as outlines with no fill, so neither hides the other where they cross. A clean overlay of close profiles in React.

Framework
Charting library

Preview

Preview width

About

Use outlines when two series are close and overlap a lot. Filled shapes would cover each other; two lines keep both readable where they cross. With very different series, the filled multiple radar shows the gap better.

Two closed outlines, Desktop and Mobile, 2 pixels wide in their series colors, sit on polygon rings with the spokes hidden, so the lines carry the chart.

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 { ChartRadarLinesOnly } from "@/components/charts/chart-radar-lines-only";
<ChartRadarLinesOnly />

Customize

  • Each <Radar> has fillOpacity={0}, stroke="var(--color-<key>)" and strokeWidth={2}.
  • <PolarGrid radialLines={false} /> keeps the polygon rings and drops the spokes.
  • <ChartTooltipContent indicator="line" /> matches the tooltip's markers to the outlines.
  • The data has its own values, closer together than the multiple radar's, so the outlines cross often.

FAQ

How is the fill removed?

fillOpacity={0} on each <Radar>, with stroke="var(--color-desktop)" and strokeWidth={2} so the outline carries the series.

How do I make the lines thicker?

Change strokeWidth on each <Radar>. Keep both at the same width so neither looks more important.

Can one series be dashed?

Add strokeDasharray="4 4" to one <Radar>. A pattern keeps the series apart for readers who can't tell the colors apart.

When should I use outlines instead of fills?

Outlines suit two or three series with similar values, like these, where fills would stack into one blob. For a single series, the filled shape shows its footprint better.

Why is the radius scale shorter here?

Recharts fits the radius axis to the data. To fix it, add <PolarRadiusAxis domain={[0, 220]} tick={false} axisLine={false} />.

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