-1

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

enter image description here

Gracie williams
  • 1,287
  • 2
  • 16
  • 39

2 Answers2

3

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>
Snekw
  • 2,590
  • 1
  • 15
  • 24
  • HI , This draws on the chart , But I want to add it on the axis like constant line , I have multiple axis in single chart.. how do I add rectangleseries or segmentseries to different axis. – Gracie williams May 18 '21 at 19:24
  • You can specify the axis when creating the SegmentSeries. I have updated the answer to show that. – Snekw May 19 '21 at 09:13
  • Hi , how do we keep the segment series below all other line series , like we do in constantline ? – Gracie williams May 19 '21 at 20:46
  • To render the segment series under other series, you should add the segment series before other series. We are aware of some bugs that mean that it's not guaranteed to render in correct order. – Snekw May 20 '21 at 07:21
  • I just dispose and restore the line series.. to fix this bug... – Gracie williams May 20 '21 at 18:35
  • Any Idea when this will be fixed - https://stackoverflow.com/questions/62436901/linechart-z-index-in-lightningchart ? I tried with version 3 , still this bug is there. – Gracie williams May 20 '21 at 18:38
1

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.

terhoLCJS
  • 391
  • 2
  • 4