Radial Chart

Use a radial chart for compact progress, completion, or categorical magnitude displays where the circular form supports the surrounding interface. Use a bar chart when readers need precise comparisons.

RadialChart owns the data, configuration, geometry, selection, and loading state. RadialBar defines the measured series, while optional Legend and Tooltip parts provide labels and detail.

Canvas charts need a nearby text summary or data table when the exact values are important. Show the measured values in text and pair every ring color with a visible label.

Our radial chart is composable. <RadialChart> is the container, and every part hangs off it as a compound member, <RadialChart.Legend>, <RadialChart.Tooltip>, and a <RadialChart.RadialBar>, so a single import gives you the whole chart. <RadialBar> carries its own isClickable, so styling and interactivity live with the series.

import { RadialChart, type ChartConfig } from "honestui/charts";

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;

<RadialChart data={data} nameKey="browser" config={chartConfig} variant="full">
  <RadialChart.Legend isClickable />
  <RadialChart.Tooltip />
  <RadialChart.RadialBar dataKey="visitors" isClickable />
</RadialChart>

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 Honest UI 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.

Interactive Selection

Add isClickable to <RadialBar> (and <Legend>) to make bars selectable. Handle selection with the onSelectionChange callback on <RadialChart>:

<RadialChart
  data={data}
  nameKey="browser"
  config={chartConfig}
  onSelectionChange={(selection) => {
    if (selection) {
      console.log("Selected:", selection.dataKey, "Value:", selection.value);
    } else {
      console.log("Deselected");
    }
  }}
>
  <RadialChart.Legend isClickable />
  <RadialChart.Tooltip />
  <RadialChart.RadialBar dataKey="visitors" isClickable />
</RadialChart>

Loading State

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

Semi-Circle Variant

Gradient Colors

The chart is composed of several parts; the props below are grouped by part. On canvas each part is declarative config the root compiles.

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.