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:00
  • 1 000 -> 00:00:01
  • 3 600 000 -> 01:00:00
  • 1 -> 00:00:00.001
  • 0.001 -> 00:00:00.000001

Axis interval ranges supported by TimeTickStrategy:

  • Minimum: 100 nanoseconds (0.0001).
  • Maximum: 100 hours (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:

 Axis.setTickStrategy(AxisTickStrategies.Time, (timeTicks) => timeTicks)

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.Time, (timeTicks) => timeTicks
// All methods of `TimeTickStrategy` 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.

Hierarchy

  • TimeTickStrategyRecord
    • TimeTickStrategy

Implements

  • MutableAxisTickStrategy

Constructors

  • Parameters

    • Optional values: Iterable<[string, unknown]> | Partial<TimeTickStrategyProperties>

    Returns TimeTickStrategy

Properties

cursorFormatter: undefined | FormattingFunction

Cursor formatter.

This controls the formatting used by:

  • Default cursor result table formatters.
  • Default cursor tick formatters along Axis which uses this 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)
majorFormattingFunction?: FormattingFunction

Formatting function used for major ticks.

Use FormattingFunctions to select available ones or define custom function.

undefined will result in default selection.

majorTickStyle: VisibleTicks

Style 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.

minorFormattingFunction?: FormattingFunction

Formatting function used for minor ticks.

Use FormattingFunctions to select available ones or define custom function.

undefined will result in default selection.

minorTickStyle: TickStyle

Style of Minor ticks.

To disable minor ticks, set to emptyTick.

timeOrigin: undefined | number

optional "Time origin" value. If a timeOrigin is defined, data-points will instead be interpreted as milliseconds since timeOrigin.

Methods

  • Get cursor formatter of this TimeTickStrategy object.

    Returns

    FormattingFunction as set by user, or undefined to indicate that the default time cursor formatting is configured.

    Returns undefined | FormattingFunction

  • Get major tick style of this TimeTickStrategy object.

    Returns

    Major tick style.

    Returns VisibleTicks

  • Get minor tick style of this TimeTickStrategy object.

    Returns

    Minor tick style.

    Returns TickStyle

  • Get the timeOrigin of this TimeTickStrategy object.

    Returns

    Current time origin milliseconds or undefined.

    Returns undefined | number

  • Set cursor formatter for this TimeTickStrategy object.

    This will override the date time formatting used by:

    • Default cursor result table formatters.
    • Default cursor tick formatters along Axis which uses this 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)
    )
    )

    Returns

    New TimeTickStrategy object.

    Parameters

    • formatter: undefined | FormattingFunction

      FormattingFunction or undefined to use default time cursor formatting.

    Returns TimeTickStrategy

  • 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: VisibleTicks ) => tickStyle
    .setLabelFont(( font ) => font
    .setWeight( 'bold' )
    )
    )
    )

    Returns

    New TimeTickStrategy object.

    Parameters

    • value: TickStyle | ImmutableMutator<TickStyle, TickStyle>

      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.

    Returns TimeTickStrategy

  • 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)
    )

    Returns

    New TimeTickStrategy object.

    Parameters

    • timeOrigin: undefined | number

      Millisecond offset or undefined to disable time origin offsetting.

    Returns TimeTickStrategy