Way to show full date instead of just hh:ss in LightningChart JS?

Question

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 version Is there any way to show full date on legend in Zoomed In version ? Please Help

Answer 1

Update for LightningChart JS v3.4.0

LightningChart JS v3.4.0 has more options available for DateTimeTickStrategy axis formatting. It's now possible to set different formatting for each "level" of ticks.

const formatting = {year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric'}

chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime, (styler)=>
    styler.setDateOrigin(dateOrigin)
        .setFormattingDay(formatting, formatting, formatting)
        .setFormattingDecade(formatting, formatting, formatting)
        .setFormattingHour(formatting, formatting, formatting)
        .setFormattingMilliSecond(formatting, formatting, formatting)
        .setFormattingMinute(formatting, formatting, formatting)
        .setFormattingMonth(formatting, formatting, formatting)
        .setFormattingSecond(formatting, formatting, formatting)
        .setFormattingWeek(formatting, formatting, formatting)
        .setFormattingYear(formatting, formatting, formatting)
)

---

Old LightningChart JS v1.3.1 answer

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.