Skip to content
Get All-Access
Data & ChartsPro

Range Bar Chart

Range bar chart for a span per category — minimum to maximum, planned against actual, as dumbbells or as gradient bars.

Usage

Temperature

Range bar chart, 12 points from Jan to Dec. Range from 6 °C to 8 °C, lowest 6 °C, highest 30 °C.
Temperature range per month, data table
monthRange
Jan6 °C
Feb8 °C
Mar12 °C
Apr18 °C
May24 °C
Jun28 °C
Jul30 °C
Aug28 °C
Sep24 °C
Oct18 °C
Nov12 °C
Dec8 °C

Installation

Range Bar Chart comes with WunderUI Core and Pro, in the package from your plan. See the plans.

Then import what you need:

tsx
import {
  RangeBarChart,
  RangeBarChartProps,
  RangeBarChartVariant,
} from "@wunderui/react"

Examples

Vertical Range Bar

Temperature

Range bar chart, 12 points from Jan to Dec. Range from 6 °C to 8 °C, lowest 6 °C, highest 30 °C.
Temperature range per month, data table
monthRange
Jan6 °C
Feb8 °C
Mar12 °C
Apr18 °C
May24 °C
Jun28 °C
Jul30 °C
Aug28 °C
Sep24 °C
Oct18 °C
Nov12 °C
Dec8 °C

Horizontal Range Bar

Release plan

Range bar chart, 5 points from Design to Launch. Planned from Week 5 to Week 21, lowest Week 5, highest Week 21; Actual from Week 6 to Week 25, lowest Week 6, highest Week 25.
Release plan, data table
stagePlannedActual
DesignWeek 5Week 6
BuildWeek 9Week 10
ReviewWeek 13Week 17
QAWeek 17Week 21
LaunchWeek 21Week 25

Range Bar Dots

Temperature

Range bar chart, 12 points from Jan to Dec. Range from 6 °C to 8 °C, lowest 6 °C, highest 30 °C.
Temperature range per month, data table
monthRange
Jan6 °C
Feb8 °C
Mar12 °C
Apr18 °C
May24 °C
Jun28 °C
Jul30 °C
Aug28 °C
Sep24 °C
Oct18 °C
Nov12 °C
Dec8 °C

Gradient Range Bar

Temperature

Range bar chart, 12 points from Jan to Dec. Range from 6 °C to 8 °C, lowest 6 °C, highest 30 °C.
Temperature range per month, data table
monthRange
Jan6 °C
Feb8 °C
Mar12 °C
Apr18 °C
May24 °C
Jun28 °C
Jul30 °C
Aug28 °C
Sep24 °C
Oct18 °C
Nov12 °C
Dec8 °C

State – Loading

Temperature

Range bar chart, 12 points from Jan to Dec. Range from 6 °C to 8 °C, lowest 6 °C, highest 30 °C.

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Release Plan

Planned against actual weeks per stage.

Release plan

Planned against actual weeks per stage

Range bar chart, 5 points from Design to Launch. Planned from Week 5 to Week 21, lowest Week 5, highest Week 21; Actual from Week 6 to Week 25, lowest Week 6, highest Week 25.
Release plan, data table
stagePlannedActual
DesignWeek 5Week 6
BuildWeek 9Week 10
ReviewWeek 13Week 17
QAWeek 17Week 21
LaunchWeek 21Week 25

API Reference

PropTypeDefault
variant"vertical-range-bar" | "horizontal-range-bar" | "range-bar-dots" | "gradient-range-bar""vertical-range-bar"
ranges{ low, high, label?, color? }[][{ low: "min", high: "max" }]
state"ready" | "loading" | "empty" | "error""ready"
hiddenSeries · animate · animationKeystring[] · boolean · string | number—
data*readonly ChartDatum[]—
index*string—
activeIndexnumber | null—
animateboolean—
animationKeystring | number—
axisFormatterChartValueFormatter—
categoryAxisboolean—
categoryFormatter(label: string) => string—
categoryTicksreadonly string[]—
classNamestring—
defaultActiveIndexnumber | null—
defaultSelectedRangeChartRange | null—
descriptionstring—
emptyDescriptionstring—
emptyTitlestring—
errorDescriptionstring—
errorTitlestring—
gridboolean—
gridIntervalsnumber—
gridStyle"solid" | "dashed"—
heightnumber—
hiddenSeriesreadonly string[]—
includeZeroboolean—
labelstring—
onActiveIndexChange(index: number | null) => void—
onRetry() => void—
onSelectedRangeChange(range: ChartRange | null) => void—
rangeSelectableboolean—
selectedRangeChartRange | null—
tooltipboolean—
tooltipTitle(datum: ChartDatum, index: number) => React.ReactNode—
valueAxisboolean—
valueAxisSide"left" | "right"—
valueDomainreadonly [number, number]—
valueFormatterChartValueFormatter—
valueTicksreadonly number[]—
widthnumber—
PreviousRadial ChartNextRiver Chart