Draw lines from one X-axis to another X-axis - lightningchart

Question

I want to draw line from one x-axis to another x-axis , is it possible ?
Right now I can see only constant line is there , but its drawing horizontal line in full page.
const axis = chart.getDefaultAxisX();
const line = axis.addConstantLine(false).setMouseInteractions(false);
Is there any other way to do it like with rectangle ? or do you guys have any plan to do that via constant line in future ?
I have attached example image below

Answer 1

If I have understood your question correctly you want to draw a line from one X axis value to another X axis value on the same axis.
This can be done by using ChartXY.addSegmentSeries(). This series type allows you to draw individual line segments from Point A to Point B. Each segment can be configured individually. See the API Documentation for configuration specifics: https://www.arction.com/lightningchart-js-api-documentation/v3.0.0/classes/segmentfigure.html
To achieve a line from X = 30 to X = 70 you need to first create a new SegmentSeries if you don't already have one.
You can specify the X (or/and Y) axis for the SegmentSeries when creating the series. chart.addSegmentSeries({xAxis: axisX1})
const axisX1 = chart.addAxisX()
// create series
const lineSegment = chart.addSegmentSeries({
xAxis: axisX1
})
// optionally disable cursor and mouse interactions
.setCursorEnabled(false)
.setMouseInteractions(false)
Then you can create a new line on the series
lineSegment.add({
startX: 30,
endX: 70,
startY: 0.2,
endY: 0.2
})
.setStrokeStyle(stroke => stroke.setFillStyle(fill => fill.setColor(ColorHEX('#0f0a'))))
This would create semi-transparent green line from {x: 30, y: 0.2} to {x: 70, y: 0.2}.
You can create as many lines as you need just by calling lineSegment.add() again with new startX/Y and endX/Y values.
Alternatively if you would like to have a rectangle on the chart instead of line you can add a new RectangleSeries. And add a new rectangle on that series.
const axisX2 = chart.addAxisX()
const rectSeries = chart.addRectangleSeries({
xAxis: axisX2
})
.setMouseInteractions(false)
.setCursorEnabled(false)
rectSeries.add({
x1: 30,
x2: 70,
y1: 0.3,
y2: 0.7,
})
.setFillStyle(f => f.setColor(ColorHEX('#f00a')))
See below for a working example with both line and rectangle.
// Extract required parts from LightningChartJS.
const {
lightningChart,
Themes,
UIElementBuilders,
UIBackgrounds,
ColorHEX,
SolidFill
} = lcjs
// Import data-generator from 'xydata'-library.
const {
createProgressiveRandomGenerator
} = xydata
const chart = lightningChart().ChartXY()
const axisX1 = chart.getDefaultAxisX()
const axisX2 = chart.addAxisX()
const axisX3 = chart.addAxisX({
opposite: true
})
const series = chart.addLineSeries()
chart.getDefaultAxisX().setInterval(0, 100, false, true)
chart.getDefaultAxisY().setInterval(0, 1, false, true)
createProgressiveRandomGenerator()
.setNumberOfPoints(100)
.generate()
.toPromise()
.then(data => {
series.add(data)
})
const rectSeries = chart.addRectangleSeries({
xAxis: axisX2
})
.setMouseInteractions(false)
.setCursorEnabled(false)
rectSeries.add({
x1: 30,
x2: 70,
y1: 0.3,
y2: 0.7,
})
.setFillStyle(f => f.setColor(ColorHEX('#f00a')))
const lineSegment = chart.addSegmentSeries({
xAxis: axisX3
})
.setCursorEnabled(false)
.setMouseInteractions(false)
lineSegment.add({
startX: 30,
endX: 70,
startY: 0.2,
endY: 0.2
})
.setStrokeStyle(stroke => stroke.setFillStyle(fill => fill.setColor(ColorHEX('#0f0a'))))
lineSegment.add({
startX: 40,
endX: 90,
startY: 0.2,
endY: 0.1
})
.setStrokeStyle(stroke => stroke.setFillStyle(fill => fill.setColor(ColorHEX('#fffa'))))
<script src="https://unpkg.com/#arction/lcjs#3.0.0/dist/lcjs.iife.js"></script>
<script src="https://unpkg.com/#arction/xydata#1.4.0/dist/xydata.iife.js"></script>

Answer 2

You can use the Axis Band to draw a rectangle which will work similar to the constant line.
const axis = chart.getDefaultAxisX()
const band = axis.addBand()
You can set both the constant line and band to be either on top of all the Series in the chart, or below all Series in the chart, by supplying the onTop: boolean parameter when creating one.
You can set the start and end values of the Band with the Band.setValueStart() and Band.setValueEnd() methods respectively.
For example:
band.setValueStart(100)
band.setValueEnd(200)
This would set the Band cover the range from 100 to 200.
If you have mouse interactions enabled for the band (which is on by default), users can also click and drag the band from its edges to resize it.
The full API documentation for band can be found here.