API Docs

Class: Axis

PD.SVG. Axis

Manages a scaled horizontal or vertical axis within an SVG image.

new Axis(config)

Describes a scaled horizontal or vertical axis.

Parameters:
Name Type Description
config object

An optional configuration object with the following properties.
Properties of config:
Name Type Argument Description
title string <optional>

The human-readable title of the axis.
units string <optional>

The type of units displayed.
max number <optional>

The maximum scale value.
min number <optional>

The minimum scale value.
tickMajor number <optional>

The increment between large tick values.
tickMinor number <optional>

The increment between small tick values.
scaleFunction number <optional>

A callback function for scaling values to align with primary axis.
scale number <optional>

A conversion factor to scale with primary axis, used if no scaleFunction provided.
prefix number <optional>

The units prefix index to apply to scaled values, see PD.PREFIX.toString.
format function <optional>

An optional function for formatting axis values.
offset number <optional>

An optional additional vertical/horizontal offset value, in pixels.
gridLines Array | function | null <optional>

An optional array of grid line extents or a function that returns one, in pixels.
Author:
  • drajmarsh

Members

:object

extra

A store for additional/auxiliary data.

Type
  • object
:function|null

format

An optional function for formatting axis values.

This function takes a numeric value as input and returns a display string.

Type
  • function | null
:Array|function|null

gridLines

An optional array of grid line extents, in pixels.

This array should include at least two numeric values, the first being the minimum extent of the chart or chart segment and the second the maximum extent, both in pixels. For multiple chart segments, simply include additional pairs of numeric values. When set, an additional grid line will be drawn across the chart. To clear grid lines, simple set this to null.

Type
  • Array | function | null
:boolean

highlight

An optional flag indicating that grid lines should use the highlight class.

Type
  • boolean
:number

labelRotate

An optional additional vertical offset value, in pixels.

Type
  • number
:number

max

The maximum scale value.

Type
  • number
:number

min

The minimum scale value.

Type
  • number
:number

offset

An optional additional vertical offset value, in pixels.

Type
  • number
:number

prefix

Units prefix index to apply to scaled values, see PD.PREFIX.toString.

Type
  • number
:number

scale

The conversion factor required to align with primary axis.

Type
  • number
:function

scaleFunction

An optional callback function for scaling to align with primary axis.

Type
  • function
:number

tickMajor

The increment between large tick values.

Type
  • number
:number

tickMinor

The increment between small tick values.

Type
  • number
:string

title

The human-readable title of the axis.

Type
  • string
:string

units

The type of units displayed.

Type
  • string
:boolean

useUnitsAsTitle

An optional flag to show the units name in place of a chart title.

Type
  • boolean

Methods

renderHorizontal(parent, padding, pos, align [, small])

Add a horizontal axis within the given parent SVGElement.

Parameters:
Name Type Argument Description
parent SVGElement

The parent SVG node to add the axis to.
padding object

An object with top, right, bottom and left properties, all in pixels.
pos number

The Y-axis position of the axis, in canvas pixels.
align PD.ALIGN

The horizontal alignment value to align the axis.
small boolean <optional>

An optional boolean to indicate a smaller chart
Returns:

Returns true if axis was created and added to parent.

Type
boolean

renderVertical(parent, padding, pos, align [, small])

Add a vertical axis within the given parent SVGElement.

Parameters:
Name Type Argument Description
parent SVGElement

The parent SVG node to add the axis to.
padding object

An object with top, right, bottom and left properties, all in pixels.
pos number

The X-axis position of the axis, in canvas pixels.
align PD.ALIGN

The vertical alignment value to align the axis.
small boolean <optional>

An optional boolean to indicate a smaller chart.
Returns:

Returns true if axis was created and added to parent.

Type
boolean