Still have questions?
Contact support
You are looking at an outdated 7.3.0 version of this document. Switch to the 7.12.0 version to see the up to date information.

Range Line/Spline Area Chart

Overview

The Range Line/Spline Area charts displays a range of data by plotting two Y values per data point. Each Y value used is drawn as the upper, and lower bounds of an area.


Some data may look very nice and are easily understood in this form, in which an area spans a region from a minimum value to a maximum value.

Chart

As range area charts have to define lower and upper bound of area - you have to specify these two values in each column using "low" and "high" parameters.


Also "RangeLineArea" or "RangeSpineArea" series type should be specified.

chart.rangeArea([
        {low: 6.1, high: 0.7},
        {low: 6.3, high: 0.6},
        {low: 8.5, high: 1.9},
]);

Temperature Range Area Chart Sample

This sample shows how range s can be used to chart temperature averages, the data is taken from UK weather stations 1971-2000 averages statistics:

Configuration

Range area charts are configured and tuned almost the same way as usual Area charts.

So, to configure them we use rangeArea parameter that hold label and marker settings.


Here is the way of changing upper markers:

chart.rangeSplineArea([
        {x: "A", low:0, high: 100},
        {x: "B", low:100, high: 200},
        {x: "C", low:60, high: 200},
        {x: "D", low:0, high: 60}
]).markers().enabled(true);

Here is the result of application of these settings to the sample data: