Ticks are discrete points placed along an axis. Their position determines how the data points will be plotted in relation to the axis. In numeric scales, the axis.ticks property configures numerical parameters such as the maximum and minimum values that an axis will display and the amount of ticks to show. In any Cartesian scale, it can be used apply styles to tick labels and configure padding and other positioning parameters. Tick markers are configured separately in the axis.gridLines property.
The following table lists tick properties that can be configured for any Cartesian scale:
|
Property |
Value |
Description |
|
display |
true (default) or false |
Shows or hides tick labels. |
|
fontSize |
Number |
The font size in pixels. |
|
fontColor, fontFamily, fontStyle |
String |
CSS font attributes. |
|
reverse |
true or false (default) |
Reverses the order of tick labels. |
|
callback |
Function. Default: d=>d |
The function receives the value of the tick. It can be used to hide ticks or change the values displayed. |
|
labelOffset |
Number. Default: 0 |
Offsets the label from the center point of the tick. |
|
mirror |
true or false (default) |
Flips labels around the axis to the inside of the chart. |
|
padding |
Number. Default: 10 |
Space between tick label and the axis. |
|
autoSkip |
true (default) or false |
If there is not enough space for horizontal labels, they are skipped. autoSkip:true always shows them. |
|
maxRotation |
Number. Default: 90 |
Maximum rotation of label in the xAxis. |
|
minRotation |
Number. Default: 0 |
Minimum rotation of label in the xAxis. |
The following table lists additional tick properties supported by numeric scales (linear or logarithmic):
|
Property |
Value |
Description |
|
min |
Number |
The lower limit of the axis. |
|
max |
Number |
The upper limit of the axis. |
|
suggestedMin |
Number |
Will set this as the minimum, if the data’s minimum is larger. |
|
suggestedMax |
Number |
Will set this as the maximum, if the data’s maximum is smaller. |
|
beginAtZero |
true (default) or false |
Forces the axis to use zero as the lower limit. |
|
stepSize |
Number |
Sets a minimum step size between ticks. Overrides precision. |
|
maxTicksLimit |
Number. Default is 11. |
Explicitly sets a maximum number of ticks for the axis. |
The following configuration was applied to one of the bar charts we created in Chapter 3, Chart.js – Quick Start. It uses the axis.ticks.callback property to add the word ocean as a suffix to the tick labels in the horizontal axis. The vertical axis was reversed, making the bars appear upside-down:
scales: {
xAxes: [{
ticks: {
callback: d => d + ' ocean'
}
}],
yAxes: [{
ticks: {
reverse: true,
}
}]
}
The result is shown here. See the full code in Cartesian/Cartesian-4-ticks-style.html:
Code: Cartesian/Cartesian-4-ticks-style.html
Chart.js automatically calculates the minimum range for each of the axes so that the data can be rendered in the most efficient way possible. But you can explicitly set minimum and maximum values using axis.ticks.min and axis.ticks.max properties. In this case, any parts of the chart that fall out of range will not be displayed. Alternatively, you can use axis.ticks.suggestedMin and axis.ticks.suggestedMax, which also limit the range, but only if no data values are left out. The following code applies these properties to a scatter chart, and adds more ticks (default maximum is 11) by setting a smaller value for axis.ticks.stepSize:
scales: {
xAxes: [{
ticks: {
padding: 10,
stepSize: 20,
}
}],
yAxes: [{
ticks: {
padding: 10,
min: -0.6,
suggestedMax: 0.6, // ignored, because data is larger
}
}]
}
The result of this configuration is shown as follows. The full code is in Cartesian/Cartesian-5-ticks-minmax.html:
Code: Cartesian/Cartesian-5-ticks-minmax.html