Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Radar Chart with Icons

Two radar series with a legend that shows an icon for each, Desktop and Mobile, in place of the color swatch. Built in React on Recharts.

Framework
Charting library

Preview

Preview width

About

Use icons in the legend when the series have an obvious symbol (a device, a direction, a channel) and the legend should read faster than a color key. It's the same two-series radar as the legend version; only the legend's markers change.

Desktop and Mobile overlap on a polygon grid, Desktop at 60% fill and Mobile solid in front. Under the radar, the legend shows an arrow icon next to each name.

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

Customize

  • chartConfig entries carry icon: ArrowDownFromLine and icon: ArrowUpFromLine from lucide-react.
  • <ChartLegend className="mt-8" content={<ChartLegendContent />} /> sits inside <RadarChart> and reads the icons from the config.
  • margin={{ top: -40, bottom: -10 }} on <RadarChart> pulls the radar up to leave room for the legend.
  • Two <Radar> elements draw the series; the later one, Mobile, paints on top.

FAQ

Where do the icons come from?

From chartConfig: each entry has an icon. ChartLegendContent draws it in place of the swatch, and ChartTooltipContent in place of its indicator.

How do I use other icons?

Import any component from lucide-react, or your own SVG component, and set it as the entry's icon. This chart uses ArrowDownFromLine and ArrowUpFromLine.

Can I keep the swatches and drop the icons?

Use <ChartLegendContent hideIcon />. The legend draws the color swatch again and the config keeps its icons.

Are the icons announced to screen readers?

Icons are decorative: the label next to each one names the series, so a screen reader reads Desktop and Mobile. Pick icons that hint at the series rather than carry meaning on their own.

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