Multiple Axes

Multiple axes can serve many uses on charts. The most common is having each series use its own axis because the values between series vary too much to share one scale.

Some uses of multiple axes include:

Add an extra scale like Fahrenheit and Celsius
Different series using different scales
Multiple column stacks
To keep point ticks
Draw Arbitrary grid
Show only when a series exists

Reading each section below will provide a good overview of how to manage multiple axes.

Using Multiple Axes

Bound to Series

Chart options include xAxis and yAxis properties. You can configure single Y axis chart options using an object with the Y axis property:

JSC.Chart("chartDivId", {
  yAxis: {}
})

To use multiple Y axes, define the options as an array of objects, one for each Y axis.

JSC.Chart("chartDivId", {
  yAxis: [
    {
      /*Y Axis 1 options*/
    },
    {
      /*Y Axis 2 options*/
    }
  ]
})

When multiple axes are defined, there is always a main axis and additional axes. All series bind to the main axis by default. To bind a series to a specific axis, specify the axis id property and the series.yAxis property with that id.

JSC.Chart("chartDivId", {
  yAxis: [{}, { id: "y2" }],
  series: [{}, { yAxis: "y2" }]
})

An example using multiple axes in this way:

Reference:
Multi Y Axes Sample Demonstrates using multiple Y axes associated with different series.

The following section describes what happens to axes that no series are bound to. They will sync with the main axis. However, you can disable this behavior by setting the axis scale_syncWith property to 'none'. In this case, axes will be ignored unless a series specifies them.

Sync with Main Axis

If no series binds to an axis, it can be used for other purposes.

In v2.9 and earlier, additional axes required setting scale_syncWith: 'targetAxisId' in order to sync scales with another axis.

In v3 and above, extra axes will sync with the main axis by default so you don't have to manually specify id settings. However, without extra settings, it will not duplicate the parent axis ticks until you indicate you want ticks to draw by default. You can do this by setting an interval, or using:

JSC.Chart("chartDivId", {
  yAxis: [{}, { defaultTick_enabled: true }]
})

With this approach, you can add an axis that duplicates a main axis showing, for example, Fahrenheit while also showing Celsius values on the extra axis as demonstrated in this example:

Reference:
Axis Shadowing Sample Defines multiple axes sharing common gridlines while using different units on each axis.

Extra Axis for Point Ticks

An exciting feature in JSCharting is point ticks. These allow a data point to have an X or Y axis tick that will get added to the Y axis at the point's y value. If the point y value is a range, the point's Y axis tick value will be a range tick.

Similar to the series.defaultPoint property, series also have firstPoint and lastPoint properties. Mix these features together, and you can replace the legend with a more interesting chart that is easier to read. This code demonstrates adding a Y axis tick at the last point of each series:

See the Pen Docs v3 - Point Ticks on Extra Axis by Arthur Puszynski (@jsblog) on CodePen.

Multiple column stacks

Additional axes can also be used to control multiple side-by-side column stacks. Using the Y axis scale_type: 'stacked' setting stacks all columns that share an x value across different series. You can bind two of the series with another Y axis to stack those columns in a separate stack. Since all series share an X axis, the column stacks do not overlap.

See the Pen Docs v3 - Multiple Axis Stacks by Arthur Puszynski (@jsblog) on CodePen.

Draw Arbitrary Grid Lines or Ticks

You can take full control of an axis to draw grid lines as well. Set the scale_range property with a min and max value to take control of the axis. Then specify the interval, gridLine or defaultTick properties as needed.

Documentation