||

Radial Chart

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Beautiful radial bar charts with full and semi-circle variants and gradient colors

apidocgithub
Basic Chart

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

Usage

The radial chart is composable. <EvilRadialChart> is the container, and every part hangs off it as a compound member — <EvilRadialChart.Legend>, <EvilRadialChart.Tooltip>, and a <EvilRadialChart.RadialBar> — so a single import gives you the whole chart. isClickable lives on <EvilRadialChart.RadialBar>, so styling and interactivity stay with the series.

import { EvilRadialChart } from "@/components/evilcharts/charts/recharts-radial-chart";
import { type ChartConfig } from "@/components/evilcharts/ui/recharts-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;
<EvilRadialChart data={data} nameKey="browser" config={chartConfig} variant="full">
  <EvilRadialChart.Legend isClickable />
  <EvilRadialChart.Tooltip />
  <EvilRadialChart.RadialBar dataKey="visitors" isClickable />
</EvilRadialChart>

Interactive Selection

Add isClickable to <EvilRadialChart.RadialBar> (and <EvilRadialChart.Legend>) to make bars selectable, then handle selection with the onSelectionChange callback on <EvilRadialChart>:

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

Loading State

isLoading='true'

Examples

Radial charts in different configurations. Customize variant, innerRadius, outerRadius, and more.

Semi-Circle Variant

variant='semi'

Gradient Colors

gradient colors

API Reference

The props below are grouped by the part they belong to.

EvilRadialChart

The root container. It owns the data, shared selection state, loading skeleton, and arc shape. Everything visual is composed as its children.

PropTypeDefaultDescription
data*TData[]–

Array of objects, one per radial bar (TData extends Record<string, unknown>).

config*ChartConfig–

Defines the chart's bars. Each key matches a value from your nameKey field, with its colors.

nameKey*keyof TData & string–

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

children*ReactNode–

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

classNamestring–

Extra CSS classes for the chart container.

variantfull|semi"full"

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 — a number (pixels) or percentage string.

outerRadiusnumber | string"100%"

Outer radius of the bars — 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 dataKey (bar name) and value (bar value), or null when deselected.

isLoadingbooleanfalse

Shows a placeholder animation while data loads.

backgroundVariantBackgroundVariant–

Background pattern shown behind the chart.

chartPropsComponentProps<typeof RadialBarChart>–

Props forwarded to the underlying Recharts RadialBarChart. See the Recharts RadialBarChart docs for options.

RadialBar

The radial bar series — each data row becomes one bar.

PropTypeDefaultDescription
dataKey*string–

Data key for bar values — the numbers that determine bar size.

cornerRadiusnumber5

Corner radius of each bar, in pixels.

barSizenumber14

Thickness of each bar, in pixels.

showBackgroundbooleantrue

Whether to render the background track (the unfilled portion of each bar).

isClickablebooleanfalse

Lets users click bars to select/deselect them. Unselected bars dim while a selection is active.

radialBarPropsOmit<ComponentProps<typeof RadialBar>, "dataKey">–

Props forwarded to the underlying Recharts RadialBar. See the Recharts RadialBar docs for options.

Tooltip

The hover tooltip, labeling each bar by name. Render it to show a tooltip; omit it for none.

PropTypeDefaultDescription
variantdefault|frosted-glass"default"

The tooltip's visual style.

roundnesssm|md|lg|xl"lg"

The tooltip's border-radius.

defaultIndexnumber–

Shows the tooltip by default at this data point index.

Legend

The bar legend. With isClickable, each entry toggles its bar's selection. Render it to show a legend; omit it for none.

PropTypeDefaultDescription
variant"square" | "circle" | "circle-outline" | "rounded-square" | "rounded-square-outline" | …–

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 its bar's selection, driving the shared state read by <RadialBar />.

Did you like the content?