Class that represents a single Axis tick that can be managed by the user.

Custom ticks are created with addCustomTick.

Frequently used methods:

Method Purpose
setValue Set tick position along Axis.
setTextFormatter Set tick label text using a callback function.
dispose Destroy tick permanently
setGridStrokeStyle Set tick gridline style
setTickLength Set tick line length as pixels
setTickLabelPadding Set padding between tick line and label

Styling CustomTicks:

Tick gridline can be styled with setGridStrokeStyle

TickMarker (label, tick, possible background) are styled via setMarker as a callback function, like this:

 CustomTick.setMarker((tickMarker) => tickMarker
// Style TickMarker.
.setTextFillStyle(new SolidFill({ color: ColorRGBA( 255, 0, 0 ) }))
.setFont((font) => font.setStyle( 'italic' ))
)

See TickMarker for available customization API.

Styling specific TickMarkers:

When a custom tick is created, a tick marker builder can be specified. This specifies the shape, and general visual look of the custom tick, and can also expose a larger set of customization API for the tick marker. To use the specific API, it is required to cast the tick marker object to the correct type (TypeScript users only):

 const customTick = Axis.addCustomTick(UIElementBuilders.PointableTextBox)
customTick.setMarker((tickMarker: UIPointableTextBox) => tickMarker
// ^ Above type cast is necessary to access full configuration API of UIPointableTextBox
// Style TickMarker background fill color.
.setBackground((background) => background
.setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0, 100) }))
)
)

For reference,

  • CustomTick created with UIElementBuilders.AxisTickMajor or UIElementBuilders.AxisTickMinor will support API as described by UITick
  • CustomTick created with UIElementBuilders.PointableTextBox will support API as described by UIPointableTextBox

Hierarchy

Implements

Properties

axis: Axis

Axis that CustomTick belongs to.

axisScale: LogarithmicScale1D | LinearScale1D
renderingScale: LinearScaleXY

Methods

  • Permanently destroy the component.

    To fully allow Garbage-Collection to free the resources used by the component, make sure to remove any references to the component and its children in application code.

    let chart = ...ChartXY()
    let axisX = chart.getDefaultAxisX()
    // Dispose Chart, and remove all references so that they can be garbage-collected.
    chart.dispose()
    chart = undefined
    axisX = undefined

    Returns

    Object itself for fluent interface

    Returns CustomTick

  • Get whether CustomTick should allocate space on its Axis.

    By default, this is true, which means that Axis will always make sure it is big enough to fit the tick.

    By setting to false, this particular CustomTick can be removed from this behaviour, which can be useful in applications where some custom ticks are only enabled temporarily. Disabling this functionality can prevent the size of the Axis from changing in unwanted ways.

    Returns

    Boolean flag.

    Returns boolean

  • Returns

    Grid stroke length as a % of the viewport size

    Returns number

  • Returns

    Grid stroke style as a LineStyle object

    Returns LineStyle

  • Get boolean flag for whether object is currently under mouse or not

    Returns

    Boolean for is object under mouse currently

    Returns boolean

  • Get custom ticks TickMarker (label, tick, possible background).

    Returns

    TickMarker object

    Returns TickMarker

  • Get marker visible or not.

    Returns

    Boolean.

    Returns boolean

  • Get pixel padding between tick line and label.

    Returns number

  • Get rotation of tick label.

    Returns

    Rotation in degrees

    Returns number

  • Get tick length as pixels.

    Returns

    Tick length as pixels.

    Returns number

  • Value of CustomTick

    Returns number

  • Get element visibility.

    Returns

    true when element is set to be visible and false otherwise.

    Returns boolean

  • Check that customTick fit the main scale

    Returns

    Boolean with the result

    Returns boolean

  • Remove event listener from dispose event.

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Click Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Double Click Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Down Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Drag Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Drag Start Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Drag Stop Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Enter Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Leave Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Move Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Up Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Wheel Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Touch End Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Touch Move Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Touch Start Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Unsubscribe from value change event.

    This event is called whenever the position of the CustomTick is changed via CustomTick.setValue.

    Returns

    True if unsubscription was successful.

    Parameters

    • token: Token

      Token that was received when the subscription was created.

    Returns boolean

  • Remove event listener from visibleStateChanged

    Parameters

    • token: Token

    Returns boolean

  • Subscribe onDispose event. This event is triggered whenever the Control (Dashboards and all chart types) is disposed.

     // Example usage

    Chart.onDispose(() => {
    console.log('chert was disposed')
    })

    Chart.dispose()

    Returns

    Token of subscription

    Parameters

    Returns Token

  • Subscribe to value change event. This event is triggered when setValue is called.

    Example usage:

    // Set onValueChange event
    CustomTick.onValueChange((num) => {
    console.log(num)
    })

    // Set customTick value
    CustomTick.setValue(20)

    Returns

    Token that can be used to unsubscribe from the event.

    Parameters

    • handler: ((value: number) => unknown)

      Function that is called when event is triggered.

        • (value: number): unknown
        • Parameters

          • value: number

          Returns unknown

    Returns Token

  • Register new event listener to visibleStateChanged event.

    Parameters

    • listener: VisibleStateChangedHandler<CustomTick>

      Event listener for visibleStateChanged

    Returns Token

  • Set whether CustomTick should allocate space on its Axis.

    By default, this is true, which means that Axis will always make sure it is big enough to fit the tick.

    By setting to false, this particular CustomTick can be removed from this behaviour, which can be useful in applications where some custom ticks are only enabled temporarily. Disabling this functionality can prevent the size of the Axis from changing in unwanted ways.

     // Example syntax, disable custom tick space allocation.
    CustomTick.setAllocatesAxisSpace(false)

    Returns

    Object itself for fluent interface.

    Parameters

    • shouldAxisAllocateSpace: boolean

      Boolean flag.

    Returns CustomTick

  • Set length of grid stroke in percents

    Returns

    This for fluent interface

    Parameters

    • length: number

      Grid line length as a % of viewport size

    Returns CustomTick

  • Configure custom ticks TickMarker (label, tick, possible background) via a callback function.

    Example usage:

     CustomTick.setMarker((tickMarker) => tickMarker
    // Style TickMarker.
    .setTextFillStyle(new SolidFill({ color: ColorRGBA( 255, 0, 0 ) }))
    .setFont((font) => font.setStyle( 'italic' ))
    )

    See TickMarker for available customization API.

    Styling specific TickMarkers:

    When a custom tick is created, a tick marker builder can be specified. This specifies the shape, and general visual look of the custom tick, and can also expose a larger set of customization API for the tick marker. To use the specific API, it is required to cast the tick marker object to the correct type (TypeScript users only):

     const customTick = Axis.addCustomTick(UIElementBuilders.PointableTextBox)
    customTick.setMarker((tickMarker: UIPointableTextBox) => tickMarker
    // ^ Above type cast is necessary to access full configuration API of UIPointableTextBox
    // Style TickMarker background fill color.
    .setBackground((background) => background
    .setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0, 100) }))
    )
    )

    For reference,

    • CustomTick created with UIElementBuilders.AxisTickMajor will support API as described by UITick
    • CustomTick created with UIElementBuilders.PointableTextBox will support API as described by UIPointableTextBox

    Parameters

    Returns CustomTick

  • Set marker visible or not.

    Returns

    Object itself

    Parameters

    • visible: boolean

      Marker visible?

    Returns CustomTick

  • Set mouse interactions enabled or disabled

    Returns

    Object itself for fluent interface

    Parameters

    • state: boolean

      Specifies state of mouse interactions

    Returns CustomTick

  • Set text of CustomTicks' Marker with a formatting function.

    Example usage:

    // Marker shows formatted position of CustomTick on its Axis
    CustomTick.setTextFormatter((position, customTick) => customTick.axis.formatValue(position))
    // Marker shows 'Hello world'
    CustomTick.setTextFormatter((position, customTick) => 'Hello world')

    Returns

    Object itself

    Parameters

    • textFormatter: CustomTickTextFormatter

      A function of type: CustomTickTextFormatter, that defines text of CustomTicks' Marker.

    Returns CustomTick

  • Set pixel padding between tick line and label.

    Parameters

    • padding: number

    Returns CustomTick

  • Set rotation of tick label.

    Returns

    Object itself

    Parameters

    • value: number

      Rotation in degrees

    Returns CustomTick

  • Set tick length as pixels.

    Returns

    Object itself for fluent interface.

    Parameters

    • length: number

      Tick length as pixels.

    Returns CustomTick

  • Sets the position of this custom tick on its Axis

    Returns

    This for fluid interface

    Remarks

    Overrides text of CustomTicks Marker with formated value.

    Parameters

    • value: number

      Value in the units of main scale

    Returns CustomTick

  • Set element visibility.

    Returns

    Object itself.

    Parameters

    • state: boolean

      true when element should be visible and false when element should be hidden.

    Returns CustomTick