Scrolling to different direction

This section continues from Scrolling Axis](/6.1.2/features/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.addPointLineAreaSeries({ dataPattern: 'ProgressiveX' })
setInterval(() => {
    series.appendSample({ 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.addPointLineAreaSeries({ dataPattern: 'ProgressiveX' })
setInterval(() => {
    series.appendSample({ 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 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.addPointLineAreaSeries({ dataPattern: 'ProgressiveY' })
setInterval(() => {
    series.appendSample({ 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.addPointLineAreaSeries({ dataPattern: 'ProgressiveY' })
setInterval(() => {
    series.appendSample({ x: Math.random(), y: window.performance.now() })
}, 100)

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

• AreaRangeSeries

If your application would require this support, please don't hesitate to contact us](/6.1.2/contact).