#

API Docs for:
Show: Inherited Protected Private Deprecated

# Axis Class

Defined in: `input/charts/Axis.js:1`
Module: charts

The Axis class. Generates axes for a chart.

- Index
- Methods
- Properties
- Attributes

## Item Index

### Methods

- _clearLabelCache
- _createLabelCache
- _dataChangeHandler
- _drawAxis
- _getDefaultStyles
- _getLabelBounds
- _getTextRotationProps
- _handleSizeChange
- _positionChangeHandler
- _removeChildren
- _rotate
- _setCanvas
- _setText
- _setTotalTitleSize
- _simulateTransformOrigin
- _updateGraphic
- _updateHandler
- _updatePathElement
- _updateTitle
- destructor
- drawLine
- getFirstPoint
- getLabel
- getLastPoint
- getLength
- getLineEnd
- getMaxLabelBounds
- getMinLabelBounds
- getNextPoint
- getPosition
- renderUI
- syncUI

### Properties

- _calculatedHeight
- _calculatedWidth
- _layoutClasses
- maxLabelSize

### Attributes

- appendLabelFunction
- appendTitleFunction
- bottomTickOffset
- calculatedHeight
- calculatedWidth
- edgeOffset
- graphic
- height
- labelFunction
- labelFunctionScope
- labels
- leftTickOffset
- maxLabelSize
- node
- overlapGraph
- path
- position
- rightTickOffset
- styles
- tickPath
- tickPoints
- title
- topTickOffset
- width

## Methods

### `_clearLabelCache`

() private

Defined in `input/charts/Axis.js:666`

Removes axis labels from the dom and clears the label cache.

### `_createLabelCache`

() private

Defined in `input/charts/Axis.js:644`

Creates a cache of labels that can be re-used when the axis redraws.

### `_dataChangeHandler`

(

- `e`

)
private

Defined in `input/charts/Axis.js:30`

Handles change to the dataProvider

#### Parameters:

- `e` Object

  Event object

### `_drawAxis`

() private

Defined in `input/charts/Axis.js:332`

Draws an axis.

### `_getDefaultStyles`

() protected

Defined in `input/charts/Axis.js:172`

Gets the default value for the `styles` attribute. Overrides base implementation.

#### Returns:

Object

### `_getLabelBounds`

(

- `Value`

)
private

Defined in `input/charts/Axis.js:961`

Returns the coordinates (top, right, bottom, left) for the bounding box of a label.

#### Parameters:

- `Value` String

  of the label

#### Returns:

Object

### `_getTextRotationProps`

(

- `styles`

)
private

Defined in `input/charts/Axis.js:292`

Generates the properties necessary for rotating and positioning a text field.

#### Parameters:

- `styles` Object

  properties for the text field

#### Returns:

Object

### `_handleSizeChange`

(

- `e`

)
private

Defined in `input/charts/Axis.js:240`

Updates the axis when the size changes.

#### Parameters:

- `e` Object

  Event object.

### `_positionChangeHandler`

(

- `e`

)
private

Defined in `input/charts/Axis.js:45`

Handles change to the position attribute

#### Parameters:

- `e` Object

  Event object

### `_removeChildren`

() private

Defined in `input/charts/Axis.js:992`

Removes all DOM elements from an HTML element. Used to clear out labels during detruction phase.

### `_rotate`

(

- `label`
- `props`

)
private

Defined in `input/charts/Axis.js:844`

Rotates and positions a text field.

#### Parameters:

- `label` HTMLElement

  text field to rotate and position

- `props` Object

  properties to be applied to the text field.

### `_setCanvas`

() private

Defined in `input/charts/Axis.js:139`

Creates a graphic instance to be used for the axis line and ticks.

### `_setText`

(

- `label`
- `val`

)
private

Defined in `input/charts/Axis.js:1051`

Updates the content of text field. This method writes a value into a text field using `appendChild`. If the value is a `String`, it is converted to a `TextNode` first.

#### Parameters:

- `label` HTMLElement

  label to be updated

- `val` String

  value with which to update the label

### `_setTotalTitleSize`

(

- `styles`

)
private

Defined in `input/charts/Axis.js:465`

Calculates and sets the total size of a title.

#### Parameters:

- `styles` Object

  Properties for the title field.

### `_simulateTransformOrigin`

(

- `matrix`
- `rot`
- `transformOrigin`
- `w`
- `h`

)
private

Defined in `input/charts/Axis.js:916`

Simulates a rotation with a specified transformOrigin.

#### Parameters:

- `matrix` Matrix

  Reference to a `Matrix` instance.

- `rot` Number

  The rotation (in degrees) that will be performed on a matrix.

- `transformOrigin` Array

  An array represeniting the origin in which to perform the transform. The first index represents the x origin and the second index represents the y origin.

- `w` Number

  The width of the object that will be transformed.

- `h` Number

  The height of the object that will be transformed.

### `_updateGraphic`

(

- `position`

)
private

Defined in `input/charts/Axis.js:58`

Updates the the Graphic instance

#### Parameters:

- `position` String

  Position of axis

### `_updateHandler`

(

- `e`

)
private

Defined in `input/charts/Axis.js:84`

Handles changes to axis.

#### Parameters:

- `e` Object

  Event object

### `_updatePathElement`

() private

Defined in `input/charts/Axis.js:505`

Updates path.

### `_updateTitle`

() private

Defined in `input/charts/Axis.js:533`

Updates the content and style properties for a title field.

### `destructor`

() protected

Defined in `input/charts/Axis.js:1013`

Destructor implementation Axis class. Removes all labels and the Graphic instance from the widget.

### `drawLine`

(

- `startPoint`
- `endPoint`
- `line`

)
private

Defined in `input/charts/Axis.js:277`

Draws a line segment between 2 points

#### Parameters:

- `startPoint` Object

  x and y coordinates for the start point of the line segment

- `endPoint` Object

  x and y coordinates for the for the end point of the line segment

- `line` Object

  styles (weight, color and alpha to be applied to the line segment)

### `getFirstPoint`

(

- `pt`

)
private

Defined in `input/charts/Axis.js:738`

Gets the position of the first point on an axis.

#### Parameters:

- `pt` Object

  Object containing x and y coordinates.

#### Returns:

Object

### `getLabel`

(

- `pt`
- `styles`

)
private

Defined in `input/charts/Axis.js:595`

Creates or updates an axis label.

#### Parameters:

- `pt` Object

  x and y coordinates for the label

- `styles` Object

  styles applied to label

#### Returns:

HTMLElement

### `getLastPoint`

() private

Defined in `input/charts/Axis.js:786`

Calculates the placement of last tick on an axis.

#### Returns:

Object

### `getLength`

() private

Defined in `input/charts/Axis.js:712`

Calcuates the width or height of an axis depending on its direction.

#### Returns:

Number

### `getLineEnd`

() private

Defined in `input/charts/Axis.js:690`

Gets the end point of an axis.

#### Returns:

Object

### `getMaxLabelBounds`

()

Defined in `input/charts/Axis.js:939`

Returns the coordinates (top, right, bottom, left) for the bounding box of the last label.

#### Returns:

Object

### `getMinLabelBounds`

()

Defined in `input/charts/Axis.js:950`

Returns the coordinates (top, right, bottom, left) for the bounding box of the first label.

#### Returns:

Object

### `getNextPoint`

(

- `point`
- `majorUnitDistance`

)
private

Defined in `input/charts/Axis.js:763`

Gets the position of the next point on an axis.

#### Parameters:

- `point` Object

  Object containing x and y coordinates.

- `majorUnitDistance` Number

  Distance in pixels between ticks.

#### Returns:

Object

### `getPosition`

(

- `point`

)
private

Defined in `input/charts/Axis.js:809`

Calculates position on the axis.

#### Parameters:

- `point` Object

  contains x and y values

### `renderUI`

() private

Defined in `input/charts/Axis.js:99`

### `syncUI`

() private

Defined in `input/charts/Axis.js:108`

## Properties

### `_calculatedHeight`

Number private

Defined in `input/charts/Axis.js:21`

Storage for calculatedHeight value.

### `_calculatedWidth`

Number private

Defined in `input/charts/Axis.js:12`

Storage for calculatedWidth value.

### `_layoutClasses`

Object private

Defined in `input/charts/Axis.js:262`

Maps key values to classes containing layout algorithms

### `maxLabelSize`

Number protected

Defined in `input/charts/Axis.js:1042`

Length in pixels of largest text bounding box. Used to calculate the height of the axis.

## Attributes

### `appendLabelFunction`

Function

Defined in `input/charts/Axis.js:1423`

Function used to append an axis value to an axis label. This function has the following signature:

textField
  The axis label to be appended. (`HTMLElement`)
val
  The value to attach to the text field. This method will accept an `HTMLELement` or a `String`. This method does not use (`HTMLElement` | `String`)

The default method appends a value to the `HTMLElement` using the `appendChild` method. If the given value is a `String`, the method will convert the the value to a `textNode` before appending to the `HTMLElement`. This method will not convert an `HTMLString` to an `HTMLElement`.

### `appendTitleFunction`

Function

Defined in `input/charts/Axis.js:1444`

Function used to append a title value to the title object. This function has the following signature:

textField
  The title text field to be appended. (`HTMLElement`)
val
  The value to attach to the text field. This method will accept an `HTMLELement` or a `String`. This method does not use (`HTMLElement` | `String`)

The default method appends a value to the `HTMLElement` using the `appendChild` method. If the given value is a `String`, the method will convert the the value to a `textNode` before appending to the `HTMLElement` element. This method will not convert an `HTMLString` to an `HTMLElement`.

### `bottomTickOffset`

Number

Defined in `input/charts/Axis.js:1279`

Distance determined by the tick styles used to calculate the distance between the axis line in relation to the bottom of the axis.

### `calculatedHeight`

Number private

Defined in `input/charts/Axis.js:1156`

Calculated value of an axis' height. By default, the value is used internally for horizontal axes. If the `height` attribute is explicitly set, this value will be ignored.

### `calculatedWidth`

Number private

Defined in `input/charts/Axis.js:1136`

Calculated value of an axis' width. By default, the value is used internally for vertical axes. If the `width` attribute is explicitly set, this value will be ignored.

### `edgeOffset`

Number protected

Defined in `input/charts/Axis.js:1176`

Difference betweend the first/last tick and edge of axis.

### `graphic`

Graphic

Defined in `input/charts/Axis.js:1188`

The graphic in which the axis line and ticks will be rendered.

### `height`

Number

Defined in `input/charts/Axis.js:1108`

When set, defines the height of a horizontal axis instance. By default, horizontal axes automatically size based on their contents. When the height attribute is set, the axis will not calculate its height. When the height attribute is explicitly set, axis labels will postion themselves off of the the inner edge of the axis and the title, if present, will position itself off of the outer edge. If a specified height is less than the sum of the axis' contents, excess content will overflow.

### `labelFunction`

Function

Defined in `input/charts/Axis.js:1405`

Method used for formatting a label. This attribute allows for the default label formatting method to overridden. The method use would need to implement the arguments below and return a `String` or `HTMLElement`.

val
  Label to be formatted. (`String`)
format
  Template for formatting label. (optional)

### `labelFunctionScope`

Object

Defined in `input/charts/Axis.js:1361`

Object which should have by the labelFunction

### `labels`

Array

Defined in `input/charts/Axis.js:1312`

Collection of labels used to render the axis.

### `leftTickOffset`

Number

Defined in `input/charts/Axis.js:1290`

Distance determined by the tick styles used to calculate the distance between the axis line in relation to the left of the axis.

### `maxLabelSize`

Number protected

Defined in `input/charts/Axis.js:1369`

Length in pixels of largest text bounding box. Used to calculate the height of the axis.

### `node`

HTMLElement

Defined in `input/charts/Axis.js:1242`

Contains the contents of the axis.

### `overlapGraph`

Boolean

Defined in `input/charts/Axis.js:1345`

Indicates whether the axis overlaps the graph. If an axis is the inner most axis on a given position and the tick position is inside or cross, the axis will need to overlap the graph.

### `path`

Shape private

Defined in `input/charts/Axis.js:1196`

### `position`

String

Defined in `input/charts/Axis.js:1250`

Direction of the axis.

### `rightTickOffset`

Number

Defined in `input/charts/Axis.js:1301`

Distance determined by the tick styles used to calculate the distance between the axis line in relation to the right side of the axis.

### `styles`

Object

Defined in `input/charts/Axis.js:1465`

Style properties used for drawing an axis. This attribute is inherited from `Renderer`. Below are the default values:

majorTicks
  Properties used for drawing ticks.
  display
    Position of the tick. Possible values are `inside`, `outside`, `cross` and `none`. The default value is `inside`.
  length
    The length (in pixels) of the tick. The default value is 4.
  color
    The color of the tick. The default value is `#dad8c9`
  weight
    Number indicating the width of the tick. The default value is 1.
  alpha
    Number from 0 to 1 indicating the opacity of the tick. The default value is 1.
line
  Properties used for drawing the axis line.
  weight
    Number indicating the width of the axis line. The default value is 1.
  color
    The color of the axis line. The default value is `#dad8c9`.
  alpha
    Number from 0 to 1 indicating the opacity of the tick. The default value is 1.
majorUnit
  Properties used to calculate the `majorUnit` for the axis.
  determinant
    The algorithm used for calculating distance between ticks. The possible options are `count` and `distance`. If the `determinant` is `count`, the axis ticks will spaced so that a specified number of ticks appear on the axis. If the `determinant` is `distance`, the axis ticks will spaced out according to the specified distance. The default value is `count`.
  count
    Number of ticks to appear on the axis when the `determinant` is `count`. The default value is 11.
  distance
    The distance (in pixels) between ticks when the `determinant` is `distance`. The default value is 75.
label
  Properties and styles applied to the axis labels.
  color
    The color of the labels. The default value is `#808080`.
  alpha
    Number between 0 and 1 indicating the opacity of the labels. The default value is 1.
  fontSize
    The font-size of the labels. The default value is 85%
  rotation
    The rotation, in degrees (between -90 and 90) of the labels. The default value is 0.
  margin
    The distance between the label and the axis/tick. Depending on the position of the `Axis`, only one of the properties used.
    top
      Pixel value used for an axis with a `position` of `bottom`. The default value is 4.
    right
      Pixel value used for an axis with a `position` of `left`. The default value is 4.
    bottom
      Pixel value used for an axis with a `position` of `top`. The default value is 4.
    left
      Pixel value used for an axis with a `position` of `right`. The default value is 4.

### `tickPath`

Shape private

Defined in `input/charts/Axis.js:1219`

### `tickPoints`

Array

Defined in `input/charts/Axis.js:1326`

Collection of points used for placement of labels and ticks along the axis.

### `title`

String

Defined in `input/charts/Axis.js:1389`

Title for the axis. When specified, the title will display. The position of the title is determined by the axis position.

top
  Appears above the axis and it labels. The default rotation is 0.
right
  Appears to the right of the axis and its labels. The default rotation is 90.
bottom
  Appears below the axis and its labels. The default rotation is 0.
left
  Appears to the left of the axis and its labels. The default rotation is -90.

### `topTickOffset`

Number

Defined in `input/charts/Axis.js:1268`

Distance determined by the tick styles used to calculate the distance between the axis line in relation to the top of the axis.

### `width`

Number

Defined in `input/charts/Axis.js:1080`

When set, defines the width of a vertical axis instance. By default, vertical axes automatically size based on their contents. When the width attribute is set, the axis will not calculate its width. When the width attribute is explicitly set, axis labels will postion themselves off of the the inner edge of the axis and the title, if present, will position itself off of the outer edge. If a specified width is less than the sum of the axis' contents, excess content will overflow.