javascriptlightningchart

Can we format AxisTickStrategies.Time to show the Date as well at the beginning of the graph?


Specifically the use case I am looking for is I have a list of timestamps on my X Axis and a list of Numeric values on Y axis. I want the X Axis formatting to show the Date and the Time, I was able to get this working with AxisTickStrategies.DateTime using the following code however was restricted by Zooming only till second accuracy.


const originDate = new Date();

chart.getDefaultAxisX()
        .setTitle('Timestamp')
        .setTickStrategy(AxisTickStrategies.DateTime, ticks => ticks
        .setGreatTickStyle(emptyTick)
        .setFormattingSecond(
            undefined,
            { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true },
            (x) => 'minor'
        )
        .setDateOrigin(originDate)
    )

Since I need millisecond accuracy I tried using AxisTickStrategies.Time but I am unable to display both date and time with this.

Is there a way to display both Date and Time on the x Axis while also having zooming accuracy upto milliseconds?


Solution

  • Currently it seems like DateTime has a hard limitation not going down to milliseconds accuracy, and on the other hand Time which is meant for this range doesn't have a way to customize formatting.

    It might seem counter-intuitive but maybe the best work around at this time is to use Numeric ticks and format text as date-time.

    chart.getDefaultAxisX().setTickStrategy(
        AxisTickStrategies.Numeric,
        (ticks) => ticks
            .setFormattingOffset(originDate.getTime())
            .setFormattingFunction((x) => `${new Date(x).toLocaleDateString()}`)
    )