Radar Chart

Radar charts with filled and line variants, gradients, and glow effects

Installation

npx shadcn-svelte@latest add https://evilcharts-sv.vercel.app/r/layerchart-radar-chart.json

<EvilRadarChart /> is the root of a composable compound component. Every visual part (<EvilRadarChart.PolarGrid />, <EvilRadarChart.PolarAngleAxis />, <EvilRadarChart.Tooltip />, <EvilRadarChart.Legend />, and the <EvilRadarChart.Radar /> series) composes as a child — render only what you need.

<script lang="ts">
	import { EvilRadarChart } from '$lib/components/evilcharts/charts/layerchart-radar-chart';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart';
</script>

<script lang="ts">
	const data = [
		{ skill: 'JavaScript', desktop: 186, mobile: 80 },
		{ skill: 'TypeScript', desktop: 305, mobile: 200 },
		{ skill: 'React', desktop: 237, mobile: 120 },
		{ skill: 'Node.js', desktop: 173, mobile: 190 },
		{ skill: 'CSS', desktop: 209, mobile: 130 }
	];

	const chartConfig = {
		desktop: {
			label: 'Desktop',
			colors: { light: ['#3b82f6'], dark: ['#60a5fa'] }
		},
		mobile: {
			label: 'Mobile',
			colors: { light: ['#10b981'], dark: ['#34d399'] }
		}
	} satisfies ChartConfig;
</script>

<EvilRadarChart {data} config={chartConfig}>
	<EvilRadarChart.PolarGrid />
	<EvilRadarChart.PolarAngleAxis dataKey="skill" />
	<EvilRadarChart.Legend />
	<EvilRadarChart.Tooltip />
	<EvilRadarChart.Radar dataKey="desktop" variant="filled">
		<EvilRadarChart.Dot variant="colored-border" />
		<EvilRadarChart.ActiveDot variant="default" />
	</EvilRadarChart.Radar>
	<EvilRadarChart.Radar dataKey="mobile" variant="filled" />
</EvilRadarChart>

Interactive Selection

Set isClickable on a <Radar /> or <Legend /> to toggle selection by clicking. The root’s onSelectionChange callback fires on every selection change:

<EvilRadarChart
	{data}
	config={chartConfig}
	onSelectionChange={(selectedDataKey) => {
		if (selectedDataKey) {
			console.log('Selected:', selectedDataKey);
		} else {
			console.log('Deselected');
		}
	}}
>
	<EvilRadarChart.PolarGrid />
	<EvilRadarChart.PolarAngleAxis dataKey="skill" />
	<EvilRadarChart.Legend isClickable />
	<EvilRadarChart.Tooltip />
	<EvilRadarChart.Radar dataKey="desktop" variant="filled" isClickable />
	<EvilRadarChart.Radar dataKey="mobile" variant="filled" isClickable />
</EvilRadarChart>

Loading State

Note

Pass isLoading to the root to show an animated loading skeleton while your data is being fetched.

<EvilRadarChart data={[]} config={chartConfig} isLoading>
	<EvilRadarChart.PolarGrid />
	<EvilRadarChart.PolarAngleAxis dataKey="skill" />
	<EvilRadarChart.Legend />
	<EvilRadarChart.Tooltip />
	<EvilRadarChart.Radar dataKey="desktop" variant="filled" />
	<EvilRadarChart.Radar dataKey="mobile" variant="filled" />
</EvilRadarChart>

Examples

Radar charts in different configurations.

Lines Variant

Note

Set variant="lines" to show only the outline without fill — clearer for comparing multiple datasets.

Circle Grid

Note

Set gridType="circle" to use circular grid lines instead of the default polygon grid.

Gradient Colors

Glowing Radars

Note

Set isGlowing on a <Radar /> for a soft glow. Each radar controls its own glow independently.

Dither rendering

Set renderStyle="dither" on the existing radar root for ordered-dither polygons while the SVG grid, axes, dots, tooltip, and selection targets remain authoritative. A radar-level ditherVariant overrides the root texture.

The renderer is independently implemented for EvilCharts SV and inspired by Dither Kit by Boring Software.

API Reference

A root container plus a set of composable parts, each documented below.

EvilRadarChart

The root container. Owns the data, shared context, and loading skeleton. All other parts render as its children.

Prop	Type	Default	Description
data*	TData[]	–	The chart data — an array of objects, one per radar data point (`TData extends Record<string, unknown>`).
config*	Record<string, ChartConfig[string]>	–	Defines the radar series. Each key matches a numeric data key and sets its colors and label.
children*	Snippet	–	The composed parts of the chart — `<PolarGrid />`, `<PolarAngleAxis />`, `<PolarRadiusAxis />`, `<Tooltip />`, `<Legend />`, and one or more `<Radar />` series.
accessibility	ChartAccessibility	–	Names and optionally describes the chart wrapper. It remains a group, so interactive legends and marks stay available to assistive technology.
className	string	–	Extra CSS classes for the chart container.
backgroundVariant	BackgroundVariant	–	Background pattern shown behind the chart.
defaultSelectedDataKey	string \| null	null	The radar series selected on first render.
onSelectionChange	(selectedDataKey: string \| null) => void	–	Fires when a radar is selected or deselected. Receives the data key, or `null` when deselected.
isLoading	boolean	false	Shows an animated loading skeleton while data is being fetched.
loadingPoints	number	6	Number of points rendered in the loading skeleton radar.
renderStyle	svg\| dither	"svg"	Selects the SVG or ordered-dither renderer.
ditherVariant	gradient\| dotted\| hatched\| solid	"gradient"	Default texture for dithered radars.
ditherCellSize	number	2	Dither cell size in CSS pixels.
bloom	off\| low\| high\| aura	"off"	Optional bounded glow around dither pixels.
chartProps	ComponentProps<typeof RadarChart>	–	Extra props forwarded to the underlying LayerChart Chart. See the LayerChart Chart documentation .

Radar

A single radar series. Each <Radar /> generates its own gradients and glow filter under a unique id, so radars never collide on styles. Compose <Dot /> and <ActiveDot /> inside for point markers.

Prop	Type	Default	Description
dataKey*	string	–	The series key to render. Must exist on both the data and the config.
variant	filled\| lines	"filled"	The visual style for this radar. `"filled"` shows a filled area, `"lines"` shows only the outline.
fillOpacity	number	0.3	Opacity of the filled area when `variant="filled"`.
isGlowing	boolean	false	Adds a soft outer glow. Each radar controls its own glow independently.
isClickable	boolean	false	Lets clicking this radar select or deselect it. Unselected radars dim while one is selected.
children	Snippet	–	Optional `<Dot />` and `<ActiveDot />` for point markers on this radar.
radarProps	Omit<ComponentProps<typeof Radar>, "dataKey">	–	Extra props forwarded to the underlying LayerChart Spline. See the LayerChart Spline documentation .

Dot / ActiveDot

Configuration slots inside a <Radar />. <Dot /> styles the resting markers; <ActiveDot /> styles the active marker. Neither renders anything on its own.

Prop	Type	Default	Description
variant	default\| border\| colored-border	–	The visual style for the point marker.

PolarGrid

The polar grid lines. Defaults to a dashed polygon grid and forwards every LayerChart PolarGrid prop.

Prop	Type	Default	Description
gridType	polygon\| circle	"polygon"	Shape of the grid lines. `"polygon"` for angular, `"circle"` for circular.
...props	ComponentProps<typeof PolarGrid>	–	Forwarded to the underlying LayerChart radial Grid. See the LayerChart Grid documentation .

PolarAngleAxis

The angular category axis — the labels around the chart’s perimeter. Hidden while loading.

Prop	Type	Default	Description
dataKey	string	–	The data key for the angle axis labels (e.g. categories, skills, months).
...props	ComponentProps<typeof PolarAngleAxis>	–	Forwarded to the underlying LayerChart radial Axis. See the LayerChart Axis documentation .

PolarRadiusAxis

The radial value axis — the scale from center outward. Hidden while loading.

Prop	Type	Default	Description
...props	ComponentProps<typeof PolarRadiusAxis>	–	Forwarded to the underlying LayerChart radial Axis. See the LayerChart Axis documentation .

Tooltip

The hover tooltip. Dims unselected series based on the chart’s selection. Hidden while loading.

Prop	Type	Default	Description
variant	default\| frosted-glass	"default"	Visual style of the tooltip.
roundness	sm\| md\| lg\| xl	"lg"	Border-radius of the tooltip.
defaultIndex	number	–	Shows the tooltip by default at this data point index.

Legend

The series legend. With isClickable, each entry toggles selection of its series. Hidden while loading.

Prop	Type	Default	Description
variant	"square" \| "circle" \| "circle-outline" \| "rounded-square" \| "rounded-square-outline" \| …	–	Visual style of the legend indicators.
align	left\| center\| right	"center"	Horizontal placement of the legend.
verticalAlign	top\| middle\| bottom	"bottom"	Vertical placement of the legend.
isClickable	boolean	false	Lets each entry toggle its series’ selection, driving the shared state read by every `<Radar />`.

Was this page helpful?

Composed Chart Composed charts that combine bars, lines, gradients, and interactive states

Pie Chart Pie and donut charts with gradients, labels, and glow effects

On This Page

Installation Usage Interactive Selection Loading State Examples Lines Variant Circle Grid Gradient Colors Glowing Radars Dither rendering API Reference

Radar Chart

Documentation Index

Installation

Usage

Interactive Selection

Loading State

Examples

Lines Variant

Circle Grid

Gradient Colors

Glowing Radars

Dither rendering

API Reference