There are five chart types that use Cartesian grids: bar, horizontalBar, line, scatter, and bubble. Every chart has two scales, one for each perpendicular axis. Each scale can be of four types:
- type:'linear': A numeric scale that can be used to compare values of the same order of magnitude.
- type:'logarithmic': A numeric scale to compare values that differ in order of magnitude.
- type:'category': A list of unordered categories.
- type:'time': An ordered list of instants. This scale requires the moment.js library.
In most charts, at least one of the scales is numeric (linear or logarithmic). In scatterplots and bubble charts, both scales are numeric. Time-series charts use a numeric scale and a time scale, but you can also use a category scale. You can also create correlation charts where both scales are categories.
The following table lists common configuration options for all Cartesian axes (the three last are objects, which contain specific configuration parameters that will be described in separate sections):
|
Property |
Value |
Description |
|
type |
'logarithmic', 'linear' (default for both axes in scatter and bubble charts, and in the y axis for line and bar charts), 'category' (default in the x axis for bar and line charts), 'time' (requires the moment.js library) |
Selects axis type. Note that some configuration properties are specific to certain types of axes, and others may not be supported. |
|
position |
top or bottom (default) for xAxes; |
The axis position. If there is more than one axis in the same position, it will be placed below or to the left of the existing axis. You can sort them using weight. See Cartesian/Cartesian-1-position.html. |
|
weight |
Number |
Order axes when more than one axis is in the same position. Larger numbers are position the axes farther from the chart. See Cartesian/Cartesian-2-weight.html. |
|
offset |
true or false (default for all axes except type:'category' in bar charts) |
If true, adds space to each side of the axis. |
|
id |
String |
Labels an axis so it can be related to a dataset, when using multiple axes. |
|
gridLines |
Object |
Configures grid lines. |
|
scaleLabel |
Object |
Configures scale titles. |
|
ticks |
Object |
Configures ticks. |
There are also 14 life cycle callback functions not listed here. These properties are always used inside objects of the scales.xAxes or scales.yAxes arrays. A typical configuration is shown as follows:
options: {
scales: {
xAxes: [{
ticks: {…},
scaleLabel: {…},
gridLines: {…}
}],
yAxes: [{
type: 'logarithmic',
position: 'left',
scaleLabel: {…},
]
}
}
This multi-level nesting hierarchy may sometimes be confusing. A common error is to place a property in the wrong object; no error messages are shown but nothing happens. In this chapter, we will use axis to refer to any axis object inside xAxes or yAxes (such as axis.ticks.minor, axis.scaleLabel), or use its full path from the scales object (such as scale.yAxes[0].ticks.minor). The exception is when they are listed in tables, but in this case the parent object will be qualified.