Range Area Chart

Range Area Chart is an extension of the standard area chart. It looks like a standard area chart but with an added visual representation of the range between the minimum and maximum values. They can be utilized to display ranges such as high and low stock prices over a specific time period, the maximum and minimum temperatures for different regions, or the minimum and maximum salaries in a company.

When plotting a range area chart, you need to set chart.type: 'rangeArea' in the configuration.

Data Format

The data format for range-area is slightly different than other charts. ApexCharts assumes that your data is in the range format as given in the below example.

xy Format

The xy format accepts [{ x: category, y: [Start, End] }].

[ { 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] }, ] } ]

Combining a line chart with a range area chart.

You can use create a combo chart and create a low/median/high values visualization by including a line insight range area chart. Below is such an example