Padding In right Side while Scrolling in Lightningchart

Question

Below is the Chart I have created , I want to adding padding on right side while the dynamic chart is scrolling horizontally.

This is my code that updates data to chart

setInterval(function(){updateChart()}, 100); 
var updateChart = function () {        
if(xVal > 160) return false;
chart.getDefaultAxisX().setInterval(xVal-100, xVal+2)
yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
series.add({ x: xVal, y: yVal})
seriestwo.add({ x: xVal, y: yVal+500})
xVal++;
// update chart after specified time. 
};

On every update I am calling this line to achieve what I need now.

chart.getDefaultAxisX().setInterval(xVal-100, xVal+2)

This is somewhat shaking the chart and not smooth , How do I actually add padding , I was checking all documentation , but not found anything.

You guys can play around here - https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0150-ecg.html

score 0 · Answer 1 · answered Apr 29 '20 at 11:05

There is currently no built in support to have padding to the scrolling.

What you have tried to do can be used to achieve the desired result it just needs some slight changes.

The shaking comes from the chart trying to do scrolling on the new data based on scroll strategy. To disable the chart from trying to scroll the chart, you can set the scroll strategy to undefined. chart.getDefaultAxisX().setScrollStrategy(undefined) this only needs to be done once while setting up the chart. https://www.arction.com/lightningchart-js-api-documentation/v1.3.0/classes/axis.html#setscrollstrategy

With that change the chart is no longer shaking but the scrolling isn't smooth. To get smooth scrolling you can add a third argument to the setInterval call. This argument controls if the scrolling should be animated or not, setting it to true will animate the changing interval and result in smoother scrolling. https://www.arction.com/lightningchart-js-api-documentation/v1.3.0/classes/axis.html#setinterval

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    DataPatterns,
    AxisScrollStrategies,
    SolidLine,
    SolidFill,
    ColorHEX,
    AutoCursorModes
} = lcjs

// Import data-generators from 'xydata'-library.
// Create a XY Chart.
const chart = lightningChart().ChartXY()

// Add line series to visualize the data received
const series = chart.addLineSeries()
const seriestwo = chart.addLineSeries()

chart.getDefaultAxisX()
    .setScrollStrategy(undefined)
    // remove this line if you would prefer to animate the initial x axis interval
    .setInterval(-100, 20, false)

let xVal = 0
let yVal = 0
setInterval(function () { updateChart() }, 100);
var updateChart = function () {
    if (xVal > 160) return false;
    chart.getDefaultAxisX().setInterval(xVal - 100, xVal + 20, true)
    yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
    series.add({ x: xVal, y: yVal })
    seriestwo.add({ x: xVal, y: yVal + 500 })
    xVal++;
    // update chart after specified time. 
};

<script src="https://unpkg.com/@arction/lcjs@1.3.0/dist/lcjs.iife.js"></script>

Padding In right Side while Scrolling in Lightningchart

1 Answers1