Charts - Radial Bars 🧪

Use radial bar charts to compare values along periodic categories.

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 { Unstable_RadialBarChart as 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 rotation 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.