Skip to content
🚀 Influence MUI's 2026 roadmap! Take our latest Developer Survey
+

Charts - Range Bar

Use range bar charts to show the span between minimum and maximum values across categories.

Overview

A range bar chart displays the span between two values for each category.

Each bar extends from a lower to an upper value. This chart type works well for visualizing data like temperature ranges, project timelines, or performance intervals.

Basics

To create a range bar chart, render BarChartPremium with at least one series of type 'rangeBar'.

Each data point in a range bar series consists of a { start: number, end: number } object.

Average monthly temperature ranges in °C for Porto and Berlin in 1991-2020

  • Porto, Portugal
  • Berlin, Germany
MUI X Expired package version
Source: IPMA (Porto), climate-data.org (Berlin)

Customization

Grid

You can add a grid in the background of the chart with the grid prop.

See Axis—Grid for details.

Border radius

To achieve rounded corners, set the borderRadius prop on BarChartPremium to any positive value.

When composing a custom component, set the borderRadius prop on the RangeBarPlot component.

Border Radius

MUI X Expired package version
<BarChartPremium
  // ...
  borderRadius={10}
/>

Color

You can set series colors for individual series or use the color palette.

Use a colorMap to map values to colors. The color set by colorMap has priority over other color settings.

See Styling—Value-based colors for more details on colorMap.

MUI X Expired package version
<BarChart
  /* ... */
  xAxis={[{
    colorMap: {
      type: 'piecewise',
      thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)],
      colors: ['blue', 'red', 'blue'],
    }
  }]}
/>

CSS

You can customize the range bar chart elements using CSS selectors.

Like a bar chart, each series renders a g element that contains a data-series attribute. You can use this attribute to target elements based on their series.

MUI X Expired package version
Press Enter to start editing

Click event

The click event handlers work similarly to bar charts. See Bars—Click events for details.

  • A
  • B
MUI X Expired package version

Click on the chart

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

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

Animation

Animation works similarly to bar charts. See Bars—Animation for details.

  • series 1
  • series 2
MUI X Expired package version

Number of items

Number of series

Composition

Use ChartDataProviderPremium to provide series, xAxis, and yAxis props for composition.

In addition to the shared chart components available for composition, you can render the RangeBarPlot component to display the range bars and their labels.

The example below shows how BarChartPremium is composed:

<ChartsDataProviderPremium>
  <ChartsWrapper>
    <ChartsLegend />
    <ChartsSurface>
      <ChartsGrid />
      <g clipPath={`url(#${clipPathId})`}>
        <BarPlot />
        <RangeBarPlot />
        <ChartsOverlay />
        <ChartsAxisHighlight />
        <FocusedBar />
        <FocusedRangeBar />
      </g>
      <ChartsAxis />
      <ChartsClipPath id={clipPathId} />
    </ChartsSurface>
    <ChartsTooltip />
  </ChartsWrapper>
</ChartsDataProviderPremium>

The example below follows a similar pattern and creates a project schedule chart using range bars to represent task durations.

Phases 1-3: Planning & Initial Construction
Phases 4-8: Major Construction
Phase 9: Finalization & Closeout
MUI X Expired package version

API

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