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?
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()}`)
)