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.

NameTypeScriptableIndexableDefaultDescription
borderColorColorChart.defaults.borderColorThe color of the border line.
borderWidthnumber1The width of the border line.
borderDashnumber[][]Length and spacing of dashes on grid lines. See MDNStyling - 图1 (opens new window).
borderDashOffsetnumberYes0.0Offset for line dashes. See MDNStyling - 图2 (opens new window).
circularbooleanfalseIf true, gridlines are circular (on radar chart only).
colorColorYesYesChart.defaults.borderColorThe 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.
displaybooleantrueIf false, do not display grid lines for this axis.
drawBorderbooleantrueIf true, draw a border at the edge between the axis and the chart area.
drawOnChartAreabooleantrueIf 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.
drawTicksbooleantrueIf true, draw lines beside the ticks in the axis area beside the chart.
lineWidthnumberYesYes1Stroke width of grid lines.
offsetbooleanfalseIf true, grid lines will be shifted to be between labels. This is set to true for a bar chart by default.
tickBorderDashnumber[]Length and spacing of the tick mark line. If not set, defaults to the grid line borderDash value.
tickBorderDashOffsetnumberYesYesOffset for the line dash of the tick mark. If unset, defaults to the grid line borderDashOffset value
tickColorColorYesYesColor of the tick line. If unset, defaults to the grid line color.
tickLengthnumber8Length in pixels that the grid lines will draw into the axis area.
tickWidthnumberYesYesWidth of the tick mark in pixels. If unset, defaults to the grid line width.
znumber0z-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

NameTypeScriptableDefaultDescription
callbackfunctionReturns the string representation of the tick value as it should be displayed on the chart. See callback.
displaybooleantrueIf true, show tick labels.
colorColorYesChart.defaults.colorColor of ticks.
fontFontYesChart.defaults.fontSee Fonts
majorobject{}Major ticks configuration.
paddingnumber3Sets the offset of the tick labels from the axis
textStrokeColorColorYes``The color of the stroke around the text.
textStrokeWidthnumberYes0Stroke width around the text.
znumber0z-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.

NameTypeDefaultDescription
enabledbooleanfalseIf true, major ticks are generated. A major tick will affect autoskipping and major will be defined on ticks in the scriptable options context.