Progressive xAxis - Timed Interval

Question

Is there a way to make an XY lightning chart move its xAxis at a set interval?

Scenario: I currently have an XY chart that's tied to a process that emits data every second. The chart updates correctly, but the xAxis moves over very quickly and then pauses until the next event. I'm hoping to make this more of a smooth process between each second interval.

I've worked with Apex charts in the past and here's an example that shows the xAxis gradually being added: https://apexcharts.com/javascript-chart-demos/line-charts/realtime/

Is there a way to make lightningcharts act in this same manner?

Answer 1

By default the axis scrolling is either instantaneous or animated (in rather snappy manner). The animation speed is not customizable.

If you want to replicate this scrolling behavior then you would have to 1) disable automatic scrolling and 2) animate each step of the axis scrolling manually.

Automatic scrolling is disabled with Axis.setScrollStrategy

Axis interval can be set with Axis.setInterval

Below is a code snippet which you can run right here in your browser to see how it looks and also reference in your own application.

const {
  lightningChart
} = lcjs

const chart = lightningChart().ChartXY()
const series = chart.addLineSeries({dataPattern: {pattern: 'ProgressiveX'}})
const axisX = chart.getDefaultAxisX()
   // Disable automatic scrolling
   .setScrollStrategy(undefined)
   // Default axis mouse interactions can't be used while scrolling is maintained manually
   .setMouseInteractions(false)
const xIntervalSize = 100

const addData = (yValues) => {
   series.addArrayY(yValues)
}

// Setup real-time data streaming every 1 seconds.
setInterval(() => {
   const newYValues = new Array(10).fill(0).map(_ => Math.random())
   addData(newYValues)
}, 1000)

// Animate x axis scrolling manually.
const xStepPerFrame = 
  // New points count per 1 second
  10 /
  // 60 frames per second (axis is stepped every frame for smoothness)
  60

const stepAxisX = () => {
  const xCur = axisX.getInterval().end
  const xMax = series.getXMax()
  const xNext = Math.min(xCur + xStepPerFrame, xMax)
  if (xNext !== xCur) {
     axisX.setInterval(xNext - xIntervalSize, xNext)
  }
  requestAnimationFrame(stepAxisX)
}
stepAxisX()

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