Multiple Cartesian axes

You only need two axes to plot data in a two-dimensional Cartesian grid, but you can add more if you need to. You may wish to repeat axis titles or tick labels on both sides of a chart for clarity. You may also wish to show two datasets with different scales (although this is usually a bad practice in data visualization).

If you have multiple axes, you can control their positions with the axis.weight and axis.position properties. Unless you connect an axis to a specific dataset using the id property, the first axis in the yAxis array will be used for all datasets. A dataset is linked to an axis using the yAxisID or xAxisID properties that reference the ID of an axis. See Advanced/adv-1-position-evil.html for an example.

The following code fragment configures three axes for a chart, and places them on different sides of the chart. It doesn’t explicitly link any dataset, since they all use the same scales:

scales: {
     yAxes: [{
         id: 'y-axis-1',
         ticks: {min: -2,max: 2},
         scaleLabel: {display: true, labelString: "Left Axis"},
         position: 'left'
     },{
         id: 'y-axis-2',
         ticks: {min: -2, max: 2},
         scaleLabel: {display: true,labelString: "Right Axis"},
         gridLines: {display: false},
         position: 'right'
     }],
     xAxes: [{
         ticks: {min: -4, max: 4},
         scaleLabel: {display: true,labelString: "Top Axis"},
         position: 'top'
     }],
 }

See the full code in Cartesian/Cartesian-1-position.html.The result is shown as follows:

A chart with three axes, in different positions. Code: Cartesian/Cartesian-1-position.html.

You can also stack axes on the same side, as shown as follows. This is useful in categorical scales when you wish to add a context. In this example, an extra category scale was added for the oceans:

const labels = ["Arctic", "North Atlantic", "South Atlantic", "Indian",
                 "North Pacific", "South Pacific", "Southern"];
 const labels2 = ["","Atlantic", "", "Pacific",""];
// ...
xAxes: [
     {
         weight: 10,
         labels: labels,
         ticks: {
             fontColor: 'black'
         }
     },{
         weight: 20,
         labels: labels2,
         ticks: {
             fontColor: 'purple'
         },
         offset: true
     },
 ]

The result is shown as follows. See the full code in Cartesian/Cartesian-2-weight.html:

A chart with two category axes on the same side. Code: Cartesian/Cartesian-2-weight.html.

It might be a good idea to hide or configure the grid lines from the second category scale, so they won’t leak into the chart area.