Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Radar Chart

One series plotted around six spokes on a polygon grid, the months joined into a filled shape. Compare one profile across categories in Vue.

Framework
Charting library

Preview

Preview width

About

Reach for a radar when one thing is measured on several comparable dimensions and the overall shape is the point: a skill profile, a product's scores, six months of traffic. For a trend over time, a line chart is clearer; for exact comparisons, use bars.

Each month sits on its own spoke, and its value sets how far from the center that corner lands. Four polygon rings behind the shape mark the scale, and the shape is filled at 60% so the rings show through.

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

<script setup lang="ts">
import ChartRadarSimple from "@/components/charts/chart-radar-simple.vue";
</script>
<template>
  <ChartRadarSimple />
</template>

Customize

  • Six rows of { month, desktop }. A radialArea inside polar() maps angle: "month" and radius: "desktop"; each row is one corner of the shape.
  • The angle scale is scalePoint over the months; on a full circle it wraps by default, so the last month doesn't land on the first one's spoke. The radius scale is chartLinearScale, which rounds 305 up to 320.
  • radialGrid({ shape: "polygon" }) draws the rings and angleGrid() the spokes and month names, both stroked with var(--border).
  • The shape paints fill: "var(--color-desktop)" at fillOpacity: 0.6, with no outline. radiusRatio: 0.8 on polar() shrinks the radius so the labels fit.
  • ChartContainer is mx-auto aspect-square max-h-[250px]: a centered square that never grows past 250 pixels.

FAQ

How many categories can a radar hold?

Five to eight spokes read well. With fewer than five, a bar chart says the same thing more clearly. Past eight, the labels crowd each other and the shape stops meaning much. Each row of chartData adds a spoke.

How do I put a different category at the top?

The first row sits at twelve o'clock and the rest follow clockwise. Reorder chartData, or set startAngle and endAngle on polar(), in radians, to turn the whole layout.

Why doesn't the shape reach the outer ring?

The radius scale is chartLinearScale, which rounds the largest value up to a nice tick as Recharts does: 305 becomes 320, so the outer ring stands for 320 and February sits just inside it. For a fixed range that stays put when the data changes, pass a scale with its own domain: radius: { scale: scaleLinear().domain([0, 400]) }.

How do I change the fill?

fillOpacity: 0.6 on the radialArea lets the rings show through. Lower it for a lighter shape, or set it to 0 and give the mark a stroke and strokeWidth for an outline. The color is var(--color-desktop) from chartConfig.

Can I use it with the keyboard?

Yes. Tab into the chart and the arrow keys walk the spokes in order around the circle, one month at a time, with the tooltip following. Home and End jump to the first and last month.

How do I plot my own data?

Replace chartData with your rows and point the mark's angle at the category field and radius at the value. Rename desktop in chartConfig to match, since the tooltip looks the label up by it.

API Reference

ChartContainer

<div> data-slot="chart"

PropType
configChartConfig

Each series' label, icon and color, read by the tooltip and the legend.

definitionChartDefinition

The chart: defineChart(spec, chartTooltip()), its data, marks, scales and axes, and the tooltip's focus.

ariaLabelstring

The chart's accessible name: the card's title.

ariaDescription?string

The chart's accessible description.

class?string

The container's size: aspect-auto h-[250px] w-full, mx-auto aspect-square max-h-[250px]. It's aspect-video by default.

#default?slot

What sits under the chart inside the container: a ChartLegend.

tooltip?(ChartTooltipContentOptions & { class?: string }) | false

ChartTooltipContent's options (indicator, hideLabel, labelFormatter…) for the default body, or false for TanStack's own tooltip body.

Type
(ChartTooltipContentOptions & { class?: string }) | false
#tooltip?slot (ChartTooltipBodySlotContext)

A whole tooltip body of your own, in place of ChartTooltipContent: it gets the focused points (each with its datum, group and color). A scoped slot.

Type
slot (ChartTooltipBodySlotContext)
defaultIndex?number

The category whose tooltip shows before any pointer, as Recharts' defaultIndex.

height?number

A fixed height in pixels for the chart, in place of the container's.

aspectRatio?number

A width-to-height ratio for the chart, in place of the container's height.

initialWidth?number

The width the chart renders at before it's measured.

EventType
@focus-change?(point: ChartPoint | null) => void

Called as the focused point changes: a pointer, a key or a tap.

Type
(point: ChartPoint | null) => void
@focus-group-change?(points: readonly ChartPoint[]) => void

Called with every point at the focused category (a stacked or grouped chart's).

Type
(points: readonly ChartPoint[]) => void
@select?(point: ChartPoint | null) => void

Called when a point is clicked or picked with Enter.

Type
(point: ChartPoint | null) => void
CSS variableType
--color-<key>?color

Each config key's color (its theme color in light and dark), set on the container: the marks paint with var(--color-<key>).

ChartTooltipContent

<div>

PropType
pointsreadonly ChartPoint[]

The focused points, from the tooltip's context. ChartContainer passes them to its default body; a body of your own passes its context's.

indicator?"dot" | "line" | "dashed"

The indicator's shape beside each row.

Type
"dot" | "line" | "dashed"
Default
"dot"
hideLabel?boolean

Hides the label above the rows (the focused category).

Default
false
hideIndicator?boolean

Hides each row's color indicator.

Default
false
label?string

The label's text in place of the focused category, looked up in config.

labelKey?string

The datum field (or config key) the label is read from, looked up in config.

nameKey?string

The datum field (or config key) each row's series is read from: a pie's browser.

valueKey?string

The datum field each row's value is read from, for points that carry geometry rather than values (a pie's, from pie()).

color?string

One indicator color for every row, in place of each series' own.

labelFormatter?(label: string, points: readonly ChartPoint[]) => string

Formats the label (the config's label or the category), with the rows' points: a date written out, a unit.

Type
(label: string, points: readonly ChartPoint[]) => string
#formatter?slot ({ value, item, index })

A row's content in place of its indicator, name and value, as shadcn's formatter: a unit, a currency, a total row. A scoped slot; the row's series key is item.key.

class?string

Classes for the tooltip's card.

ChartLegend

<div>

PropType
config?ChartConfig

The series to list: the container's config by default.

keys?readonly string[]

The series keys to list, in order: every key with a color by default.

hideIcon?boolean

Hides each series' icon (from config), leaving its color swatch.

Default
false
verticalAlign?"top" | "bottom"

Above the chart or under it.

Type
"top" | "bottom"
Default
"bottom"
class?string

Classes for the legend's row.

ChartConfig

KeyType
label?string

The series' name in the tooltip and the legend.

icon?Component

An icon beside its name in the legend and the tooltip (a lucide-vue-next icon).

color?string

Its color in both themes: a token (var(--chart-1)) or any CSS color.

theme?{ light: string; dark: string }

A color for each theme, in place of color.

Helpers

ExportType
chartTooltip?(settings?: ChartTooltipSettings) => ChartDefinitionOptions

defineChart's second argument for a chart with a tooltip: what a pointer or a key focuses (group-x, each category's series, by default), the focus ring, and the host ChartContainer draws its body in.

Type
(settings?: ChartTooltipSettings) => ChartDefinitionOptions
chartTheme?ChartTheme

defineChart's theme in the site's tokens: the text, the grid and the palette (--chart-1 to --chart-5).

chartColors?(config: ChartConfig, keys?: readonly string[]) => { domain: string[]; range: string[] }

defineChart's color: each series key (in config order, or keys') painted var(--color-<key>), for marks with a color channel.

Type
(config: ChartConfig, keys?: readonly string[]) => { domain: string[]; range: string[] }
chartLinearScale?() => LinearScale

A value axis drawn as Recharts draws its default one: zero in the domain, five nice ticks. Pass it as a factory: y: { scale: chartLinearScale }.

Type
() => LinearScale
curveNatural?CurveFactory

D3's natural curve, for a smooth line or area: curve: d3Curve(curveNatural).

curveStep?CurveFactory

D3's step curve, for a line or area that holds each value: curve: d3Curve(curveStep).

curveMonotoneX?CurveFactory

D3's monotone curve, smooth without overshooting a point: curve: d3Curve(curveMonotoneX).

curveLinearClosed?CurveFactory

D3's closed linear curve: a radar's polygon (curve: curveLinearClosed on radialLine and radialArea).

useChart?() => { config: ChartConfig }

The config of the ChartContainer around a component of your own (a custom tooltip body or legend).

Type
() => { config: ChartConfig }
All 70 charts