Skip to main content
Version: 6.1.2

Band

Axis Bands are components under ChartXY Axis, which users can create and control freely. They highlight a value range (start, end) on 1 axis by projecting a rectangle across the whole chart.

Chart with band Chart with band

// Creation of an axis band
const band = axis.addBand()
    .setValueStart(2)
    .setValueEnd(5)

Fill color​

band.setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))

For more details about style API, please see Styles, colors and fonts](/6.1.2/more-guides/styles-colors-and-fonts).

Border stroke​

band.setStrokeStyle(new SolidLine({
    thickness: 1,
    fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) }) 
}))

For more details about style API, please see Styles, colors and fonts](/6.1.2/more-guides/styles-colors-and-fonts).

Draw order​

Bands can be drawn either above series, or below series.

// band above series
const band1 = axis.addBand(true)
// band below series
const band2 = axis.addBand(false)

User interactions​

By default, Band has built-in user interactions that allow user to move the band around. These can be disabled or configured with setUserInteractions method. Please see API reference for more details.

Custom user interactions​

Custom user interactions can be implemented using the Events API:

band.addEventListener('click', event => {
    console.log('user clicked band', event)
})

Disable highlighting​

band.setHighlightOnHover(false)