Radial Bar Chart

Recharts
Loading...

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/radial-bar-chart

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

chart

Manual installation

Install the chart dependencies, then copy the component source into your project.

npm install recharts react-aria-components

Usage

Use a single series with nameKey when each row is a category. The component then assigns each category a color from config or the default palette.

<RadialBarChart
  data={data}
  dataKey="visitors"
  nameKey="device"
  series={[{ dataKey: "visitors", name: "Visitors" }]}
  config={{
    Desktop: { label: "Desktop" },
    Mobile: { label: "Mobile" },
  }}
/>

For concentric metrics, place the metrics in one data row and add an entry to series and config for each numeric field.

Examples

Multiple series

Render several metrics as concentric bars. A selectable legend is enabled automatically for multiple series.

Loading...

Custom colors

Use category keys in config to control the color of every bar in a single-series chart.

Loading...

Gauge

Set the start and end angles, add a background track, and provide custom children to build a compact progress gauge.

Loading...

Component API

RadialBarChart

RadialBarChart extends the native <div> element and composes the Intent UI <Chart> component.

angleAxisPropsComponentProps<typeof PolarAngleAxis>
chartPropsOmit<ComponentProps<typeof RadialBarChartPrimitive>, "data">
childrenReactNode
classNamestring
colorsreadonly string[]
Default: DEFAULT_COLORS
configChartConfig
containerHeightnumber
Default: 360
dataRecord<string, any>[]
dataKeystring
legendBaseChartProps["legend"]
Default: series.length > 1
legendPropsBaseChartProps["legendProps"]
nameKeystring
seriesRadialBarChartSeries[]
tooltipboolean | ComponentProps<typeof ChartTooltip>["content"]
Default: true
tooltipPropsOmit<ComponentProps<typeof ChartTooltip>, "content">

See the Recharts RadialBarChart API reference for primitive-specific options.

RadialBarChartSeries

dataKeystring
namestring
radialBarPropsOmit<ComponentProps<typeof RadialBar>, "dataKey" | "name">
Design
Radar Chart