Fork me on GitHub
jsGraph

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)