Optional values: Iterable<[string, unknown]> | Partial<TimeTickStrategyProperties>Readonly cursorCursor formatter.
This controls the formatting used by:
TickStrategy.Axis.formatValue method of the Axis which uses this TickStrategy.undefined means to use default Time cursor formatting.
// Example value, custom cursor formatter
cursorFormatter: (value, range, locale) => value.toFixed(3)
Readonly Beta customAllows specifying custom logic, overriding where axis ticks are placed.
This logic can either be specified:
// Example, control major tick placement only
chart.axisY.setTickStrategy(AxisTickStrategies.Numeric, (strategy) =>
strategy.setCustomTickPlacement((info) =>
new Array(10 + 1)
.fill(0)
.map((_, i) => ({ position: info.interval.start + (i / 10) * (info.interval.end - info.interval.start) })),
),
)
chart.axisY.setTickStrategy(AxisTickStrategies.Numeric, (strategy) =>
strategy.setCustomTickPlacement({
major: (info) =>
new Array(10 + 1)
.fill(0)
.map((_, i) => ({ position: info.interval.start + (i / 10) * (info.interval.end - info.interval.start) })),
minor: (info) => {
const majorStep = (info.interval.end - info.interval.start) / 10
const minorStep = majorStep / 5
const minorTicks: CustomTickPlacementResult[] = []
let step = 0
while (true) {
const position = info.interval.start + step * minorStep
if (Math.sign(info.interval.end - position) !== Math.sign(info.interval.end - info.interval.start)) break
if (step % 5 === 0) {
// Dont add minor tick here, would overlap with major tick
} else {
minorTicks.push({ position })
}
step++
}
return minorTicks
},
}),
)
Introduced in v8.2.0. May be changed according to user feedback.
Optional Readonly majorFormatting function used for major ticks.
Use FormattingFunctions to select available ones or define custom function.
undefined will result in default selection.
Readonly majorStyle of Major ticks.
Optional Readonly minorFormatting function used for minor ticks.
Use FormattingFunctions to select available ones or define custom function.
undefined will result in default selection.
Readonly minorStyle of Minor ticks.
To disable minor ticks, set to emptyTick.
Readonly timeoptional "Time origin" value. If a timeOrigin is defined, data-points will instead be interpreted as milliseconds since timeOrigin.
Readonly typeGet cursor formatter of this TimeTickStrategy object.
FormattingFunction as set by user, or undefined to indicate that the default time cursor formatting is configured.
Beta
Get value of custom tick placement.
Introduced in v8.2.0. May be changed according to user feedback.
Get major ticks formatting function of this TimeTickStrategy object.
Formatting Function.
Get minor ticks formatting function of this TimeTickStrategy object.
Formatting Function.
Set cursor formatter for this TimeTickStrategy object.
This will override the date time formatting used by:
TickStrategy.Axis.formatValue method of the Axis which uses this TickStrategy. // Example syntax, custom cursor formatting.
Axis.setTickStrategy(AxisTickStrategies.Time, (ticks) => ticks
.setCursorFormatter((value, range, locale) =>
value.toFixed(3)
)
)
New TimeTickStrategy object.
FormattingFunction or undefined to use default time cursor formatting.
Beta
Allows specifying custom logic, overriding where axis ticks are placed.
This logic can either be specified:
// Example, control major tick placement only
chart.axisY.setTickStrategy(AxisTickStrategies.Numeric, (strategy) =>
strategy.setCustomTickPlacement((info) =>
new Array(10 + 1)
.fill(0)
.map((_, i) => ({ position: info.interval.start + (i / 10) * (info.interval.end - info.interval.start) })),
),
)
chart.axisY.setTickStrategy(AxisTickStrategies.Numeric, (strategy) =>
strategy.setCustomTickPlacement({
major: (info) =>
new Array(10 + 1)
.fill(0)
.map((_, i) => ({ position: info.interval.start + (i / 10) * (info.interval.end - info.interval.start) })),
minor: (info) => {
const majorStep = (info.interval.end - info.interval.start) / 10
const minorStep = majorStep / 5
const minorTicks: CustomTickPlacementResult[] = []
let step = 0
while (true) {
const position = info.interval.start + step * minorStep
if (Math.sign(info.interval.end - position) !== Math.sign(info.interval.end - info.interval.start)) break
if (step % 5 === 0) {
// Dont add minor tick here, would overlap with major tick
} else {
minorTicks.push({ position })
}
step++
}
return minorTicks
},
}),
)
New TimeTickStrategy object. Introduced in v8.2.0. May be changed according to user feedback.
Utility method for setting formatting function of all numeric tick levels (major, minor) as well as cursor.
Each formatting target can be individually overridden with following methods:
New TimeTickStrategy object.
Function that formats a tick value to text.
Set major ticks formatting function of this TimeTickStrategy object.
New TimeTickStrategy object.
Formatting function to use with this TimeTickStrategy object.
Construct a new TimeTickStrategy object based on this one, but with modified major tick style.
Example usage:
Set font of major ticks:
Axis.setTickStrategy(
AxisTickStrategies.Time,
( tickStrategy: TimeTickStrategy ) => tickStrategy
.setMajorTickStyle(( tickStyle ) => tickStyle
.setLabelFont(( font ) => font
.setWeight( 'bold' )
)
)
)
New TimeTickStrategy object.
Either a TickStyle object or a function, which creates a new one based on the existing style.
Set minor ticks formatting function of this TimeTickStrategy object.
New TimeTickStrategy object.
Formatting function to use with this TimeTickStrategy object.
Construct a new TimeTickStrategy object based on this one, but with modified minor tick style.
Example usage:
Disable minor ticks:
Axis.setTickStrategy(
AxisTickStrategies.Time,
( tickStrategy: TimeTickStrategy ) => tickStrategy
.setMinorTickStyle( emptyTick )
)
Set font of minor ticks:
Axis.setTickStrategy(
AxisTickStrategies.Time,
( tickStrategy: TimeTickStrategy ) => tickStrategy
.setMinorTickStyle(( tickStyle: TickStyle ) => tickStyle
.setLabelFont(( font ) => font
.setWeight( 'bold' )
)
)
)
New TimeTickStrategy 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.
This is a convenience function which simultaneously applies both setMajorTickStyle and setMinorTickStyle.
New NumericTickStrategy object.
Either a TickStyle object or a function, which creates a new one based on the existing style.
Construct a new TimeTickStrategy object based on this one, but with modified timeOrigin.
If a timeOrigin is defined, data-points will instead be interpreted as milliseconds since timeOrigin.
Example usage:
Application with 24 hour time origin offset:
Axis.setTickStrategy(AxisTickStrategies.Time,
(tickStrategy) => tickStrategy.setTimeOrigin(24 * 60 * 60 * 1000)
)
New TimeTickStrategy object.
Millisecond offset or undefined to disable time origin offsetting.
Axis Tick Strategy that is designed for depicting time ranges between hundreds of hours to individual nanoseconds.
Axis values are interpreted as milliseconds, for example:
0->00:00:001 000->00:00:013 600 000->01:00:001->00:00:00.0010.001->00:00:00.000001Axis interval ranges supported by
TimeTickStrategy:0.0001).8 640 000 000)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.