JavaScript Area Range Chart

Also known as a Area Graph, Area Chart or Range Area Chart

The example shows the basic usage of an Area Range series. The Range Area Chart is similar to the Area series, which is plotted by shading the area between a range of values ( high & low ) represented by two curves of data.

Range charts are generally used to show variations (low & high) simultaneously in the given period. Typical visualization applications use this type of graph shows temperature, price etc.

The series uses two fill styles, which can be configured individually, the identical behavior is applicable for borders:

  • the normal fill is used when High is greater than Low
  • the reversed fill is used when Low is greater than High
// Create a new ChartXY.
const chart = lightningChart().ChartXY()

// Add an area series with bipolar direction using default X and Y axes.
const areaRange = chart.addAreaRangeSeries()

The series accepts AreaPoint type of points either as an object in format { position: number, high: number, low: number },

series.add({ position: 20, high: 45, low: -20 })

or via a factory that should be additionally imported.

series.add(AreaPoint(20, 45, -20))

Any number of points can be added with a single call.

// Single point.
series.add({ position: 20, high: 45, low: -20 })

// Multiple points at once.
series.add([
    { position: 20, high: 45, low: -20 },
    { position: 40, high: 95, low: 10 },
    { position: 60, high: 25, low: 60 },
])