Scrolling to different direction

This section continues from Scrolling Axis.

LightningChart JS Axes can be configured to scroll in any direction, left, right, up and down. Here you can find examples of each direction.

Scrolling left -> right

// Minimal example showcasing left -> right scrolling
const chart = lightningChart().ChartXY()
const axisX = chart.getDefaultAxisX()
const axisY = chart.getDefaultAxisY()

axisX
    .setTickStrategy(AxisTickStrategies.Time)
    .setScrollStrategy(AxisScrollStrategies.progressive)
    .setInterval({ start: 0, end: 5000, stopAxisAfter: false })
const series = chart.addLineSeries({ dataPattern: { pattern: 'ProgressiveX' } })
setInterval(() => {
    series.add({ x: window.performance.now(), y: Math.random() })
}, 100)

Scrolling right -> left

Changing scrolling to go from right to left is as easy as reversing the X axis interval (start <-> end), see difference in Axis.setInterval().

// Minimal example showcasing right -> left scrolling
const chart = lightningChart().ChartXY()
const axisX = chart.getDefaultAxisX()
const axisY = chart.getDefaultAxisY()

axisX
    .setTickStrategy(AxisTickStrategies.Time)
    .setScrollStrategy(AxisScrollStrategies.progressive)
    .setInterval({ start: 5000, end: 0, stopAxisAfter: false })
const series = chart.addLineSeries({ dataPattern: { pattern: 'ProgressiveX' } })
setInterval(() => {
    series.add({ x: window.performance.now(), y: Math.random() })
}, 100)

Scrolling up -> down

Vertical scrolling is also straightforward:

• Apply scrolling axis configurations setScrollStrategy, setInterval on Y axis instead of X.
• Change line series data pattern from 'ProgressiveX' to 'ProgressiveY'.
• Change line series cursor basis to 'nearest-x' (default is 'nearest-x').
• Change actual incoming data to have time dimension in Y coordinates rather than X.

// Minimal example showcasing up -> down scrolling
const chart = lightningChart().ChartXY()
const axisX = chart.getDefaultAxisX()
const axisY = chart.getDefaultAxisY()

axisY
    .setTickStrategy(AxisTickStrategies.Time)
    .setScrollStrategy(AxisScrollStrategies.progressive)
    .setInterval({ start: 0, end: 5000, stopAxisAfter: false })
const series = chart.addLineSeries({ dataPattern: { pattern: 'ProgressiveY' } })
    .setCursorSolveBasis('nearest-y')
setInterval(() => {
    series.add({ x: Math.random(), y: window.performance.now() })
}, 100)

Scrolling down -> up

Similarly as when reversing from right to left, going from down direction to up direction is as easy as reversing the Y axis interval (start <-> end), see change in Axis.setInterval().

// Minimal example showcasing down -> up scrolling
const chart = lightningChart().ChartXY()
const axisX = chart.getDefaultAxisX()
const axisY = chart.getDefaultAxisY()

axisY
    .setTickStrategy(AxisTickStrategies.Time)
    .setScrollStrategy(AxisScrollStrategies.progressive)
    .setInterval({ start: 5000, end: 0, stopAxisAfter: false })
const series = chart.addLineSeries({ dataPattern: { pattern: 'ProgressiveY' } })
    .setCursorSolveBasis('nearest-y')
setInterval(() => {
    series.add({ x: Math.random(), y: window.performance.now() })
}, 100)

There are some XY series that currently don't support other data patterns than 'ProgressiveX', namely:

• AreaSeries
• AreaRangeSeries
• StepSeries
• SplineSeries

If your application would require this support, please don't hesitate to contact us.