Chart.js/docs/axes/styling.md

Styling

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

Grid Line Configuration

The grid line configuration is nested under the scale configuration in the gridLines key. It defines options for the grid lines that run perpendicular to the axis.

Name	Type	Default	Description
display	boolean	true	If false, do not display grid lines for this axis.
borderColor	Color		If set, used as the color of the border line. If unset, the first color option is resolved and used.
borderWidth	number		If set, used as the width of the border line. If unset, the first lineWidth option is resolved and used.
circular	boolean	false	If true, gridlines are circular (on radar chart only).
color	Color|Color[]|function	'rgba(0, 0, 0, 0.1)'	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.
borderDash	number[]	[]	Length and spacing of dashes on grid lines. See MDN.
borderDashOffset	number|function	0.0	Offset for line dashes. See MDN.
lineWidth	number|number[]|function	1	Stroke width of grid lines.
drawBorder	boolean	true	If true, draw 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.
tickMarkLength	number	10	Length in pixels that the grid lines will draw into the axis area.
offsetGridLines	boolean	false	If true, grid lines will be shifted to be between labels. This is set to true for a bar chart by default.
z	number	0	z-index of gridline layer. Values <= 0 are drawn under datasets, > 0 on top.

For function arguments, the function is passed a context object that is of the form:

{
    scale: // Scale object
    tick: // Tick object
}

Tick Configuration

The tick configuration is nested under the scale configuration in the ticks key. It defines options for the tick marks that are generated by the axis.

| Name | Type | Scriptable | Default | Description | ---- | ---- | ------- | ----------- | 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. | fontColor | Color | Yes | '#666' | Font color for tick labels. | fontFamily | string | Yes | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | Font family for the tick labels, follows CSS font-family options. | fontSize | number | Yes | 12 | Font size for the tick labels. | fontStyle | string | Yes | 'normal' | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). | lineHeight | number|string | Yes | 1.2 | Height of an individual line of text (see MDN). | lineWidth | number | Yes | 0 | Stroke width around the text. | major | object | | {} | Major ticks configuration. | padding | number | | 0 | Sets the offset of the tick labels from the axis | reverse | boolean | | false | Reverses order of tick labels. | strokeStyle | string | Yes | `` | The color of the stroke 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.

Major Tick Configuration

The majorTick configuration is nested under the ticks configuration in the major key. 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.