Charts - Range Bar

Range bar charts highlight the range 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, and is commonly used for visualizing data like temperature ranges, project timelines, or performance intervals.

Basics

A range bar chart is created by rendering a BarChartPremium where at least one series has the type 'rangeBar'.

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

Customization

Grid

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

See Axis—Grid documentation for more information.

Border radius

A range bar chart supports rounded corners. To achieve it, set the value of the borderRadius prop on the BarChartPremium to any positive value.

When using composition, you can set the borderRadius prop on the RangeBarPlot component.

Color

As with other charts, you can modify the series color either directly, or with the color palette.

An alternative is to use a colorMap, which maps values to colors. The color set by colorMap has priority over other color settings.

You can learn more about the colorMap in the Styling docs.

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.

Click event

The click event handlers in range bar charts work similarly to bar charts.

You read more about it in bar chart's Click event page.

Animation

Animation in range bar charts works similarly to bar charts.

You read more about it in bar chart's Animation page.

Composition

You can use the ChartDataProviderPremium to provide series, xAxis, and yAxis props for composition.

Besides the common chart components available for composition, to compose a range bar chart you need to render the RangeBarPlot component to display the range bars and their labels.

Here's roughly a BarChartPremium is composed, which you can use as a reference:

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

In the example below, we follow a similar pattern and create a project schedule chart using range bars to represent task durations.

API

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

• <BarChartPremium />
• <ChartDataProviderPremium />
• <RangeBarPlot />