Javascript ChartsSecondary Axes

ReactAngularVueJavascript

Secondary axes are typically used to compare data sets with different scales, with extra axes usually located on the opposite side of the chart.

Configuring Secondary Axes

An extra axis configuration is needed to associate a secondary axis with the appropriate series, where the keys axis property links the series to the axis.

axes: [
    // x-axis
    {
        type: 'category',
        position: 'bottom',
    },
    // primary y-axis
    {
        type: 'number',
        position: 'left',
        keys: ['male', 'female'],
    },
    // secondary y-axis
    {
        type: 'number',
        position: 'right',
        keys: ['exportedTonnes'],
    },
],

In this configuration:

• The axis keys property on the primary axis (left) matches the yKeys of the column series.
• The axis keys property on the secondary axis (right) matches the yKey of the line series.
• The secondary axis has the position of right.

Any number of additional axes can be added to a chart using the same approach.

For series with multiple keys only a single matching entry in keys is needed.