Cartesian Axes
All of the included cartesian axes support a number of common options.
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 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 the scale properties scales.xAxes.id
or scales.yAxes.id
. This is especially needed if multi-axes charts are used.
Creating Multiple Axes
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',
datasets: [{
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: {
yAxes: [{
id: 'left-y-axis',
type: 'linear',
position: 'left'
}, {
id: 'right-y-axis',
type: 'linear',
position: 'right'
}]
}
});