Chart.js/docs/axes/cartesian

Cartesian Axes

Axes that follow a cartesian grid are known as 'Cartesian Axes'. Cartesian axes are used for line, bar, and bubble charts. Four cartesian axes are included in Chart.js by default.

• linear
• logarithmic
• category
• time

Common Configuration

All of the included cartesian axes support a number of common options.

Name	Type	Default	Description
type	string		Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart.
position	string		Position of the axis. more...
axis	string		Which type of axis this is. Possible values are: 'x', 'y'. If not set, this is inferred from the first character of the ID which should be 'x' or 'y'.
offset	boolean	false	If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to true for a bar chart by default.
id	string		The ID is used to link datasets and scale axes together. more...
gridLines	object		Grid line configuration. more...
scaleLabel	object		Scale title configuration. more...
ticks	object		Tick configuration. more...

Axis Position

An axis can either be positioned at the edge of the chart, at the center of the chart area, or dynamically with respect to a data value.

To position the axis at the edge of the chart, set the position option to one of: 'top', 'left', 'bottom', 'right'. To position the axis at the center of the chart area, set the position option to 'center'. In this mode, either the axis option is specified or the axis ID starts with the letter 'x' or 'y'. To position the axis with respect to a data value, set the position option to an object such as:

{
    x: -20
}

This will position the axis at a value of -20 on the axis with ID "x". For cartesian axes, only 1 axis may be specified.

Tick Configuration

The following options are common to all cartesian axes but do not apply to other axes.

Name	Type	Default	Description
min	number		User defined minimum value for the scale, overrides minimum value from data.
max	number		User defined maximum value for the scale, overrides maximum value from data.
sampleSize	number	ticks.length	The number of ticks to examine when deciding how many labels will fit. Setting a smaller value will be faster, but may be less accurate when there is large variability in label length.
autoSkip	boolean	true	If true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to maxRotation before skipping any. Turn autoSkip off to show all labels no matter what.
autoSkipPadding	number	0	Padding between the ticks on the horizontal axis when autoSkip is enabled.
labelOffset	number	0	Distance in pixels to offset the label from the centre point of the tick (in the x direction for the x axis, and the y direction for the y axis). Note: this can cause labels at the edges to be cropped by the edge of the canvas
maxRotation	number	50	Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. Note: Only applicable to horizontal scales.
minRotation	number	0	Minimum rotation for tick labels. Note: Only applicable to horizontal scales.
mirror	boolean	false	Flips tick labels around axis, displaying the labels inside the chart instead of outside. Note: Only applicable to vertical scales.
padding	number	0	Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.

Axis ID

The properties dataset.xAxisID or dataset.yAxisID have to match to scales property. This is especially needed if multi-axes charts are used.

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            // This dataset appears on the first axis
            yAxisID: 'first-y-axis'
        }, {
            // This dataset appears on the second axis
            yAxisID: 'second-y-axis'
        }]
    },
    options: {
        scales: {
            'first-y-axis': {
                type: 'linear'
            },
            'second-y-axis': {
                type: 'linear'
            }]
        }
    }
});

Creating Multiple Axes

With cartesian axes, it is possible to create multiple X and Y axes. To do so, you can add multiple configuration objects to the xAxes and yAxes properties. When adding new axes, it is important to ensure that you specify the type of the new axes as default types are not used in this case.

In the example below, we are creating two Y axes. We then use the yAxisID property to map the datasets to their correct axes.

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [20, 50, 100, 75, 25, 0],
            label: 'Left dataset',

            // This binds the dataset to the left y axis
            yAxisID: 'left-y-axis'
        }, {
            data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
            label: 'Right dataset',

            // This binds the dataset to the right y axis
            yAxisID: 'right-y-axis'
        }],
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    options: {
        scales: {
            'left-y-axis': {
                type: 'linear',
                position: 'left'
            },
            'right-y-axis': {
                type: 'linear',
                position: 'right'
            }]
        }
    }
});