Skip to main content
Version: 8.3.2

Area Range

Area range series can fill sections between ranges of Y values.

Chart with area range seriesChart with area range series

// Creation of a area range series
const areaRangeSeries = chart.addAreaRangeSeries()

Adding data​

areaRangeSeries.add([
    { position: 0, low: 0, high: 10 },
    { position: 1, low: 2, high: 13 },
    { position: 2, low: 1, high: 6 },
    { position: 3, low: 4, high: 7 }
])

Styling​

areaRangeSeries
    .setLowFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
    .setLowStrokeStyle(new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorRGBA(0, 255, 0) }) }))
    .setHighFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
    .setHighStrokeStyle(new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorRGBA(0, 255, 0) }) }))

Using timestamps​

Timestamps must be inputted as UTC timestamps (number).

areaRangeSeries.appendSample({
    position: Date.now(),
    low: 0,
    high: 1
})

Connecting to non-default axis​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line