Graph axes

Defining multiple axis on any side of the graph is one of the poweful features of the jsGraph library. You can stack multiple axis on one side or spread them on each side of the graph.

Defining axis in the graph options

Defining axis in the graph constructor takes a multi-level object that looks like

{
  "top": [
    { /* options */ }, // First top axis options
    { /* options */ }  // Second top axis options
  ],

  "left": [],
  "right": [],
  "bottom": []
}

Implicit axis creation

There is however not a unique way to create axes. Axis are implicitely created whenever you attempt to access them through the jsGraph API or during the serie autoAxis() method.

Create axis through the API

g.getXAxis(); // Creates a new bottom axis and returns it
g.getXAxis( 1, options ); // Creates a second bottom axis with some options

g.getBottomAxis();
g.getTopAxis();
g.getLeftAxis();
g.getRightAxis();

g.getXAxis(); // If no x axis exists, returns a new bottom axis
g.getYAxis(); // If no y axis exists, returns a new left axis

Create axis through the autoAxis method

The autoAxis() method is defined for every serie. It is equivalent to calling g.getXAxis() and g.getYAxis() methods, and additionnally binds the returned axis to the serie that called the method.

Explicit axis creation

You can also decide to develop your own axis and thereby setting them explicitely. For that purpose, you can use the setXAxis() and related methods to assign your axis.

var a = new YourAxisConstructor();
g.setBottomAxis( a, 0 ); // Set it as the first bottom axis
g.setRightAxis( a, 2 ); // Set it as the third right axis

Axis options

Chances are that you'll want to customize a bit your axis. Here are the available options you may use

Param	Description
`lineAt0`	Draws a horizontal/vertical line passing through the zero (if it is in the range)
`flipped`	Flips the axis in the reverse direction (higher numbers first)
`axisDataSpacing`	By default the axis will set their min/max so that all series can be contained within those values. `axisDataSpacing` allows more space to be allocated so that the data does not touch the axis. Values are relative to the default axis span. Example: `axisDataSpacing: { min: 0.1, max: 0 }` leaves no space on top of the serie, but 10% at its the bottom
`unitModification`	Mostly used with the value "time" to display time (seconds, minutes, hours, days) in the x axis rather than values in seconds.
`primaryGrid`	Whether the main grid should be displayed or not
`secondaryGrid`	Whether the secondary grid should be displayed or not
`shiftToZero`	Takes the minimum value of the axis and set it is 0. All the axis values are shifted by the same value. Useful in combination with `unitModification: "time"` to display timestamps as seconds starting from 0.
`tickPosition`	Position where the ticks should be located (inside\|outside\|centered)
`nbTicksPrimary`	The number of primary ticks to use. The actual number used may vary as the library tries to be clever and use round values as primary ticks.
`nbTicksSecondary`	The number of secondary ticks separating two primary ticks.
`ticklabelratio`	Defines a ratio to apply between the actual data value and the one displayed on the ticks. You may use it to make unit conversion without altering your data.
`exponentialFactor`	Applies an scaling factor (power of 10) to your data but not showing it in the axis label. Useful for data conversions (and has a similar effect that `ticklabelratio`)
`exponentialFactorLabel`	Applies an scaling factor (power of 10) to your data and showing it in the axis label. Will be deprecated soon
`wheelBaseline`	When a mouse wheel triggers a zoom in the y direction, `wheelBaseline` defined which point is the reference point for the zooming.
`logScale`	Displays the data in a log scale.
`forcedMin`, `forcedMax`	Forces the mininmum or the maximum value of the axis (overrides the autoscaling)