# Styling

There are a number of options to allow styling an axis. There are settings to control grid lines and ticks.

# Grid Line Configuration

Namespace: options.scales[scaleId].grid, it defines options for the grid lines that run perpendicular to the axis.

Name Type Scriptable Indexable Default Description
circular boolean false If true, gridlines are circular (on radar and polar area charts only).
color Color Yes Yes Chart.defaults.borderColor The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line, and so on.
display boolean true If false, do not display grid lines for this axis.
drawOnChartArea boolean true If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn.
drawTicks boolean true If true, draw lines beside the ticks in the axis area beside the chart.
lineWidth number Yes Yes 1 Stroke width of grid lines.
offset boolean false If true, grid lines will be shifted to be between labels. This is set to true for a bar chart by default.
tickBorderDash number[] Length and spacing of the tick mark line. If not set, defaults to the grid line borderDash value.
tickBorderDashOffset number Yes Yes Offset for the line dash of the tick mark. If unset, defaults to the grid line borderDashOffset value
tickColor Color Yes Yes Color of the tick line. If unset, defaults to the grid line color.
tickLength number 8 Length in pixels that the grid lines will draw into the axis area.
tickWidth number Yes Yes Width of the tick mark in pixels. If unset, defaults to the grid line width.
z number -1 z-index of the gridline layer. Values <= 0 are drawn under datasets, > 0 on top.

The scriptable context is described in Options section.

# Tick Configuration

# Common tick options to all axes

Namespace: options.scales[scaleId].ticks

Name Type Scriptable Default Description
backdropColor Color Yes 'rgba(255, 255, 255, 0.75)' Color of label backdrops.
backdropPadding Padding 2 Padding of label backdrop.
callback function Returns the string representation of the tick value as it should be displayed on the chart. See callback.
display boolean true If true, show tick labels.
color Color Yes Chart.defaults.color Color of ticks.
font Font Yes Chart.defaults.font See Fonts
major object {} Major ticks configuration.
padding number 3 Sets the offset of the tick labels from the axis
showLabelBackdrop boolean Yes true for radial scale, false otherwise If true, draw a background behind the tick labels.
textStrokeColor Color Yes `` The color of the stroke around the text.
textStrokeWidth number Yes 0 Stroke width around the text.
z number 0 z-index of tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top.

The scriptable context is described in Options section.

# Major Tick Configuration

Namespace: options.scales[scaleId].ticks.major, it defines options for the major tick marks that are generated by the axis.

Name Type Default Description
enabled boolean false If true, major ticks are generated. A major tick will affect autoskipping and major will be defined on ticks in the scriptable options context.

# Border Configuration

Namespace: options.scales[scaleId].border, it defines options for the border that run perpendicular to the axis.

Name Type Scriptable Indexable Default Description
display boolean true If true, draw a border at the edge between the axis and the chart area.
color Color Chart.defaults.borderColor The color of the border line.
width number 1 The width of the border line.
dash number[] Yes [] Length and spacing of dashes on grid lines. See MDN (opens new window).
dashOffset number Yes 0.0 Offset for line dashes. See MDN (opens new window).
z number 0 z-index of the border layer. Values <= 0 are drawn under datasets, > 0 on top.
Last Updated: 1/18/2023, 1:35:00 PM