Radial Chart
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
Radial bar charts with full and semi-circle variants and gradient colors, powered by Apache ECharts
Installation
Usage
The ECharts radial chart is composible, sharing the Recharts twin's API shape. <EChartsRadialChart> is the container, and every part hangs off it as a compound member — <EChartsRadialChart.Legend>, <EChartsRadialChart.Tooltip>, and a <EChartsRadialChart.RadialBar> — so a single import gives you the whole chart. <RadialBar> carries its own isClickable, so styling and interactivity live with the series.
import { EChartsRadialChart, type ChartConfig } from "@/components/evilcharts/charts/echarts-radial-chart";const data = [
{ browser: "chrome", visitors: 275 },
{ browser: "safari", visitors: 200 },
{ browser: "firefox", visitors: 187 },
];
const chartConfig = {
chrome: {
label: "Chrome",
colors: { light: ["#3b82f6"], dark: ["#60a5fa"] },
},
safari: {
label: "Safari",
colors: { light: ["#10b981"], dark: ["#34d399"] },
},
firefox: {
label: "Firefox",
colors: { light: ["#f59e0b"], dark: ["#fbbf24"] },
},
} satisfies ChartConfig;<EChartsRadialChart data={data} nameKey="browser" config={chartConfig} variant="full">
<EChartsRadialChart.Legend isClickable />
<EChartsRadialChart.Tooltip />
<EChartsRadialChart.RadialBar dataKey="visitors" isClickable />
</EChartsRadialChart>The one real difference is under the hood: ECharts renders each ring as a polar bar series on a <canvas>, so these children never mount as DOM. The root reads their props and compiles them into the ECharts option — same JSX, same presence semantics (omit a part and it doesn't render), same behavior, just declarative config instead of live DOM nodes.
The config is the same contract as every EvilCharts chart — each key matches a nameKey value and maps it 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.
Canvas rendering brings a few small departures from the Recharts twin: multi-color bars use a diagonal canvas gradient (visually equivalent), and corner rounding becomes a rounded cap on each ring's ends.
Interactive Selection
Add isClickable to <RadialBar> (and <Legend>) to make bars selectable. Handle selection with the onSelectionChange callback on <EChartsRadialChart>:
<EChartsRadialChart
data={data}
nameKey="browser"
config={chartConfig}
onSelectionChange={(selection) => {
if (selection) {
console.log("Selected:", selection.dataKey, "Value:", selection.value);
} else {
console.log("Deselected");
}
}}
>
<EChartsRadialChart.Legend isClickable />
<EChartsRadialChart.Tooltip />
<EChartsRadialChart.RadialBar dataKey="visitors" isClickable />
</EChartsRadialChart>Loading State
Pass the isLoading prop to show an animated skeleton of shimmering rings while your data loads.
Examples
Radial chart examples with different configurations. Customize variant, innerRadius, outerRadius, and more.
Semi-Circle Variant
Set variant="semi" for a half-circle chart — useful for progress or gauges in a compact space.
Gradient Colors
API Reference
The chart is composed of several parts; the props below are grouped by part. On canvas each part is declarative config the root compiles, but the API mirrors the Recharts twin one-to-one.
The root container. It owns the data, shared selection state, loading skeleton, and chart-wide arc shape. Everything visual is composed as children and compiled into the ECharts option.
The radial bar series. Each data row becomes one concentric ring. Its presence renders the bars; omit it and only the background (if any) shows.
The hover tooltip, labeling each bar by name. Its presence enables the tooltip; omit it and none shows. Hidden automatically while loading.
The bar legend, rendered as HTML alongside the canvas. Its presence enables the legend; omit it and none shows. With isClickable, each entry toggles selection of its bar.