Optional values: Iterable<[string, unknown]> | Partial<DateTimeTickStrategyProperties>Readonly cursorCursor formatter.
This controls the date time formatting used by:
TickStrategy.Axis.formatValue method of the Axis which uses this TickStrategy.undefined means to use default date time cursor formatting.
// Example value, cursor formatter to display week day, year, month, day, hour and minute.
cursorFormatter: (value, range, locale) =>
new Date(value).toLocaleDateString(locale, {
weekday: 'long',
year: 'numeric',
month: 'numeric',
day: 'numeric',
minute: '2-digit',
hour: '2-digit',
})
Readonly dateOptional "origin date" value.
By default data-points are interpreted as UTC dates (milliseconds since January 1st 1970 GMT+0). If a dateOrigin is defined, data-points will instead be interpreted as milliseconds since dateOrigin.
Readonly formatFormatter options for great ticks that are placed on relevant day intervals.
Readonly formatFormatter options for great ticks that are placed on relevant hour intervals.
Readonly formatFormatter options for great ticks that are placed on relevant minute intervals.
Readonly formatFormatter options for great ticks that are placed on relevant month intervals.
Readonly formatFormatter options for great ticks that are placed on relevant second intervals.
Readonly formatFormatter options for great ticks that are placed on relevant week intervals.
Readonly formatFormatter options for great ticks that are placed on relevant year intervals.
Readonly formatFormatter options for major ticks that are placed on relevant century intervals.
Readonly formatFormatter options for major ticks that are placed on relevant day intervals.
Readonly formatFormatter options for major ticks that are placed on relevant decade intervals.
Readonly formatFormatter options for major ticks that are placed on relevant hour intervals.
Readonly formatFormatter options for major ticks that are placed on relevant millisecond intervals.
Readonly formatFormatter options for major ticks that are placed on relevant minute intervals.
Readonly formatFormatter options for major ticks that are placed on relevant month intervals.
Readonly formatFormatter options for major ticks that are placed on relevant second intervals.
Readonly formatFormatter options for major ticks that are placed on relevant week intervals.
Readonly formatFormatter options for major ticks that are placed on relevant year intervals.
Readonly formatFormatter options for minor ticks that are placed on relevant day intervals.
Readonly formatFormatter options for minor ticks that are placed on relevant decade intervals.
Readonly formatFormatter options for minor ticks that are placed on relevant hour intervals.
Readonly formatFormatter options for minor ticks that are placed on relevant millisecond intervals.
Readonly formatFormatter options for minor ticks that are placed on relevant minute intervals.
Readonly formatFormatter options for minor ticks that are placed on relevant month intervals.
Readonly formatFormatter options for minor ticks that are placed on relevant second intervals.
Readonly formatFormatter options for minor ticks that are placed on relevant week intervals.
Readonly formatFormatter options for minor ticks that are placed on relevant year intervals.
Readonly greatStyle of Great ticks.
To disable great ticks, set to emptyTick.
NOTE: Label alignment is overridden, and has no effect on this property.
Readonly localeValid javascript Date locale string, that specifies a geographical, political or cultural region.
undefined passes the decision making to the browser.
For example values, refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
Readonly majorStyle of Major ticks.
Major ticks can't be disabled (via emptyTicks), because TickLevel style doesn't support emptyTicks, and Major tick level must exist for Minor tick positioning.
Readonly minorStyle of Minor ticks.
To disable minor ticks, set to emptyTick.
Get cursor formatter of this DateTimeTickStrategy object.
FormattingFunction as set by user, or undefined to indicate that the default date time cursor formatting is configured.
Get the dateOrigin of this DateTimeTickStrategy object.
By default data-points are interpreted as UTC dates (milliseconds since January 1st 1970 GMT+0). If a dateOrigin is defined, data-points will instead be interpreted as milliseconds since dateOrigin.
A JavaScript Date object or undefined.
Get locale of this DateTimeTickStrategy object.
The locale specifies a geographical, political or cultural region, affecting all formatting of Tick labels.
JavaScript Date locale string, that specifies a geographical, political or cultural region.
Set cursor formatter for this DateTimeTickStrategy object.
This will override the date time formatting used by:
TickStrategy.Axis.formatValue method of the Axis which uses this TickStrategy. // Example syntax, specify cursor formatting to display week day, year, month, day, hour and minute.
Axis.setTickStrategy(AxisTickStrategies.DateTime, (ticks) => ticks
.setCursorFormatter((value, range, locale) =>
new Date(value).toLocaleDateString(locale, {
weekday: 'long',
year: 'numeric',
month: 'numeric',
day: 'numeric',
minute: '2-digit',
hour: '2-digit',
})
)
)
New DateTimeTickStrategy object.
FormattingFunction or undefined to use default date time cursor formatting.
Construct a new DateTimeTickStrategy object based on this one, but with modified dateOrigin.
By default data-points are interpreted as UTC dates (milliseconds since January 1st 1970 GMT+0). If a dateOrigin is defined, data-points will instead be interpreted as milliseconds since dateOrigin.
Specifying a dateOrigin can be necessary in applications where there is a long range of date-time data, and high resolution zooming is desired.
Example usage:
Application with one day of high-density data starting in year 2020:
// Without specifying a dateOrigin, zooming will be limited to minutes with this range.
// Milliseconds resolution can be reached by setting the dateOrigin to a Date
// that is closer to the actual data (instead of the default 1.1.1970).
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setDateOrigin( new Date( 2020, 0, 1 ) )
)
Check our DateTime Axis Interactive Example for a more thorough example on DateTime TickStrategy usage: https://lightningchart.com/lightningchart-js-interactive-examples/examples/lcjs-example-0020-dateTimeAxis.html
New DateTimeTickStrategy object.
A JavaScript Date object or undefined.
Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:
Example usage:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setFormattingDay(
{ year: 'numeric', month: 'long' },
{ day: '2-digit' },
{ hour: '2-digit', minute: '2-digit' }
)
)
The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.
For more detailed example usage, refer to DateTimeFormatter.
New DateTimeTickStrategy object.
Formatting options for great ticks.
Formatting options for major ticks
Formatting options for minor ticks.
Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:
Example usage:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setFormattingDecade(
{ year: 'numeric' },
{ year: 'numeric' }
)
)
The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.
For more detailed example usage, refer to DateTimeFormatter.
New DateTimeTickStrategy object.
Formatting options for major ticks
Formatting options for minor ticks.
Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:
Example usage:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setFormattingHour(
{ year: 'numeric', month: 'long', day: '2-digit' },
{ hour: '2-digit', minute: '2-digit' },
{ hour: '2-digit', minute: '2-digit' }
)
)
The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.
For more detailed example usage, refer to DateTimeFormatter.
New DateTimeTickStrategy object.
Formatting options for great ticks.
Formatting options for major ticks
Formatting options for minor ticks.
Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:
Example usage:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setFormattingMilliSecond(
{ year: 'numeric', month: 'long', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' },
( value ) => new Date( value ).getUTCMilliseconds()
)
)
The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.
For more detailed example usage, refer to DateTimeFormatter.
New DateTimeTickStrategy object.
Formatting options for great ticks.
Formatting options for major ticks
Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:
Example usage:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setFormattingMinute(
{ year: 'numeric', month: 'long', day: '2-digit' },
{ hour: '2-digit', minute: '2-digit' },
{ hour: '2-digit', minute: '2-digit', second: '2-digit' }
)
)
The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.
For more detailed example usage, refer to DateTimeFormatter.
New DateTimeTickStrategy object.
Formatting options for great ticks.
Formatting options for major ticks
Formatting options for minor ticks.
Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:
Example usage:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setFormattingMonth(
{ year: 'numeric' },
{ month: 'long' },
{ day: '2-digit' }
)
)
The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.
For more detailed example usage, refer to DateTimeFormatter.
New DateTimeTickStrategy object.
Formatting options for great ticks.
Formatting options for major ticks
Formatting options for minor ticks.
Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:
Example usage:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setFormattingSecond(
{ year: 'numeric', month: 'long', day: '2-digit', hour: '2-digit', minute: '2-digit' },
{ hour: '2-digit', minute: '2-digit', second: '2-digit' },
( value ) => new Date( value ).getUTCMilliseconds(),
)
)
The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.
For more detailed example usage, refer to DateTimeFormatter.
New DateTimeTickStrategy object.
Formatting options for great ticks.
Formatting options for major ticks
Optional minorTickFormattingOptions: DateTimeFormatterFormatting options for minor ticks
Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:
Example usage:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setFormattingWeek(
{ year: 'numeric', month: 'long' },
{ day: '2-digit' },
{ day: '2-digit' }
)
)
The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.
For more detailed example usage, refer to DateTimeFormatter.
New DateTimeTickStrategy object.
Formatting options for great ticks.
Formatting options for major ticks
Formatting options for minor ticks.
Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:
Example usage:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setFormattingYear(
{ year: 'numeric' },
{ month: 'short' }
)
)
The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.
For more detailed example usage, refer to DateTimeFormatter.
New DateTimeTickStrategy object.
Formatting options for major ticks
Formatting options for minor ticks.
Construct a new DateTimeTickStrategy object based on this one, but with modified great tick style.
Great ticks display the largest Date/Time information for the active time range. There is always exactly one great tick in view.
Example usage:
Disable great ticks:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setGreatTickStyle( emptyTick )
)
Set font of great ticks:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setGreatTickStyle(( tickStyle: VisibleTicks ) => tickStyle
.setLabelFont(( font ) => font
.setWeight( 'bold' )
)
)
)
New DateTimeTickStrategy object.
Either a TickStyle object or a function, which creates a new one based on the existing style.
Construct a new DateTimeTickStrategy object based on this one, but with modified locale.
The locale specifies a geographical, political or cultural region, affecting all formatting of Tick labels.
All valid values can be found from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
Example usage:
Use locale of browser:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setLocale( undefined )
)
Use specific locale:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setLocale('en-US')
)
New DateTimeTickStrategy object.
Valid JavaScript Date locale string, that specifies a geographical, political or cultural region. All valid values can be found from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
Construct a new DateTimeTickStrategy object based on this one, but with modified major tick style.
Major ticks display the next smaller Date/Time information after Great ticks. Often times, they represent the most important information.
Example usage:
Set font of major ticks:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setMajorTickStyle(( tickStyle ) => tickStyle
.setLabelFont(( font ) => font
.setWeight( 'bold' )
)
)
)
New DateTimeTickStrategy object.
Either a VisibleTicks object or a function, which creates a new one based on the existing style.
Construct a new DateTimeTickStrategy object based on this one, but with modified minor tick style.
Minor ticks display the next smaller Date/Time information after Major ticks.
Example usage:
Disable minor ticks:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setMinorTickStyle( emptyTick )
)
Set font of minor ticks:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setMinorTickStyle(( tickStyle ) => tickStyle
.setLabelFont(( font ) => font
.setWeight( 'bold' )
)
)
)
New DateTimeTickStrategy object.
Either a TickStyle object or a function, which creates a new one based on the existing style. Passing a function only works if the existing style is not emptyTick.
Axis Tick Strategy that is designed for depicting date and time.
Axis values are interpreted as UNIX timestamps similarly as with JavaScript Date API.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
Axis interval ranges supported by
DateTImeTickStrategy:1000).For reaching Axis ranges smaller than 1 second, TimeTickStrategy is recommended.
Note, that available axis interval ranges can be also limited by the type of Axis, refer to Axis documentation for more information.
Axis tick strategy is selected with setTickStrategy method:
All configuration of automatically created ticks is done using the callback from
setTickStrategy, see example below for the idea:All available strategies for automatic Axis ticks creation can be referenced via AxisTickStrategies.