React chart example
Range bar chart
Show a span between a low and a high value for each category.
What is a range bar chart?
A range bar chart draws a bar from a start value to an end value rather than from a baseline, so the bar represents an interval — a minimum and a maximum, a first and a last, a start date and an end date.
When to use it
Use it for spans: price ranges, salary bands, project durations, or the distance a value travelled over a period. Use a dumbbell chart instead when the two endpoints are two named series rather than the edges of one range.
Design tips
Sort by the start of the range, or by its width when the width is the point.
Label both ends when the numbers matter; a bar alone only shows relative position.
Avoid rounding the bar ends so far that short ranges lose their edges.
Build this chart in React
Compare with
Use when endpoints are two named measures rather than interval bounds.
Use when every value should extend from a common zero baseline.
Graphy Chart SDK
Add Graphy’s range bar charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.