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.

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.