Search code examples
javascriptlightningchart

Repainting line serie with updated data on scale change

I have a line serie, let's call it duration. Duration should render at the bottom om the chart, whatever the bottom is based on 15 other line series in the chart. So basically I'm only really interested in the x-value of duration.

My idea is to update the y values of the data serie for duration whenever the scale changes. Find the minimum scale value and use that as y-value in the serie.

Se the red line in the image: enter image description here

However, I can not get this to work. Whenever I update the line series in the eventhandler for onScaleChange the data gets updated but the line does not render, or re-render.

Here's a simplification of how I've implemented the event. Assuming there are already a couple of line series with y-values between 300 and 600 I expect the durationSerie to ultimately render at y=300

const durationData = [{x: 17, y: 0}, {x: 18, y: 0}]
const durationSerie = lightningChart
  .addLineSeries()
  .add(durationData);

axisY.onScaleChange((start, end) => {
  const newData = durationData.map(data => ({x: data.x, y: start}));
  durationSerie
     .clear()
     .add(newData);
}

The line renders at y=0 until onScaleChange is run. Then it disappears (because I run the clear()command). The durationSerie still reports minY and maxY correctly when logged (it report the value corresponding to start).

I have tried to run other commands on the durationSerie, like setting a new stroke color. That all works fine as long as I do not run the clear() command, and of course the line is still displayed at y=0.

Is there another event I need to implement?

Solution

  • Tested this with latest version @arction/[email protected] and seemed to work as expected. Here's the migrated code:

    const durationData = [{x: 17, y: 0}, {x: 18, y: 0}]
const durationSerie = lightningChart().ChartXY()
  .addLineSeries()
  .add(durationData);

durationSerie.axisY.onIntervalChange((_, start, end) => {
  const newData = durationData.map(data => ({x: data.x, y: start}));
  durationSerie
     .clear()
     .add(newData);
})

    You can paste it into one of our online examples to test it https://lightningchart.com/lightningchart-js-interactive-examples/edit/lcjs-example-0017-largeLineChartXY.html

    Not sure what is actually causing issue on your end.