||

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

apidocgithub
Basic Chart

Installation
npx shadcn@latest add @evilcharts/echarts-radial-chart

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 difference is under the hood: these compound children are declarative configuration slots rather than visual React DOM nodes. The root reads their props and compiles each ring into an ECharts polar bar series, which ECharts paints with Canvas by default or SVG when renderer="svg".

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.

SVG Renderer

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

renderer="svg"

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

isLoading='true'

Examples

Radial chart examples with different configurations. Customize variant, innerRadius, outerRadius, and more.

Semi-Circle Variant

variant='semi'

Gradient Colors

gradient colors

API Reference

The chart is composed of several parts; the props below are grouped by part. Regardless of renderer, each part is declarative config the root compiles, but the API mirrors the Recharts twin one-to-one.

EChartsRadialChart

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.

PropTypeDefaultDescription
data*TData[]–

The chart data. An array of objects, each representing one radial bar (TData extends Record<string, unknown>).

config*ChartConfig–

Defines the chart's bars. Each key matches a nameKey value, with a label and a per-theme colors array. Same contract as every EvilCharts chart — see Chart Config.

nameKey*keyof TData & string–

Data key used for bar names (string values for labels and the legend).

children*ReactNode–

The composed chart parts — <Legend />, <Tooltip />, and a <RadialBar />.

classNamestring–

Additional CSS classes for the chart container.

renderercanvas|svg"canvas"

Rendering engine used by ECharts. Use "svg" for an SVG-backed chart surface; omit the prop to keep the Canvas default.

variantfull|semi"full"

The chart's arc shape. "full" is a full circle (360°); "semi" is a half circle (180°).

maxnumber–

Value a full sweep represents. Without it the scale is derived from the data, so the largest bar always fills the arc — set it (e.g. 100) for gauges, where a single value has to read against a fixed total.

innerRadiusnumber | string"30%"

Inner radius of the bars, as a number (pixels) or percentage string.

outerRadiusnumber | string"100%"

Outer radius of the bars, as a number (pixels) or percentage string.

defaultSelectedDataKeystring | nullnull

Bar name selected by default.

onSelectionChange(selection: { dataKey: string; value: number } | null) => void–

Fires when a bar is selected or deselected by clicking a clickable <RadialBar /> or <Legend /> entry. Receives an object with dataKey (bar name) and value (bar value), or null when deselected.

isLoadingbooleanfalse

Shows a placeholder animation while data loads.

backgroundVariantBackgroundVariant–

Decorative background pattern behind the chart ("dots", "grid", "cross-hatch", and more).

chartOptionsRecord<string, unknown>–

Escape hatch merged over the underlying ECharts option. See the ECharts option documentation.

RadialBar

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.

PropTypeDefaultDescription
dataKey*string–

Data key used for bar values (numbers that set each bar's arc length).

cornerRadiusnumber5

The corner rounding for each bar. ECharts maps this to a rounded cap on the bar's ends — pass 0 for square ends.

barSizenumber14

Thickness of each bar, in pixels.

showBackgroundbooleantrue

Renders the background track (the unfilled portion of each bar).

isClickablebooleanfalse

Lets bars be clicked to select/deselect them. Unselected bars dim while a selection is active.

Tooltip

The hover tooltip, labeling each bar by name. Its presence enables the tooltip; omit it and none shows. Hidden automatically while loading.

PropTypeDefaultDescription
variantdefault|frosted-glass"default"

Visual style of the tooltip surface.

roundnesssm|md|lg|xl"lg"

Border-radius of the tooltip.

defaultIndexnumber–

Shows the tooltip by default at this data point index.

positionfixed|variable"variable"

How the tooltip is anchored. "variable" lets it follow the pointer (the default). "fixed" pins the tooltip near the top of the chart and only tracks the pointer's X.

Legend

The bar legend, rendered as HTML alongside the chart surface. Its presence enables the legend; omit it and none shows. With isClickable, each entry toggles selection of its bar.

PropTypeDefaultDescription
variantsquare|circle|circle-outline|rounded-square|rounded-square-outline|vertical-bar|horizontal-bar–

Visual style of the legend indicators.

alignleft|center|right"center"

Horizontal placement of the legend.

verticalAligntop|middle|bottom"bottom"

Vertical placement of the legend.

isClickablebooleanfalse

When enabled, each entry toggles selection of its bar, driving the shared selection state read by <RadialBar />.

Did you like the content?