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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset