Vue ChartsSecondary Axes

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

Creating a Secondary Axis Copy Link

The easiest way to create a secondary axis is by linking a series to a new axis key with the series[].yKeyAxis property.

If a series provides a yKeyAxis value that is not the default of 'y', a new axis with default properties will be automatically created.

This allows you to create and use a secondary axis without any explicit axis configuration.

In this example:

• The bar series do not specify a yKeyAxis, so they are linked to the default primary 'y' axis.
• The line series specifies yKeyAxis: 'ySecondary', which automatically creates a new secondary axis.
• Any number of y axes can be created in this way and the same concept applies to x-axes using the xKeyAxis property.

{
    series: [
        // These two series are linked to the default 'y' axis
        { type: 'bar', xKey: 'year', yKey: 'male' },
        { type: 'bar', xKey: 'year', yKey: 'female' },

        // This series is linked to a new, automatically created 'ySecondary' axis
        {
            type: 'line',
            xKey: 'year',
            yKey: 'exportedTonnes',
            yKeyAxis: 'ySecondary',
        },
    ],
}

Configuring Axes Copy Link

Automatic creation is useful in many cases, but explicit axis configuration is often required, for example to add a title or change its position.

To do this, the configured axes are declared in the axes property. The keys used here must match the keys used by the yKeyAxis property on the series.

{
    axes: {
        y: {
            // This configures the default y-axis
            type: 'number',
            position: 'left',
            title: { text: 'Number of cattle' },
        },
        ySecondary: {
            // This configures the 'ySecondary' used by the line series
            type: 'number',
            position: 'right',
            title: { text: 'Exports (tonnes)' },
        },
    },
}

Custom Axes Keys Copy Link

The above example used the default key of 'y' and an additional key of ySecondary.

To increase readability, especially when dealing with multiple axes with distinct meanings, more descriptive axis keys should be used.

For example, to name the axes cattleAxis and exportsAxis, just set this in the series yKeyAxis properties. The axes keys are now these values and the default y axis is not used.

series: [
    { type: 'bar', xKey: 'year', yKey: 'male', yKeyAxis: 'cattleAxis' },
    { type: 'bar', xKey: 'year', yKey: 'female', yKeyAxis: 'cattleAxis' },
    { type: 'line', xKey: 'year', yKey: 'exportedTonnes', yKeyAxis: 'exportsAxis' },
],
axes: {
    cattleAxis: {
        type: 'number',
        position: 'left',
        title: { text: 'Number of cattle' },
    },
    exportsAxis: {
        type: 'number',
        position: 'right',
        title: { text: 'Exports (tonnes)' },
    },
}