Charts - Radial Bars

Use radial bar charts to compare values along periodic categories.

Overview

Radial bar charts plot values in polar coordinates, with each bar growing along the radius from a shared center. This circular layout reads naturally for periodic or cyclic data—months, hours of the day, or compass directions—and offers a compact display for medium-sized bar datasets that would stretch a straight axis.

The chart below compares average trust in others (people aged 16 and over) across Europe between 2013 and 2025.

2025 trust

2013 trust

Trust increased

Trust fell

Basics

The RadialBarChart is similar to the BarChart but uses polar coordinates. The xAxis and yAxis being replaced by the rotationAxis and radiusAxis.

Temperature
Temperature
Temperature

Common display options

The radial bar chart accepts the same display options as the bar chart:

stack: Series with same stack property get stacked on top of each other.
layout: Swap the axis used to represent values. By default ('vertical') the radius represents the values. With layout='horizontal' the rotation represents the values.
categoryGapRatio and barGapRatio can be used on the band axis to control the gap between categories and between bars within a category.

The demo below demonstrates those options.

Netflix balance sheet

Total Assets
Total Liabilities
Total Equity

import { RadialBarChart } from '@mui/x-charts-premium/RadialBarChart';

<RadialBarChart
  // ...
  series={[
    { dataKey: 'totAss', layout: 'vertical' },
    { dataKey: 'totLia', layout: 'vertical', stack: 'passive' },
    { dataKey: 'totEq', layout: 'vertical', stack: 'passive' },
  ]}
  rotationAxis={[
    {
      scaleType: 'band',
      data: ['2020', '2021', '2022', '2023'],
      categoryGapRatio: 0.3,
      barGapRatio: 0.1,
    },
  ]}
/>

Playground

layout

stack

categoryGapRatio

barGapRatio

Click events

The RadialBarChart provides an onAxisClick handler that fires when the user clicks anywhere in the chart area. Its signature matches the bar chart:

const clickHandler = (
  event, // The native mouse event emitted by the SVG component.
  params, // An object that identifies the clicked axis item and its series values.
) => {};

Click on the chart

// Data from axis click
// The data will appear here

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.