Anatomy

Import the RadialChart component and access all parts using dot notation.

RadialChart is a subpath-only import (@heroui-pro/react/radial-chart) because it depends on the optional recharts peer. It is not exported from the package root, so SSR apps that don't use it never need recharts installed.

import {RadialChart} from "@heroui-pro/react/radial-chart";

<RadialChart>
  <RadialChart.AngleAxis />
  <RadialChart.Bar>
    <RadialChart.Cell />
  </RadialChart.Bar>
  <RadialChart.Tooltip />
</RadialChart>

Gauge

Gauge Grid

Progress Ring

With Legend

CSS Classes

Element Classes

.radial-chart — Root container wrapping ResponsiveContainer and the Recharts chart.

Recharts Theming

The following CSS rules target Recharts internal class names to apply HeroUI design tokens automatically:

.radial-chart .recharts-tooltip-cursor — Tooltip cursor. Hidden for radial charts.
.radial-chart .recharts-tooltip-wrapper — Tooltip wrapper. Elevated z-index to render above center content.
.radial-chart .recharts-radial-bar-background-sector — Bar background track. Uses the separator token for a subtle fill.

API Reference

RadialChart

The root wrapper. Renders a ResponsiveContainer + Recharts RadialBarChart with HeroUI CSS theming applied automatically.

Prop	Type	Default	Description
`data`	`Record<string, number \| string>[]`	—	Chart data — array of objects. Each entry becomes a concentric ring.
`height`	`number`	`300`	Chart height in pixels.
`width`	number \| `${number}%`	`"100%"`	Chart width in pixels or percentage string.
`barSize`	`number`	`10`	Bar thickness in pixels.
`innerRadius`	`number \| string`	`"30%"`	Inner radius of the bar area.
`outerRadius`	`number \| string`	`"80%"`	Outer radius of the bar area.
`startAngle`	`number`	`90`	Start angle in degrees.
`endAngle`	`number`	`-270`	End angle in degrees.
`children`	`ReactNode`	—	Recharts child components (`RadialChart.Bar`, `RadialChart.Cell`, etc.).