End user managed 3D Axis Tick. Custom ticks are just like default ticks, except they can be completely controlled by the end user.

For example, their position, text, text fill style, gridline style, etc. everything can be customized. They can be created whenever and destroyed whenever.

They are created with addCustomTick method, and destroyed with dispose method.

 // Example
const customTick = chart3D.getDefaultAxisX().addCustomTick()
// Tick position on Axis.
.setValue(100)
.setTextFormatter((value) => `Custom tick at ${value.toFixed(1)}`)

Default 3D Axis ticks can be hidden by selecting empty tick strategy.

 // Remove default ticks.
Chart3D.getDefaultAxisX().setTickStrategy(AxisTickStrategies.Empty)

Hierarchy

Properties

getVisible: (() => boolean)

Type declaration

    • (): boolean
    • Get element visibility.

      Returns

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

      Returns boolean

offVisibleStateChanged: ((token: Token) => boolean)

Type declaration

    • (token: Token): boolean
    • Remove event listener from visibleStateChanged

      Parameters

      • token: Token

      Returns boolean

onVisibleStateChanged: ((listener: VisibleStateChangedHandler<unknown>) => Token)

Type declaration

    • (listener: VisibleStateChangedHandler<unknown>): Token
    • Register new event listener to visibleStateChanged event

      Parameters

      • listener: VisibleStateChangedHandler<unknown>

      Returns Token

setVisible: ((state: boolean) => CustomTick3D)

Type declaration

    • (state: boolean): CustomTick3D
    • Set element visibility.

      Parameters

      • state: boolean

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

      Returns CustomTick3D

Methods

  • Get style of custom ticks gridline.

    Returns

    LineStyle

    Returns LineStyle

  • Get fill style of custom ticks text.

    Returns

    FillStyle

    Returns FillStyle

  • Get padding between CustomTick tickline and text.

    Returns

    Padding as pixels

    Returns number

  • Get custom tick text rotation as degrees.

    Returns

    Rotation as degrees.

    Returns number

  • Get tickline length as pixels.

    Returns

    Tickline length as pixels.

    Returns number

  • Get style of custom ticks tickline.

    Returns

    LineStyle

    Returns LineStyle

  • Get location of custom tick on its Axis.

    Returns

    Location on axis.

    Returns number

  • 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

  • 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

  • Subscribe to onDispose event. This event is triggered whenever the object is disposed.

    A component can only be disposed by the end user, by calling the dispose method on the component or the component which owns it.

     // Example usage

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

    Dashboard.dispose()

    Returns

    Token of subscription

    Parameters

    • handler: (() => unknown)

      Handler function for event

        • (): unknown
        • Returns unknown

    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: ((customTick: CustomTick3D, value: number) => unknown)

      Function that is called when event is triggered.

    Returns Token

  • Set style of custom ticks gridline. This line highlights the tick location under the series area.

     // Example syntax, specify LineStyle
    CustomTick3D.setGridStrokeStyle(new SolidLine({
    thickness: 2,
    fillStyle: new SolidFill({ color: ColorHEX('#F00') })
    }))
     // Example syntax, change thickness only
    CustomTick3D.setGridStrokeStyle((stroke) => new SolidLine({ ...stroke, thickness: 5 }))
     // Example syntax, disable stroke
    CustomTick3D.setGridStrokeStyle(emptyLine)

    Returns

    Object itself.

    Parameters

    Returns CustomTick3D

  • Set text formatting of custom tick as a callback function.

     // Example usage
    CustomTick3D.setTextFormatter((value) => `Custom tick at ${value.toFixed(1)}`)

    The supplied callback function is called with the current axis location of the custom tick. To provide hard defined text, just ignore the value.

     // Example, hard defined custom tick text.
    CustomTick3D.setTextFormatter(() => `My tick text`)

    Returns

    Object itself

    Parameters

    • textFormatter: ((value: number) => string)

      Callback function which returns custom tick text as string.

        • (value: number): string
        • Parameters

          • value: number

          Returns string

    Returns CustomTick3D

  • Set padding between CustomTick tickline and text.

     // Example usage
    CustomTick3D.setTextPadding(5)

    Returns

    Object itself

    Parameters

    • padding: number

      Padding as pixels

    Returns CustomTick3D

  • Set custom tick text rotation as degrees.

     // Example usage
    CustomTick3D.setTextRotation(90)

    Returns

    Object itself

    Parameters

    • value: number

      Rotation as degrees.

    Returns CustomTick3D

  • Set tickline length as pixels.

     // Example usage
    CustomTick3D.setTickLength(5)

    Returns

    Object itself

    Parameters

    • length: number

      Tickline length as pixels

    Returns CustomTick3D

  • Set style of custom ticks tickline. This line connects the text to its Axis, generally a very short line (6 pixels, or so).

     // Example syntax, specify LineStyle
    CustomTick3D.setTickStyle(new SolidLine({
    thickness: 2,
    fillStyle: new SolidFill({ color: ColorHEX('#F00') })
    }))
     // Example syntax, change thickness only
    CustomTick3D.setTickStyle((stroke) => new SolidLine({ ...stroke, thickness: 5 }))
     // Example syntax, disable stroke
    CustomTick3D.setTickStyle(emptyLine)

    Returns

    Object itself.

    Parameters

    Returns CustomTick3D

  • Set location of custom tick on its Axis.

     // Example usage
    CustomTick3D.setValue(5)

    Returns

    Object itself

    Parameters

    • value: number

      Location on axis.

    Returns CustomTick3D