Axes
There are several types of chart axes: Linear, Logarithmic, Time, Categorical, and Radial. If you are looking to create a standard chart, chances are you want to use a linear or time axis.
Axes are configured in the options.scales object. Learn more about chart axes, including attributes to customize those axes, here. Because a wide variety of customizations are possible, we've prepared a number of examples. Head over to the gallery to see some examples of custom axes and scales.
Setting the range
Minimum and maximum values
To set the range of chart values, use axis.ticks.min and axis.ticks.max. Use axis.ticks.stepSize to control the increment of each tick mark. For more information, see Chart.js ticks.
This example sets the start value to 0 and the end value to 100, with tick marks every 20:
- Chart.js v2
- Chart.js v3+
X or Y axis:
{
// ...
options: {
scales: {
yAxes: [
{
ticks: {
min: 0,
max: 100,
stepSize: 20,
},
},
];
}
}
}
Radial axis (used in radar and polar area charts):
{
// ...
options: {
scale: {
ticks: {
min: 0,
max: 100,
stepSize: 20,
},
}
}
}
Linear axes (x and y):
{
// ...
options: {
scales: {
y: {
min: 0,
max: 100,
ticks: {
stepSize: 20,
},
},
}
}
}
Radial axes (such as radar and polar area charts):
{
// ...
options: {
scales: {
r: {
min: 0,
max: 100,
ticks: {
stepSize: 20,
},
},
}
}
}
Starting ticks at 0
By default, Chart.js will fit the axis range to a reasonable minimum and maximum. In some cases, you may prefer that the minimum is always 0. To do this, set beginAtZero on the ticks object:
- Chart.js v2
- Chart.js v3+
{
// ...
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
];
}
}
}
{
// ...
options: {
scales: {
y: {
beginAtZero: true,
},
}
}
}
Creating stacked charts
You can use the axis object to create a stacked bar chart by setting stacked to true on each axis. Read more here.
The multiple axes example below includes a stacked bar chart.
Multiple axes
It is possible to create two or more X or Y axes by providing multiple objects in the options.scales.xAxes or options.scales.yAxes lists. For each axis, set display to true and give it an id. Each dataset should reference this id as yAxisID or xAxisID.
This example uses Chart.js v2: