Radar Chart

The ECharts radar chart is composable, sharing the Recharts twin's API shape. <EChartsRadarChart> is the container, and every part hangs off it as a compound member — <EChartsRadarChart.PolarGrid>, <EChartsRadarChart.PolarAngleAxis>, <EChartsRadarChart.PolarRadiusAxis>, <EChartsRadarChart.Legend>, <EChartsRadarChart.Tooltip>, and one or more <EChartsRadarChart.Radar> — so a single import gives you the whole chart. Each <Radar> carries its own variant and isClickable, so one chart can mix fill styles and make only some series interactive.

import { EChartsRadarChart, type ChartConfig } from "@/components/evilcharts/charts/echarts-radar-chart";

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;
 
<EChartsRadarChart data={data} config={chartConfig}>
  <EChartsRadarChart.PolarGrid />
  <EChartsRadarChart.PolarAngleAxis dataKey="skill" />
  <EChartsRadarChart.Legend />
  <EChartsRadarChart.Tooltip />
  <EChartsRadarChart.Radar dataKey="desktop" variant="filled">
    <EChartsRadarChart.Dot variant="colored-border" />
    <EChartsRadarChart.ActiveDot variant="default" />
  </EChartsRadarChart.Radar>
  <EChartsRadarChart.Radar dataKey="mobile" variant="filled" />
</EChartsRadarChart>

The difference from the Recharts twin is under the hood: these compound children are declarative configuration slots rather than visual React DOM nodes. The root reads their props and compiles an ECharts option, which ECharts paints with Canvas by default or SVG when renderer="svg".

The config is the same contract as every EvilCharts chart — each key maps a data key to a label and a per-theme colors array. See Chart Config for the full shape. Colors resolve from your CSS variables at runtime, so dark mode just works.

SVG Renderer

Pass renderer="svg" to the chart root to opt into ECharts' SVG renderer. Omit it to use the default Canvas renderer.

Interactive Selection

Set isClickable on a <Radar> to make it selectable by click, and on <Legend> to let entries toggle selection. React to changes with the root's onSelectionChange callback:

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

Loading State

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

Radar charts with different configurations.

Lines Variant

Circle Grid

Gradient Colors

The radar chart is a root container plus composable parts. Regardless of renderer, each part is declarative config the root compiles, but the API mirrors the Recharts twin. Each is documented below.

The root container. It owns the data, shared selection state, loading skeleton, and intro reveal. Everything visual is composed as children and compiled into the ECharts option.

A single radar series — one polygon across every angle-axis category. Each <Radar /> carries its own fill and clickability, so a chart can hold many radars styled independently. Compose <Dot /> and <ActiveDot /> inside for vertex markers.

Vertex markers composed inside a <Radar />. <Dot /> is the resting marker; <ActiveDot /> is the hovered marker. They render nothing on their own — the parent <Radar /> reads their variant.

The polar grid — the concentric rings and the radial spokes. Its presence draws the grid; omit it and no grid lines render.

The angular category axis — the labels around the chart's perimeter. Its presence shows the labels; omit it and they hide. Hidden automatically while the chart is loading.

The radial value axis — the scale running from the center outward. Its presence shows the scale labels; omit it and they hide. Hidden automatically while the chart is loading. It takes no props.

The hover tooltip. Its presence enables the tooltip; omit it and none shows. The tooltip is item-triggered — it shows the hovered series and its value at each category, and dims its content when another series is selected.

The series legend, rendered as HTML above the chart surface. Its presence enables the legend; omit it and none shows. When isClickable is set, each entry toggles selection of its series. Hidden automatically while the chart is loading.