Skip to main content
Version: 5.2.1

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 bandChart 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.

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.

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 with setDefaultMouseInteractions:

// Disable default user interactions
band.setDefaultMouseInteractions(false)

Custom user interactions​

Custom user interactions can be implemented using the Events API:

band.onMouseClick((_, event) => {
    console.log('user clicked band', event)
})

Disable highlighting​

band.setHighlightOnHover(false)