Skip to main content

RadarChart

RadarChart

Multi-dimensional comparison across categories

Tags: chart comparison multivariate assessment spider

View Demo

The RadarChart (also known as spider or web chart) displays multivariate data on axes starting from the same point. It's excellent for comparing multiple entities across several dimensions, such as skill assessments, product comparisons, or performance metrics.

Reporting props marked Svelte only (valueFormat, showDataTable, exportable, reference lines, data zoom and so on) are available in @classic-homes/charts-svelte; React support is pending.

Import​

<script>
  import { RadarChart } from '@classic-homes/charts-svelte';
</script>
// React
import { RadarChart } from '@classic-homes/charts-react';

Basic Usage​

<script>
  import { RadarChart } from '@classic-homes/charts-svelte';

  const indicators = [
    { name: 'Sales', max: 6500 },
    { name: 'Administration', max: 16000 },
    { name: 'IT', max: 30000 },
    { name: 'Support', max: 38000 },
    { name: 'Development', max: 52000 },
  ];

  const data = {
    series: [
      { name: 'Budget', data: [4200, 3000, 20000, 35000, 50000] },
      { name: 'Actual', data: [5000, 14000, 28000, 26000, 42000] },
    ],
  };
</script>

<RadarChart title="Budget vs Actual" {data} {indicators} shape="polygon" height={400} />

Props​

Chart-Specific Props​

Prop Type Default Description
data RadarChartData required Chart data with series values
indicators RadarIndicator[] required Dimension definitions
shape 'polygon' | 'circle' 'polygon' Shape of the radar grid
showLabels boolean false Show data labels
labelFormatter string | ((params: LabelFormatterParams) => string) - Data label template or function
legend ChartLegendConfig - Built-in legend position, alignment, icon and formatter
onLegendChange (visible: Record<string, boolean>) => void - Called when legend items are shown or hidden
renderLegend Snippet<[LegendRenderProps]> - Custom HTML legend (e.g. ChartLegend) instead of the built-in one; React takes a function returning a node
onClick (params: DataPointEventParams) => void - Callback when a series is clicked

Inherited Base Props​

Prop Type Default Description
title string required Chart title for accessibility
height number | string 400 Chart height
theme 'light' | 'dark' | 'auto' 'auto' Theme preference
showLegend boolean true Show chart legend
showTooltip boolean true Show tooltip on hover
tooltipFormatter string | ((items: TooltipFormatterParams[]) => string) - Custom tooltip template or HTML function
tooltipValueFormatter (value: number) => string - Format values in the default tooltip
option EChartsOption - Raw ECharts option deep-merged over the generated one
description string - Optional description for screen readers
minHeight number - Minimum height in pixels; also bounds an 'auto' height
maxHeight number - Maximum height in pixels; also bounds an 'auto' height
loading boolean false Show loading skeleton; over existing data a loading overlay is shown instead (Svelte)
error string | null - Error message to display
onRetry () => void - Show a Retry button on the error state, calling this (Svelte only)
emptyMessage string - Message shown when data is empty
valueFormat ValueFormatPreset | Intl.NumberFormatOptions | ((value: number) => string) - How values are written in value axes, tooltips, labels and the data table: 'number', 'integer', 'compact', 'currency', 'currencyCents', 'percent', 'percentValue', 'days', Intl options or a function (Svelte only)
locale string 'en-US' Locale for valueFormat (Svelte only)
onReady (chart: EChartsType) => void - Called with the ECharts instance when it is created (Svelte only)
events Record<string, (params) => void> - Raw ECharts event handlers keyed by event name, e.g. datazoom (Svelte only)
showDataTable boolean | 'sr-only' 'sr-only' Render the data as a table: 'sr-only' for screen readers, true adds a visible "Show data" toggle, false for none (Svelte only)
exportable boolean | ChartExportConfig false Show PNG and CSV download buttons; or { image, csv, filename } (Svelte only)
patterns boolean false Fill series with decal patterns as well as colour, for colour-blind readers (Svelte only)
class string - Custom CSS class
animation boolean true Enable/disable animations (respects prefers-reduced-motion)
showGrid boolean - Show grid lines (where applicable)

Data Structure​

interface RadarChartData {
  series: Array<{
    name: string; // Series name for legend
    data: number[]; // Values for each indicator
    color?: string; // Optional custom color
  }>;
}

interface RadarIndicator {
  name: string; // Dimension name
  max: number; // Maximum value for this dimension
}

Examples​

Circle Shape​

<RadarChart title="Skill Assessment" {data} {indicators} shape="circle" />

Single Series​

<RadarChart
  title="Performance Metrics"
  data={{
    series: [{ name: 'Score', data: [80, 90, 70, 85, 95] }],
  }}
  indicators={[
    { name: 'Speed', max: 100 },
    { name: 'Quality', max: 100 },
    { name: 'Teamwork', max: 100 },
    { name: 'Innovation', max: 100 },
    { name: 'Communication', max: 100 },
  ]}
/>

Accessibility​

  • Title and indicators provide context for screen readers
  • Distinct colors for each series
  • Respects reduced motion preferences
On this page