Range Area Chart

What is a range area chart?

ApexCharts range area charts visualize a shaded band between a low value and a high value over time or across categories. Common uses include temperature spreads, salary bands, confidence intervals, and stock price high/low ranges.

To render a range area chart, set chart.type: 'rangeArea' in the configuration.

Where a normal area chart fills the space between a baseline and one value per point, a range area fills the space between two values per point. The band's thickness is the range, so it reads as uncertainty, spread, or volatility rather than as a quantity.

When should you use a range area chart?

Use a range area when	Use something else when
Every point genuinely has a low and a high, and the spread between them is the point	Each point has a single value, where an area or line chart is simpler
The bounds are continuous across the axis, so a connected band makes sense	Each item occupies a discrete span with gaps between items, which is rangeBar
You want to overlay an actual value inside its expected band, such as a forecast against a confidence interval	The two bounds belong to unrelated series and should not be visually joined
Bands may overlap and the overlap itself is informative, such as two cities' temperature ranges	You need to read exact endpoints, where a box plot or candlestick marks them explicitly

A range area is at its best when the reader should absorb the shape of a spread over time. It is at its weakest when they need to look up a precise number, because two edges of a translucent band are harder to read against an axis than a single line is.

Range area vs range bar

Both take a low and a high value per point, so the choice is about whether the axis is continuous or categorical:

	Range area (rangeArea)	Range bar (rangeBar)
Shape	One connected band across the axis	One separate bar per item
Axis	Continuous: time, or an ordered sequence	Categorical: one row per task, person, or item
Reads as	How a range evolves	Where each item starts and ends
Typical use	Temperature spreads, confidence intervals, high/low price bands	Timelines and schedules, where each bar is a duration
Gaps between items	Not meaningful, the band is continuous	Meaningful, gaps are real time between spans

If you are building a project timeline where each row is a task with a start and an end, rangeBar is the type you want, not this one. If you are showing how a minimum and maximum moved over a period, you are in the right place.

Data Format

Each data point uses the { x, y } format where y is a two-element array: [low, high].

series: [{
  name: 'New York Temperature',
  data: [
    { x: 'Jan', y: [-2,  4] },
    { x: 'Feb', y: [-1,  6] },
    { x: 'Mar', y: [3,  10] },
    { x: 'Apr', y: [8,  16] },
    { x: 'May', y: [13, 22] }
  ]
}]

Complete example: monthly temperature ranges

The example below shows temperature ranges for two cities. Each shaded band spans from the monthly low to the monthly high.

<div id="chart"></div>

<script>
var options = {
  series: [
    {
      name: 'New York',
      data: [
        { x: 'Jan', y: [-2,  4] },
        { x: 'Feb', y: [-1,  6] },
        { x: 'Mar', y: [3,  10] },
        { x: 'Apr', y: [8,  16] },
        { x: 'May', y: [13, 22] },
        { x: 'Jun', y: [18, 28] }
      ]
    },
    {
      name: 'Los Angeles',
      data: [
        { x: 'Jan', y: [9,  18] },
        { x: 'Feb', y: [10, 19] },
        { x: 'Mar', y: [11, 20] },
        { x: 'Apr', y: [13, 22] },
        { x: 'May', y: [15, 24] },
        { x: 'Jun', y: [18, 27] }
      ]
    }
  ],
  chart: {
    type: 'rangeArea',
    height: 350
  },
  xaxis: {
    type: 'category'
  },
  yaxis: {
    title: {
      text: 'Temperature (°C)'
    }
  },
  tooltip: {
    shared: true
  }
};

var chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
</script>

Combining a range area with a line chart

ApexCharts supports mixed chart types. You can overlay a line series (such as a median or average) on top of a range area band to show the central value within the spread. Declare each series with its own type property and set the top-level chart.type to 'rangeArea'.

series: [
  {
    name: 'Temperature Range',
    type: 'rangeArea',
    data: [
      { x: 'Jan', y: [-2,  4] },
      { x: 'Feb', y: [-1,  6] },
      { x: 'Mar', y: [3,  10] },
      { x: 'Apr', y: [8,  16] },
      { x: 'May', y: [13, 22] }
    ]
  },
  {
    name: 'Average',
    type: 'line',
    data: [
      { x: 'Jan', y: 1 },
      { x: 'Feb', y: 2 },
      { x: 'Mar', y: 6 },
      { x: 'Apr', y: 12 },
      { x: 'May', y: 17 }
    ]
  }
]

The type on each series overrides the top-level chart.type for that series only. The range area provides the band; the line marks the midpoint.

Live demos

See the full collection of range area chart examples in the Range Area Chart demos.