JavaScript Chart Bands and Constant lines - Editor

Also known as Highlighters.

This example shows the basic usage of Bands and Constantlines in a XY Chart.

Bands and Constantlines are attached to the Axes of a XY Chart.
Bands and Constantlines can be interacted with mouse and touch controls.

Depending where you touch on the band, you can move either end of the Band separately by touching the edge of the Band, or you can move the entire Band by touching the center of the Band.

They can be easily added to an Axis:

// Add a Constantline to an Axis
const constantline = axis.addConstantLine()

//Add a Band to an Axis
const band = axis.addBand()

// By default, the Band and Constantline are placed above all Series in the Chart.
// They can also be placed below all Series by passing *true* as argument when creating one.
const constantLline = axis.addConstantLine(false)

const band = axis.addBand(false)

Positioning

The position of a Constantline can be set using the setValue() API:

// Set the position of a Constantline
constantline.setValue(50)

The position and size of a Band is set by using the setValueStart() and setValueEnd() API:

// Set the start value of a Band
band.setValueStart(20)
// Set the end value of a Band
band.setValueEnd(40)

Styling

Constantlines can be styled by using the setStrokeStyle() API:

// Style the Constantline
constantline.setStrokeStyle(
    new SolidLine({
        thickness: 5
        fillStyle: new SolidFill({
            color: ColorHEX('#fff')
        })
    })
)

Bands can be styled by using the setStrokeStyle() and setFillStyle() API accordingly:

// Style the Band border
band.setStrokeStyle(
    new SolidLine({
        thickness: 5
        fillStyle: new SolidFill({
            color: ColorHEX('#fff')
        })
    })
)
// Style the Band's fillStyle
band.setFillStyle(
    new SolidFill({
        color: ColorHEX('#fff')
    })
)