DateTime Axis Origin
This example shows the usage of Origin Date with DateTime Axis TickStrategy, for rendering XY-series where either or both of X/Y dimensions can present time.
In the example, both charts use the same data, with each point of data set to be an hour apart along the X Axis; What is different between the charts, is the origin for the DateTime TickStrategy used in the X Axis.
The top chart uses the default origin (January 1st, 1970), while the bottom chart uses a custom origin (set to current Date).
The origin-date can be specified to whichever DateTime is desired. It is done by passing a javascript Date object to the function that creates the DateTime TickStrategy:
// Define the origin-date. (y, m [0-11], d [1-31], h [0-23])
const originDate = new Date(2002, 0, 1, 13)
// Create DateTime AxisTickStrategy with specified originDate.
const dateTimeTickStrategy = AxisTickStrategies.DateTime(originDate)
// Create a chart
const chart = lightningChart().ChartXY({})
// Get the default X Axis
chart
.getDefaultAxisX()
// Set the Tick Strategy to use
.setTickStrategy(
AxisTickStrategies.DateTime,
// Use created DateTime AxisTickStrategy in the X Axis
(tickStrategy) => tickStrategy.setDateOrigin(dat1eTimeTickStrategy),
)
If this TickStrategy would be supplied to an X-Axis, it would effectively mean that its scale would start from 1st of January 2002 14PM, so a XY-point with coordinates { x: 0, y: 0 }
would be formated as { x: 1.1.2002 14:00, y: 0 }
.
It is worth mentioning that big DateTime-intervals can produce severe precision problems (eq. when zooming in). The only way to battle this is by reducing the distance of timestamps from the active origin-date.