Axis Tick Strategy that is designed for depicting numeric values of all magnitudes.

NumericTickStrategy is the default selection for all Axes.

Axis interval ranges supported by NumericTickStrategy:

  • Minimum: 10e-9
  • Maximum: Unlimited.

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.Numeric, (numericTicks) => numericTicks)

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.Numeric, (numericTicks) => numericTicks
// All methods of `NumericTickStrategy` 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

  • NumericTickStrategyRecord
    • NumericTickStrategy

Implements

  • MutableAxisTickStrategy

Constructors

  • Parameters

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

    Returns NumericTickStrategy

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 Numeric cursor formatting.

 // Example value, custom cursor formatter
cursorFormatter: (value, range, locale) => value.toFixed(3)
extremeFormattingFunction?: FormattingFunction

Formatting function used for extreme ticks.

Use FormattingFunctions to select available ones or define custom function.

undefined will result in default selection.

extremeTickStyle: TickStyle

Style of Extreme ticks (start & end of Axis).

To disable extreme ticks, set to emptyTick.

formattingOffset: undefined | number

Optional coordinate to offset from tick coordinates when formatting tick labels and default cursor labels.

If supplied, the value of formattingOffset will be added to every coordinate before formatting. This can be useful for offsetting displayed data ranges in cases where actual data can't be practically rendered due to extremely large numbers for example.

 // Example, specify formatting offset.
Axis.setTickStrategy(AxisTickStrategies.Numeric, (ticks) => ticks
// Will result in `0` being formatted as `1000000`
.setFormattingOffset(1000000)
)
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: TickStyle

Style of Major ticks.

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.

type: "numeric-ticks"

Methods

  • Get cursor formatter of this NumericTickStrategy object.

    Returns

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

    Returns undefined | FormattingFunction

  • Get extreme ticks formatting function of this NumericTickStrategy object.

    Returns

    Formatting Function.

    Returns undefined | FormattingFunction

  • Get extreme tick style of this NumericTickStrategy object.

    Returns

    Extreme tick style.

    Returns TickStyle

  • Get formattingOffset of Tick strategy.

    formattingOffset is an optional coordinate to offset from tick coordinates when formatting tick labels and default cursor labels.

    If supplied, the value of formattingOffset will be added to every coordinate before formatting. This can be useful for offsetting displayed data ranges in cases where actual data can't be practically rendered due to extremely large numbers for example.

     // Example, specify formatting offset.
    Axis.setTickStrategy(AxisTickStrategies.Numeric, (ticks) => ticks
    // Will result in `0` being formatted as `1000000`
    .setFormattingOffset(1000000)
    )

    Returns undefined | number

  • Get major ticks formatting function of this NumericTickStrategy object.

    Returns

    Formatting Function.

    Returns undefined | FormattingFunction

  • Get major tick style of this NumericTickStrategy object.

    Returns

    Major tick style.

    Returns TickStyle

  • Get minor ticks formatting function of this NumericTickStrategy object.

    Returns

    Formatting Function.

    Returns undefined | FormattingFunction

  • Get minor tick style of this NumericTickStrategy object.

    Returns

    Minor tick style.

    Returns TickStyle

  • Set cursor formatter for this TickStrategy 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.Numeric, (ticks) => ticks
    .setCursorFormatter((value, range, locale) =>
    value.toFixed(3)
    )
    )

    Returns

    New NumericTickStrategy object.

    Parameters

    • formatter: undefined | FormattingFunction

      FormattingFunction or undefined to use default numeric cursor formatting.

    Returns NumericTickStrategy

  • Construct a new NumericTickStrategy object based on this one, but with modified extreme tick style.

    Example usage:

    Disable extreme ticks:

    Axis.setTickStrategy(
    AxisTickStrategies.Numeric,
    ( tickStrategy: NumericTickStrategy ) => tickStrategy
    .setExtremeTickStyle( emptyTick )
    )

    Set font of extreme ticks:

    Axis.setTickStrategy(
    AxisTickStrategies.Numeric,
    ( tickStrategy: NumericTickStrategy ) => tickStrategy
    .setExtremeTickStyle(( tickStyle: TickStyle ) => tickStyle
    .setLabelFont(( font ) => font
    .setWeight( 'bold' )
    )
    )
    )

    Returns

    New NumericTickStrategy 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 NumericTickStrategy

  • Construct a new NumericTickStrategy object based on this one, but with modified formatting offset.

    formattingOffset is an optional coordinate to offset from tick coordinates when formatting tick labels and default cursor labels.

    If supplied, the value of formattingOffset will be added to every coordinate before formatting. This can be useful for offsetting displayed data ranges in cases where actual data can't be practically rendered due to extremely large numbers for example.

     // Example, specify formatting offset.
    Axis.setTickStrategy(AxisTickStrategies.Numeric, (ticks) => ticks
    // Will result in `0` being formatted as `1000000`
    .setFormattingOffset(1000000)
    )

    Parameters

    • formattingOffset: undefined | number

    Returns NumericTickStrategy

  • Construct a new NumericTickStrategy object based on this one, but with modified major tick style.

    Example usage:

    Set font of major ticks:

    Axis.setTickStrategy(
    AxisTickStrategies.Numeric,
    ( tickStrategy: NumericTickStrategy ) => tickStrategy
    .setMajorTickStyle(( tickStyle ) => tickStyle
    .setLabelFont(( font ) => font
    .setWeight( 'bold' )
    )
    )
    )

    Returns

    New NumericTickStrategy object.

    Parameters

    Returns NumericTickStrategy

  • Construct a new NumericTickStrategy object based on this one, but with modified minor tick style.

    Example usage:

    Disable minor ticks:

    Axis.setTickStrategy(
    AxisTickStrategies.Numeric,
    ( tickStrategy: NumericTickStrategy ) => tickStrategy
    .setMinorTickStyle( emptyTick )
    )

    Set font of minor ticks:

    Axis.setTickStrategy(
    AxisTickStrategies.Numeric,
    ( tickStrategy: NumericTickStrategy ) => tickStrategy
    .setMinorTickStyle(( tickStyle: TickStyle ) => tickStyle
    .setLabelFont(( font ) => font
    .setWeight( 'bold' )
    )
    )
    )

    Returns

    New NumericTickStrategy 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 NumericTickStrategy