Radar Chart

A composable radar chart built with SVG and D3 scales.

fillOpacity

0.2

0.4

0.6

0.8

1.0

gridType

polygon

circle

showGrid

#Installation

bunx --bun bun add @barefootjs/chart

#Usage

Monthly Visitors

January - June 2024

1"use client"23import type { ChartConfig } from "@barefootjs/chart"4import {5  ChartContainer,6  RadarChart,7  Radar,8  PolarGrid,9  PolarAngleAxis,10  RadarTooltip,11} from "@/components/ui/chart"1213const chartConfig: ChartConfig = {14  desktop: { label: "Desktop", color: "hsl(221 83% 53%)" },15}1617const chartData = [18  { month: "January", desktop: 186 },19  { month: "February", desktop: 305 },20  { month: "March", desktop: 237 },21  { month: "April", desktop: 73 },22  { month: "May", desktop: 209 },23  { month: "June", desktop: 214 },24]2526export function MyRadarChart() {27  return (28    <ChartContainer config={chartConfig} className="w-full">29      <RadarChart data={chartData}>30        <PolarGrid />31        <PolarAngleAxis32          dataKey="month"33          tickFormatter={(v: string) => v.slice(0, 3)}34        />35        <RadarTooltip />36        <Radar37          dataKey="desktop"38          fill="var(--color-desktop)"39          fillOpacity={0.6}40        />41      </RadarChart>42    </ChartContainer>43  )44}

#Examples

#Basic

1"use client"23import type { ChartConfig } from "@barefootjs/chart"45const chartConfig: ChartConfig = {6  desktop: { label: "Desktop", color: "hsl(221 83% 53%)" },7}89const chartData = [10  { month: "January", desktop: 186 },11  { month: "February", desktop: 305 },12  { month: "March", desktop: 237 },13  { month: "April", desktop: 73 },14  { month: "May", desktop: 209 },15  { month: "June", desktop: 214 },16]1718export function RadarChartBasicDemo() {19  return (20    <ChartContainer config={chartConfig} className="w-full">21      <RadarChart data={chartData}>22        <PolarGrid />23        <PolarAngleAxis24          dataKey="month"25          tickFormatter={(v: string) => v.slice(0, 3)}26        />27        <Radar28          dataKey="desktop"29          fill="var(--color-desktop)"30          fillOpacity={0.6}31        />32      </RadarChart>33    </ChartContainer>34  )35}

#Multiple

Desktop

Mobile

1"use client"23import type { ChartConfig } from "@barefootjs/chart"45const chartConfig: ChartConfig = {6  desktop: { label: "Desktop", color: "hsl(221 83% 53%)" },7  mobile: { label: "Mobile", color: "hsl(280 65% 60%)" },8}910const chartData = [11  { month: "January", desktop: 186, mobile: 80 },12  { month: "February", desktop: 305, mobile: 200 },13  // ...14]1516export function RadarChartMultipleDemo() {17  return (18    <ChartContainer config={chartConfig} className="w-full">19      <RadarChart data={chartData}>20        <PolarGrid />21        <PolarAngleAxis22          dataKey="month"23          tickFormatter={(v: string) => v.slice(0, 3)}24        />25        <RadarTooltip />26        <Radar dataKey="desktop" fill="var(--color-desktop)" fillOpacity={0.4} />27        <Radar dataKey="mobile" fill="var(--color-mobile)" fillOpacity={0.4} />28      </RadarChart>29    </ChartContainer>30  )31}

#Interactive

Show:

1"use client"23import { createSignal } from "@barefootjs/dom"4import type { ChartConfig } from "@barefootjs/chart"56const chartConfig: ChartConfig = {7  desktop: { label: "Desktop", color: "hsl(221 83% 53%)" },8  mobile: { label: "Mobile", color: "hsl(280 65% 60%)" },9}1011export function RadarChartInteractiveDemo() {12  const [category, setCategory] =13    createSignal<"desktop" | "mobile">("desktop")1415  return (16    <div>17      <div className="flex gap-2 mb-4">18        <button onClick={() => setCategory("desktop")}>19          Desktop20        </button>21        <button onClick={() => setCategory("mobile")}>22          Mobile23        </button>24      </div>25      <ChartContainer config={chartConfig} className="w-full">26        <RadarChart data={chartData}>27          <PolarGrid />28          <PolarAngleAxis29            dataKey="month"30            tickFormatter={(v: string) => v.slice(0, 3)}31          />32          <RadarTooltip />33          <Radar34            dataKey={category()}35            fill={\`var(--color-\${category()})\`}36            fillOpacity={0.6}37          />38        </RadarChart>39      </ChartContainer>40    </div>41  )42}

#API Reference

RadarChart

Prop	Type	Default	Description
data	Record<string, unknown>[]	-	Array of data objects. Each object represents one axis on the radar.

ChartContainer

Prop	Type	Default	Description
config	ChartConfig	-	Maps each data key to a label and color. Sets CSS variables for theming.
className	string	-	Additional CSS class names for the container element.

Radar

Prop	Type	Default	Description
dataKey	string	-	The key in the data objects to use for radar values.
fill	string	currentColor	Fill color for the radar polygon. Supports CSS variables like var(--color-desktop).
fillOpacity	number	0.6	Opacity of the radar polygon fill (0 to 1).

PolarGrid

Prop	Type	Default	Description
gridType	'polygon' \| 'circle'	polygon	Shape of the concentric grid lines.

PolarAngleAxis

Prop	Type	Default	Description
dataKey	string	-	The key in the data objects to use for axis labels.
tickFormatter	(value: string) => string	-	Custom formatter for tick labels.
hide	boolean	false	Hide the angle axis labels.

RadarTooltip

Prop	Type	Default	Description
labelFormatter	(label: string) => string	-	Custom formatter for the tooltip label.