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
borderColor	Color			Chart.defaults.borderColor	The color of the border line.
borderWidth	number			1	The width of the border line.
borderDash	number[]	Yes		[]	Length and spacing of dashes on grid lines. See MDN (opens new window).
borderDashOffset	number	Yes		0.0	Offset for line dashes. See MDN (opens new window).
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.
drawBorder	boolean			true	If true, draw a border at the edge between the axis and the chart area.
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			0	z-index of 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.