Ticks in radial axes are concentric circles (which can be rendered as circles or multi-sided regular polygons, with vertices at each angle line). Tick labels are placed on the circles with a backdrop behind them.
Ticks are configured in the scale.ticks object with the following properties:
|
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. |
|
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. |
|
maxTicksLimit |
Number; default is 11 |
Explicitly sets a maximum number of ticks for the axis. |
|
showLabelBackdrop |
true or false; default is true |
Draws a background behind tick labels over the grid lines. |
|
backdropPaddingX backdropPaddingY |
Number; default is 2 |
Backdrop padding. |
|
backdropColor |
Color; default is rgba(255,255,255,.75) |
Color of the label backdrops. |
Tick properties are similar to those used in Cartesian linear charts. The following code shows some tick configurations applied to a radar chart:
scale: {
ticks: {
fontColor: 'blue',
callback: (d) => d + ' m',
reverse: true,
min: 0,
}
}
The result is shown here. See the full code in Radial/radial-4-ticks.html:
