Cartesian grids support several properties that change their appearance on the screen. You can change colors, line widths, line styles, tick size, spacing for the grid lines, and different styles for the zero line. You can also show and hide grid lines, ticks, and borders, reducing the amount of unnecessary chart junk and making your chart more efficient.
These properties are configured in the gridLines object inside each object of the xAxes or yAxes arrays and are listed here:
|
Property |
Value |
Description |
|
display |
true (default) or false |
Shows or hides the grid lines for this axis. |
|
color |
A CSS color or array of colors; default is ‘rgba(0,0,0,.1)’ |
The color of the grid lines. If an array is used, sets a color for each line. |
|
lineWidth |
Number; default is 1 |
The width of the grid lines. |
|
borderDash |
Number[] |
A dash array for the grid lines. |
|
borderDashOffset |
Number |
The dash offset for the grid lines. |
|
drawBorder |
true (default) or false |
Draws/hides the axis line. |
|
drawOnChartArea |
true (default) or false |
Draws/hides grid lines inside the chart for the axis. |
|
drawTicks |
true (default) or false |
Draws/hides the tick marks. |
|
tickMarkLength |
Number |
The size of the tick mark. |
|
zeroLineWidth |
Number |
The width of the zero line. |
|
zeroLineColor |
CSS color |
The color of the zero line. |
|
zeroLineBorderDash |
Number[] |
A dash array for the zero line. |
|
zeroLineBorderDashOffset |
Number |
The dash offset for the zero line. |
|
offsetGridLines |
true or false |
Moves the grid lines between labels (default in bar charts). |
Some grid-line configuration examples are shown here. This code applies different colors to the vertical grid lines and a dash array for the horizontal lines. The axis lines are hidden because axis.gridLines.drawBorder is false. A different width and color was applied to the zero lines on both axes:
scales: {
xAxes: [{
gridLines: {
color: ['#fff','#d30','#b33',...,'#09b','#09e'],
lineWidth: 2,
zeroLineColor: 'black',
zeroLineWidth: 5,
drawBorder: false
},
ticks: {
padding: 10,
callback: function(d) {return d != 200 ? d : undefined;}
}
}],
yAxes: [{
gridLines: {
zeroLineColor: 'black',
zeroLineWidth: 5,
lineWidth: 2,
borderDash: [5, 5],
drawBorder: false
},
ticks: { padding: 10 }
}]
}
The result is shown in the following screenshot. The full code is in Cartesian/Cartesian-6-grid-styles.html:
Code: Cartesian/Cartesian-6-grid-styles.html
Tick marks are lines that cross outside of the chart area. You can hide them with axis.gridLines.drawTicks:false or make them longer or shorter with axis.gridLines.tickMarkLength. You can hide gridLines inside the chart area with axis.gridLines.drawOnChartArea:false and the axis line with axis.gridLines.drawBorder:false. These properties were used to configure the following chart (Cartesian/Cartesian-7-grid-styles.html):
Code: Cartesian/Cartesian-7-grid-styles.html
This configuration hides ticks and gridLines to produce a minimalistic chart with a single centered y axis:
options: {
scales: {
xAxes: [{
ticks: { display: false },
gridLines: { display: false }
}],
yAxes: [{
ticks: {
mirror: true,
padding: -(canvas.width/2)
},
gridLines: {
drawBorder: false,
drawOnChartArea: false,
drawTicks: false,
offsetGridLines: true
}
}]
}
}
The result applied to a line chart is shown here. See the full code in Cartesian/Cartesian-8-grid-minimal.html:
