JavaScript ChartsAxis Position

Cartesian axes can be positioned on the top, bottom, left, or right edge of the chart.

Axis Placement Copy Link

The axis position property controls where the axis is rendered. By default, horizontal axes appear at the bottom of the chart and vertical axes appear on the left.

{
    axes: [
        {
            type: 'category',
            position: 'bottom',
            title: { text: 'Quarter' },
        },
        {
            type: 'number',
            position: 'left',
            keys: ['revenue'],
            title: { text: 'Revenue ($M)' },
        },
        {
            type: 'number',
            position: 'right',
            keys: ['profitMargin'],
            title: { text: 'Profit Margin (%)' },
        },
    ],
}

Secondary Axes default to the opposite edge from the primary axis, but it is possible to have multiple axes on the same edge. These are displayed alongside each other.

Axis Crossing Point Copy Link

The crossAt option allows an axis to intersect a perpendicular axis at a specific axis value instead of the chart edge. This is useful for centring the chart origin or aligning axes to highlight particular thresholds.

{
    axes: [
        {
            type: 'number',
            position: 'left',
            // place the left axis at '0' on the bottom axis scale
            crossAt: { value: 0 },
        },
        {
            type: 'number',
            position: 'bottom',
            // place the bottom axis at '0' on the left axis scale
            crossAt: { value: 0 },
        },
    ],
}

In this example:

• Both axes have a crossAt.value set. It is also possible to set it on a single axis only.
• The crossAt.value must be of the same type as the perpendicular axis domain, such as Number or Date.
• The crossAt target value should be within the domain of the perpendicular axis.

When the target value leaves the visible range, such as by Zooming, the axis will stick to the edge of the chart and remain in view.

Set sticky: false to allow the axis to be moved out of view in this scenario.