Way To Show Full Date Instead Of Just Hh:ss In LightningChart JS?

The above screenshot shows the zoomed out version where date is shownig full format but on zooming in it just shows time in hh:ss. The second screenshot shows the zoomed in versi

Solution 1:

When the DateTime AxisTickStrategy is created, you can supply it formatting options through the third parameter in the AxisTickStrategies.DateTime() call. This third parameter expects a Intl.DateTimeFormat options object to be provided to it.

Following the documentation of Intl.DateTimeFormat.options object properties. We can get the date and time to be always visible with

lightningChart().ChartXY({
    defaultAxisXTickStrategy: AxisTickStrategies.DateTime(
        undefined, 
        undefined,
        {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: 'numeric',
            minute: 'numeric'
        }
    )
})

You can pass undefined to the first and second parameter if you want to use the default values for those.

With that we can get a result that looks like the following screenshot:

When doing it this way the formatting will not change when zooming in, it will always stay the same. The formatting can be customized more by following the Intl.DateTimeFormat.options properties documentation.