JavaScript Microseconds Line Chart

This example shows how to display high-resolution data - for example, measurements in microseconds precision.

When displaying high-resolution data there is a need to do some scaling to the data before adding it to a series.
LightningChart JS Axis is limited by floating point precision so when using really small or really large values there is a need to scale the values to be closer to 0.

const dataScaleX = 1 * Math.pow(1000, 3) // 1 us
const renderData = (data) => {
    // Add data.
    lineSeries.add(data.map((p) => ({ x: p.x * dataScaleX, y: p.y })))
}

When the data is scaled closer to 0 then the LightningChart JS Axis is able to function properly but the values shown in the auto-cursor would be incorrect as it would show the scaled value, not the original. This can be fixed by setting a formatting function to the axis tick strategy.

lineSeries.axisX.setTickStrategy(AxisTickStrategies.Numeric, (strategy) =>
    strategy
        // Format ticks with units.
        .setFormattingFunction((timeScaled) => Math.round(timeScaled) + ' μs'),
)

Alternatively if the original value would be preferred then the scaling could be undone.

lineSeries.axisX.setTickStrategy(AxisTickStrategies.Numeric, (strategy) =>
    strategy.setFormattingFunction((timeScaled) => timeScaled / dataScaleX),
)