Reset Axis CustomTicks in LightningChartJS

Question

I'm attempting to reset custom calculated Ticks on an xAxis Element of a LightningChartJS ChartXY Object after a scaleChange event has been fired.

However, compared to the .net library, the JS API only seems to allow for adding new customTicks.

Replacing the current xAxis with a new one keeps triggering the onScaleChange event as well.

Answer 1

There is no built-in method to remove all custom ticks. To achieve the same you can collect all of your custom ticks to an array. Then when you want to remove the custom ticks you can call .dispose() method on all of the ticks which will remove the ticks from the axis. Then you can create new ticks.

See a sample below. In the sample I place custom ticks in interval of 2. All old ticks are removed before creating new ticks.

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

// Import data-generator from 'xydata'-library.
const {
    createProgressiveTraceGenerator
} = xydata

// Create a XY Chart.
const chart = lightningChart().ChartXY()

// Add a progressive line series.
const series = chart.addLineSeries({
    dataPattern: DataPatterns.horizontalProgressive
})

// Generate random progressive points using 'xydata'-library.
createProgressiveTraceGenerator()
    .setNumberOfPoints(100)
    .generate()
    .setStreamBatchSize(10)
    .toStream()
    .forEach(data => {
        series.add(data)
    })

// Get the default X and Y Axis
const xAxis = chart.getDefaultAxisX()
    .setScrollStrategy(AxisScrollStrategies.progressive)
const yAxis = chart.getDefaultAxisY()
    // Set the interval for Y Axis.
    .setInterval(-10, 10, true, true)

// collection for custom ticks
const customTicks = []

xAxis.onScaleChange((start, end) => {
    // remove old ticks
    customTicks.forEach(oldTick => oldTick.dispose())
    customTicks.length = 0

    // create new ticks
    let tickPlaceStart = start
    while (tickPlaceStart < end) {
        const tick = xAxis.addCustomTick()
        tick.setValue(tickPlaceStart)
        customTicks.push(tick)
        tickPlaceStart += 2
    }
})

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