Styling

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