Skip to main content
Version: 7.1.2

Constant Line

Axis Constant Lines are components under ChartXY Axis, which users can create and control freely. They highlight a single coordinate on 1 axis by projecting a line across the whole chart.

Chart with constant lineChart with constant line

// Creation of an axis constant line
const constantLine = axis.addConstantLine()
    .setValue(5)

Stroke color​

constantLine.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​

Constant lines can be drawn either above series, or below series.

// constant line above series
const constantLine1 = axis.addConstantLine(true)
// constant line below series
const constantLine2 = axis.addConstantLine(false)

User interactions​

By default, ConstantLine 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:

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

Disable highlighting​

constantLine.setHighlightOnHover(false)

Dashed stroke​

constantLine.setStrokeStyle((stroke) => new DashedLine({
    fillStyle: stroke.getFillStyle(),
    thickness: stroke.getThickness(),
    pattern: StipplePatterns.Dashed,
}))