Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Axis

Axis is a child component of ChartXY. It defines a numeric range on a single plane (X or Y), that will be used to scale attached Series to the ChartXYs viewport.

A ChartXY can have any number of Axes. They can be positioned on all four sides of the ChartXY:

  • left (default Y)
  • bottom (default X)
  • right
  • top

Axes have automatic scrolling logic to fit attached Series. This can be modified with Axis.setScrollStrategy

Axes are associated with a title, which can be enabled with Axis.setTitle

Index

Properties

Methods

Properties

chart

chart: ChartXY

Chart that owns the Axis.

directionFactor

directionFactor: 1 | -1

Describe height direction of axis, affects label position, tick line and grid line directions.

heightScale

heightScale: Scale

Height Scale or the Axis

plottingScale

plottingScale: Vec2<Scale>

Pair of scales, which describes space of axis sub-elements

scale

scale: Scale

Scale of the Axis value

tickStrategy

tickStrategy: AxisTickStrategy

Custom tick strategy for axis. Defines positioning and formating of ticks.

Methods

addBand

  • addBand(onTop: boolean): Band
  • Add a highlighter Band to the Axis. A Band can be used to highlight an interval on the Axis.

    Parameters

    • Default value onTop: boolean

      Is Band rendered above Series, or below. Default to above.

    Returns Band

    Band object.

addConstantLine

  • Add a highlighter ConstantLine to the Axis. A ConstantLine can be used to highlight a specific value on the Axis.

    Parameters

    • Default value onTop: boolean

      Is ConstantLine rendered above Series, or below. Default to above.

    Returns ConstantLine

    ConstantLine object.

addCustomTick

  • Add custom tick.

    Example usage:

    Desired result Value
    Custom tick with default background undefined
    Custom tick with no background addStyler((textBox) => textBox.setBackground((bg) => bg.setFillStyle(emptyFill)))

    Type parameters

    Parameters

    • Optional markerBuilder: UIPointableTextBoxBuilder<TickMarkerBackgroundType>

      Builder for marker of custom tick. Currently only option is a version of UIElementBuilders.PointableTextBox

    Returns CustomTick<TickMarkerBackgroundType>

    CustomTick created object

disableAnimations

  • disableAnimations(): this
  • Disable all animations for the axis.

    All animations have to be re-enabled individually if you wish to re-enable animations.

    Returns this

    Chart itself for fluent interface.

dispose

  • dispose(): this
  • Dispose all Axis sub-elements and remove this Axis from collection it's in.

    Returns this

    this for fluent interface

fit

  • fit(animate?: number | boolean, freeze: boolean): this
  • Fit axis view to attached series.

    Parameters

    • Optional animate: number | boolean

      Boolean for animation enabled, or number for animation duration in milliseconds

    • Default value freeze: boolean

      Freeze axis to fitted view? False by default.

    Returns this

formatValue

  • formatValue(value: number): string
  • Format a value along axis to string. Behavior depends on the Axis' TickStrategy. Eq. A DateTime-Axis will interpret 'value' as a Date.

    Parameters

    • value: number

      Value along axis

    Returns string

    Value formated to string

getAxisInteractionPanByDragging

  • getAxisInteractionPanByDragging(): boolean
  • Get is mouse-interaction enabled: Panning by dragging on axis. (RMB)

    Returns boolean

    Boolean flag

getAxisInteractionReleaseByDoubleClicking

  • getAxisInteractionReleaseByDoubleClicking(): boolean
  • Get is mouse-interaction enabled: Release axis by double-clicking on axis.

    Returns boolean

    Boolean flag

getAxisInteractionZoomByDragging

  • getAxisInteractionZoomByDragging(): boolean
  • Get is mouse-interaction enabled: Zooming by dragging on axis. (LMB)

    Returns boolean

    Boolean flag

getAxisInteractionZoomByWheeling

  • getAxisInteractionZoomByWheeling(): boolean
  • Get is mouse-interaction enabled: Zooming by mouse-wheeling on axis.

    Returns boolean

    Boolean flag

getAxisMouseHoverStyle

  • getAxisMouseHoverStyle(): string
  • Get mouse style when hovering over axis area.

    Returns string

    Mouse-style preset name

getAxisMousePanStyle

  • getAxisMousePanStyle(): string
  • Get mouse style when panning axis.

    Returns string

    Mouse-style preset name

getAxisMouseZoomStyle

  • getAxisMouseZoomStyle(): string
  • Get mouse style when zooming axis.

    Returns string

    Mouse-style preset name

getChartInteractionFitByDrag

  • getChartInteractionFitByDrag(): boolean
  • Get is mouse-interaction enabled: Fitting by capturing rectangle on chart.

    Returns boolean

    Boolean flag

getChartInteractionPanByDrag

  • getChartInteractionPanByDrag(): boolean
  • Get is mouse-interaction enabled: Panning by dragging on chart.

    Returns boolean

    Boolean flag

getChartInteractionZoomByDrag

  • getChartInteractionZoomByDrag(): boolean
  • Get is mouse-interaction enabled: Zooming by capturing rectangle on chart.

    Returns boolean

    Boolean flag

getChartInteractionZoomByWheel

  • getChartInteractionZoomByWheel(): boolean
  • Get is mouse-interaction enabled: Zooming by mouse-wheeling on chart.

    Returns boolean

    Boolean flag

getHeight

  • getHeight(): number
  • Get height of axis in pixels

    Returns number

    Number

getNibInteractionScaleByDragging

  • getNibInteractionScaleByDragging(): boolean
  • Get is mouse-interaction enabled: Scaling by dragging on nib.

    Returns boolean

    Boolean flag

getNibInteractionScaleByWheeling

  • getNibInteractionScaleByWheeling(): boolean
  • Get is mouse-interaction enabled: Scaling by mouse-wheeling on nib.

    Returns boolean

    Boolean flag

getNibLength

  • getNibLength(): number
  • Returns number

    Axis nib stroke length in pixels

getNibMouseHoverStyle

  • getNibMouseHoverStyle(): string
  • Get mouse style when hovering over nib area.

    Returns string

    Mouse-style preset name

getNibMousePickingAreaSize

  • getNibMousePickingAreaSize(): number
  • Get size of nib mouse-picking area in pixels.

    Returns number

    Size in pixels

getNibMouseScaleStyle

  • getNibMouseScaleStyle(): string
  • Get mouse style when hovering over nib area.

    Returns string

    Mouse-style preset name

getNibOverlayStyle

  • Get style of nib overlay (shown only when interacting with mouse / touch).

    Returns FillStyle

    FillStyle object

getNibStyle

  • getNibStyle(): LineStyle
  • Returns LineStyle

    nib stroke fillstyle as a Fillstyle object

getOverlayStyle

  • Get style of axis overlay (shown only when interacting with mouse / touch).

    Returns FillStyle

    FillStyle object

getScrollStrategy

  • getScrollStrategy(): AxisScrollStrategy | undefined
  • Returns AxisScrollStrategy | undefined

    Current AxisScrollStrategy

getStrokeStyle

  • getStrokeStyle(): LineStyle
  • Returns LineStyle

    Axis stroke as a LineStyle object

getTickStyle

  • getTickStyle(): TickStyle
  • Get style of Axis Ticks.

    Returns TickStyle

    TickStyle object

getTitle

  • getTitle(): string
  • Returns string

    Axis title string

getTitleFillStyle

getTitleFont

  • Get font of axis labels.

    Returns FontSettings

    FontSettings

getTitleMargin

  • getTitleMargin(): number
  • Returns number

    Padding after Axis title

getUiPosition

  • getUiPosition(): number
  • Get position of axis on its chart as a %

    Returns number

isDisposed

  • isDisposed(): boolean
  • Returns boolean

    True if all Axis sub-elements are disposed, false if not.

isStopped

  • isStopped(): boolean
  • Get is axes' scrolling currently prevented by usage of mouse-interactions or 'stop()' method.

    Returns boolean

    Boolean flag

offScaleChange

  • offScaleChange(token: Token): boolean
  • Remove subscription from scale change event

    Parameters

    • token: Token

      Event listener

    Returns boolean

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

onScaleChange

  • onScaleChange(listener: function): Token
  • Subscribe to on scale change event

    Parameters

    • listener: function

      Event listener

        • Parameters

          • start: number
          • end: number

          Returns void

    Returns Token

    Token that is used to unsubscribe from the event

pan

  • pan(amount: pixel): void
  • Pan scale by pixel value delta.

    Parameters

    • amount: pixel

      Amount to shift scale of axis in pixels

    Returns void

release

  • release(): void
  • Undo effects of 'stop'.

    Returns void

restore

  • restore(): this
  • Restore all Axis sub-elements and restore this Axis to the collection it was in.

    Returns this

    this for fluent interface TODO: Needs to properly restore the nibs - or recreate them. Current dispose would force us to use the latter method. Needs to put the axis back to a proper position.

setAnimationScroll

  • setAnimationScroll(enabled: boolean | undefined): this
  • Specifies scroll animation.

    Parameters

    • enabled: boolean | undefined

      Boolean flag for whether scrolling should be animated or not.

    Returns this

setAnimationZoom

  • setAnimationZoom(easing: AnimationEasing | undefined, duration?: undefined | number): this
  • Specifies zoom animation to use.

    Example usage:

    Desired result Argument Parameters
    Change animation setAnimationZoom(AnimationEasings.easeOut, 500) First parameter defines the easing to use for the animation. Second parameter is optional, and defines the duration for the animation
    Disable zooming animations axis.setAnimationZoom(undefined) Passing undefined as the parameter will disable the zooming animations for the Axis.

    Parameters

    • easing: AnimationEasing | undefined

      Easing of animation. Undefined disables zoom animations. See easing for defaults

    • Optional duration: undefined | number

      Optional default duration for zooming animations in milliseconds

    Returns this

setAxisInteractionPanByDragging

  • setAxisInteractionPanByDragging(enabled: boolean): this
  • Set is mouse-interaction enabled: Panning by dragging on axis. (RMB)

    Parameters

    • enabled: boolean

      Boolean flag

    Returns this

setAxisInteractionReleaseByDoubleClicking

  • setAxisInteractionReleaseByDoubleClicking(enabled: boolean): this
  • Set is mouse-interaction enabled: Release axis by double-clicking on axis.

    Parameters

    • enabled: boolean

      Boolean flag

    Returns this

setAxisInteractionZoomByDragging

  • setAxisInteractionZoomByDragging(enabled: boolean): this
  • Set is mouse-interaction enabled: Zooming by dragging on axis. (LMB)

    Parameters

    • enabled: boolean

      Boolean flag

    Returns this

setAxisInteractionZoomByWheeling

  • setAxisInteractionZoomByWheeling(enabled: boolean): this
  • Set is mouse-interaction enabled: Zooming by mouse-wheeling on axis.

    Parameters

    • enabled: boolean

      Boolean flag

    Returns this

setAxisMouseHoverStyle

  • setAxisMouseHoverStyle(mouseStyle: string): this
  • Set mouse style when hovering over axis area.

    Parameters

    • Default value mouseStyle: string

      Mouse-style preset name (see MouseStyles)

    Returns this

    Object itself

setAxisMousePanStyle

  • setAxisMousePanStyle(mouseStyle: string): this
  • Set mouse style when panning axis.

    Parameters

    • Default value mouseStyle: string

      Mouse-style preset name (see MouseStyles)

    Returns this

    Object itself

setAxisMouseZoomStyle

  • setAxisMouseZoomStyle(mouseStyle: string): this
  • Set mouse style when zooming axis.

    Parameters

    • Default value mouseStyle: string

      Mouse-style preset name (see MouseStyles)

    Returns this

    Object itself

setChartInteractionFitByDrag

  • setChartInteractionFitByDrag(enabled: boolean): this
  • Set is mouse-interaction enabled: Fitting by capturing rectangle on chart.

    Parameters

    • enabled: boolean

      Boolean flag

    Returns this

setChartInteractionPanByDrag

  • setChartInteractionPanByDrag(enabled: boolean): this
  • Set is mouse-interaction enabled: Panning by dragging on chart.

    Parameters

    • enabled: boolean

      Boolean flag

    Returns this

setChartInteractionZoomByDrag

  • setChartInteractionZoomByDrag(enabled: boolean): this
  • Set is mouse-interaction enabled: Zooming by capturing rectangle on chart.

    Parameters

    • enabled: boolean

      Boolean flag

    Returns this

setChartInteractionZoomByWheel

  • setChartInteractionZoomByWheel(enabled: boolean): this
  • Set is mouse-interaction enabled: Zooming by mouse-wheeling on chart.

    Parameters

    • enabled: boolean

      Boolean flag

    Returns this

setChartInteractions

  • setChartInteractions(enabled: boolean): this
  • Set all states of chart mouse interactions on axis at once.

    Parameters

    • enabled: boolean

      Boolean flag

    Returns this

setInterval

  • setInterval(start: number, end: number, animate: number | boolean, disableScrolling: boolean): this
  • Set axis scale interval.

    Parameters

    • start: number

      Start scale value

    • end: number

      End scale value

    • Default value animate: number | boolean

      Boolean for animation enabled, or number for animation duration in milliseconds

    • Default value disableScrolling: boolean

      If true, disables automatic scrolling after setting interval

    Returns this

    this for fluent interface

setMouseInteractions

  • setMouseInteractions(enabled: boolean): this
  • Set enabled flags for all mouse-interactions on axis directly. Does not affect chart mouse-interactions.

    Parameters

    • enabled: boolean

      Boolean: are mouse-interactions enabled

    Returns this

    Axis itself for fluent interface

setNibInteractionScaleByDragging

  • setNibInteractionScaleByDragging(enabled: boolean): this
  • Set is mouse-interaction enabled: Scaling by dragging on nib.

    Parameters

    • enabled: boolean

      Boolean flag

    Returns this

setNibInteractionScaleByWheeling

  • setNibInteractionScaleByWheeling(enabled: boolean): this
  • Set is mouse-interaction enabled: Scaling by mouse-wheeling on nib.

    Parameters

    • enabled: boolean

      Boolean flag

    Returns this

setNibLength

  • setNibLength(length: pixel): this
  • Specifies Axis nib stroke length in pixels

    Parameters

    • length: pixel

      Axis nib stroke length in pixels

    Returns this

    Axis itself for fluent interface

setNibMouseHoverStyle

  • setNibMouseHoverStyle(mouseStyle: string): this
  • Set mouse style when hovering over nib area.

    Parameters

    • Default value mouseStyle: string

      Mouse-style preset name (see MouseStyles)

    Returns this

    Object itself

setNibMousePickingAreaSize

  • setNibMousePickingAreaSize(size: pixel): this
  • Set ideal size of nib mouse-picking area in pixels.

    Parameters

    • size: pixel

      Size in pixels

    Returns this

    Object itself

setNibMouseScaleStyle

  • setNibMouseScaleStyle(mouseStyle: string): this
  • Set mouse style when scaling nib.

    Parameters

    • Default value mouseStyle: string

      Mouse-style preset name (see MouseStyles)

    Returns this

    Object itself

setNibOverlayStyle

  • Set style of nib overlay (shown only when interacting with mouse / touch).

    Parameters

    Returns this

setNibStyle

  • Specifies Axis nibs StrokeStyle

    Parameters

    • style: LineStyle | ImmutableMutator<LineStyle>

      LineStyle object or mutator to modify existing one

    Returns this

    Axis itself for fluent interface

setOverlayStyle

  • Set style of axis overlay (shown only when interacting with mouse / touch).

    Parameters

    Returns this

setScrollStrategy

  • setScrollStrategy(scrollStrategy: AxisScrollStrategy | undefined): this
  • Specify AxisScrollStrategy of the Axis. This decides where axis scrolls based on current view and series boundaries.

    Parameters

    • scrollStrategy: AxisScrollStrategy | undefined

      AxisScrollStrategy or undefined to disable automatic scrolling. See AxisScrollStrategies for a collection of options.

    Returns this

    Axis for fluent interface

setStrokeStyle

  • Specifies axis stroke

    Parameters

    Returns this

    Axis itself for fluent interface

setTickStyle

  • Set style of Axis Ticks.

    Example usage:

    Desired result Argument
    Specified TickStyle new VisibleTicks({ labelFillStyle: new SolidFill({ color: ColorHEX('#F00'), tickLength: 8 }) })
    Changed label fill style (visibleTicks) => visibleTicks.setLabelFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
    Hidden emptyTick

    Parameters

    • value: TickStyle | ImmutableMutator<TickStyle>

      Either a TickStyle object or a function, which will be used to create a new TickStyle based on current value.

    Returns this

    Chart itself

setTitle

  • setTitle(title: string): this
  • Specifies an Axis title string

    Parameters

    • title: string

      Axis title as a string

    Returns this

    Axis itself for fluent interface

setTitleFillStyle

  • Specifies Axis title FillStyle

    Parameters

    Returns this

    Axis itself for fluent interface

setTitleFont

setTitleMargin

  • setTitleMargin(margin: pixel): this
  • Specifies padding after Axis title. This is only accounted when title is visible.

    Parameters

    • margin: pixel

      Gap between the title and the next axis in pixels. Can also affect chart margins

    Returns this

    Axis itself for fluent interface

stop

  • stop(): this
  • Stop scrolling of axis until restored.

    Returns this

zoom

  • zoom(referencePosition: number, zoomAmount: number): void
  • Zoom scale from/to a position.

    Parameters

    • referencePosition: number

      Position to zoom towards or from on axis

    • zoomAmount: number

    Returns void