||

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, gradient colors, and glow effects

apidocgithub
Basic Chart

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

Usage

The radial chart is composible. <EvilRadialChart> is the container, and you compose only the parts you need — <Legend>, <Tooltip>, and a <RadialBar> — as its children. The <RadialBar> carries its own glowingBars and isClickable, so styling and interactivity live with the series itself.

import {
  EvilRadialChart,
  RadialBar,
  Tooltip,
  Legend,
} from "@/components/evilcharts/charts/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;
<EvilRadialChart data={data} nameKey="browser" config={chartConfig} variant="full">
  <Legend isClickable />
  <Tooltip />
  <RadialBar dataKey="visitors" isClickable glowingBars={["chrome"]} />
</EvilRadialChart>

Interactive Selection

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

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

Loading State

isLoading='true'

Examples

Below are some examples of the radial chart with different configurations. You can customize the variant, innerRadius, outerRadius, and other properties.

Semi-Circle Variant

variant='semi'

Gradient Colors

gradient colors

Glowing Bars

glowingBars={['chrome', 'safari']}

API Reference

The chart is composed of several parts. The props below are grouped by the component they belong to.

EvilRadialChart

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

PropTypeDefaultDescription
data*TData[]–

Data used to display the chart. An array of objects where each object represents a radial bar (TData extends Record<string, unknown>).

config*ChartConfig–

Configuration object that defines the chart's bars. Each key should match a value from your nameKey field, with corresponding colors.

nameKey*keyof TData & string–

The key from your data objects to use for bar names (typically string values used for labels and the legend).

children*ReactNode–

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

classNamestring–

Additional CSS classes to apply to the chart container.

variantfull|semi"full"

The arc shape of the radial chart. "full" displays a full circle (360°), "semi" displays a half circle (180°).

innerRadiusnumber | string"30%"

The inner radius of the radial bars. Can be a number (pixels) or percentage string.

outerRadiusnumber | string"100%"

The outer radius of the radial bars. Can be a number (pixels) or percentage string.

defaultSelectedDataKeystring | nullnull

The bar name that should be selected by default.

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

Callback fired 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 loading placeholder animation when data is being fetched.

backgroundVariantBackgroundVariant–

Background pattern variant to display behind the chart.

chartPropsComponentProps<typeof RadialBarChart>–

Additional props forwarded to the underlying Recharts RadialBarChart component. Read the Recharts RadialBarChart documentation for available props.

RadialBar

The radial bar series. Each data row becomes one bar. It generates its own glow filter definitions, so glow effects never collide with other charts on the page.

PropTypeDefaultDescription
dataKey*string–

The key from your data objects to use for bar values (typically numeric values that determine bar size).

cornerRadiusnumber5

The border radius for the corners of each bar in pixels.

barSizenumber14

The thickness of each radial bar in pixels.

showBackgroundbooleantrue

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

isClickablebooleanfalse

Enables interactive clicking on bars to select/deselect them. Unselected bars dim while a selection is active.

glowingBarsstring[][]

Array of bar names (values from your nameKey field) that should have a glowing effect applied. Creates a smooth outer glow around the specified bars.

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

Additional props forwarded to the underlying Recharts RadialBar component. Read the Recharts RadialBar documentation for available props.

Tooltip

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

PropTypeDefaultDescription
variantdefault|frosted-glass"default"

Controls the visual style of the tooltip.

roundnesssm|md|lg|xl"lg"

Controls the border-radius of the tooltip.

defaultIndexnumber–

When set, the tooltip will be visible by default at the specified data point index.

Legend

The bar legend. When isClickable is set, each entry toggles selection of its bar. Render it to show a legend, omit it for none.

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

The visual style variant for 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 legend entry toggles selection of its bar, driving the shared selection state read by <RadialBar />.

Did you like the content?