Returns a new instance of this Record type with all values set to their default values.
Returns a new instance of this Record type with the value for the specific key set to its default value.
Returns the value associated with the provided key, which may be the default value defined when creating the Record factory function.
If the requested key is not defined by this Record type, then notSetValue will be returned if provided. Note that this scenario would produce an error when using Flow or TypeScript.
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 great tick style of this DateTimeTickStrategy object.
Great ticks display the largest Date/Time information for the active time range. There is always exactly one great tick in view.
Great tick style.
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.
Get major tick style of this DateTimeTickStrategy object.
Major ticks display the next smaller Date/Time information after Great ticks. Often times, they represent the most important information.
Major tick style.
Get minor tick style of this DateTimeTickStrategy object.
Minor ticks display the next smaller Date/Time information after Major ticks.
Minor tick style.
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',
})
)
)
FormattingFunction
or undefined
to use default date time cursor formatting.
New DateTimeTickStrategy object.
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
A JavaScript Date object or undefined.
New DateTimeTickStrategy object.
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.
Formatting options for great ticks.
Formatting options for major ticks
Formatting options for minor ticks.
New DateTimeTickStrategy object.
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.
Formatting options for major ticks
Formatting options for minor ticks.
New DateTimeTickStrategy object.
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.
Formatting options for great ticks.
Formatting options for major ticks
Formatting options for minor ticks.
New DateTimeTickStrategy object.
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.
Formatting options for great ticks.
Formatting options for major ticks
New DateTimeTickStrategy object.
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.
Formatting options for great ticks.
Formatting options for major ticks
Formatting options for minor ticks.
New DateTimeTickStrategy object.
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.
Formatting options for great ticks.
Formatting options for major ticks
Formatting options for minor ticks.
New DateTimeTickStrategy object.
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.
Formatting options for great ticks.
Formatting options for major ticks
Formatting options for minor ticks
New DateTimeTickStrategy object.
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.
Formatting options for great ticks.
Formatting options for major ticks
Formatting options for minor ticks.
New DateTimeTickStrategy object.
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.
Formatting options for major ticks
Formatting options for minor ticks.
New DateTimeTickStrategy object.
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' )
)
)
)
Either a TickStyle object or a function, which creates a new one based on the existing style.
New DateTimeTickStrategy object.
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')
)
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
New DateTimeTickStrategy object.
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' )
)
)
)
Either a VisibleTicks object or a function, which creates a new one based on the existing style.
New DateTimeTickStrategy object.
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' )
)
)
)
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.
New DateTimeTickStrategy object.
Deeply converts this Record to equivalent native JavaScript Object.
Note: This method may not be overridden. Objects with custom serialization to plain JS may override toJSON() instead.
Shallowly converts this Record to equivalent native JavaScript Object.
Shallowly converts this Record to equivalent JavaScript Object.
Note: Not all methods can be used on a mutable collection or within
withMutations
! Only set
may be used mutatively.
Unlike other types in Immutable.js, the Record()
function creates a new
Record Factory, which is a function that creates Record instances.
See above for examples of using Record()
.
Note: Record
is a factory function and not a class, and does not use the
new
keyword during construction.
Records allow passing a second parameter to supply a descriptive name that appears when converting a Record to a string or in any error messages. A descriptive name for any record can be accessed by using this method. If one was not provided, the string "Record" is returned.
const { Record } = require('immutable')
const Person = Record({
name: null
}, 'Person')
var me = Person({ name: 'My Name' })
me.toString() // "Person { "name": "My Name" }"
Record.getDescriptiveName(me) // "Person"
True if maybeRecord
is an instance of a Record.
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 Axis.setTickStrategy method:
Axis.setTickStrategy(AxisTickStrategies.DateTime, (dateTimeTicks) => dateTimeTicks)
All configuration of automatically created ticks is done using the callback from
setTickStrategy
, see example below for the idea:// Specify TickStrategy and use callback to style automatic ticks. Axis.setTickStrategy(AxisTickStrategies.DateTime, (dateTimeTicks) => dateTimeTicks // All methods of `DateTimeTickStrategy` can be used here for styling ticks. .setMajorTickStyle((majorTicks) => majorTicks .setLabelFont((font) => font .setWeight('bold') ) ) )
All available strategies for automatic Axis ticks creation can be referenced via AxisTickStrategies.