Configuring grid lines

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, ...

Get Learn Chart.js now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.