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
        )
    )