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.
color	Color or Color[]	'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	0	Offset for line dashes. See MDN
lineWidth	Number or Number[]	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.
zeroLineWidth	Number	1	Stroke width of the grid line for the first index (index 0).
zeroLineColor	Color	'rgba(0, 0, 0, 0.25)'	Stroke color of the grid line for the first index (index 0).
zeroLineBorderDash	Number[]	[]	Length and spacing of dashes of the grid line for the first index (index 0). See MDN
zeroLineBorderDashOffset	Number	0	Offset for line dashes of the grid line for the first index (index 0). See MDN
offsetGridLines	Boolean	false	If true, labels are shifted to be between grid lines. This is used in the bar chart and should not generally be used.

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	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 marks
fontColor	Color	'#666'	Font color for tick labels.
fontFamily	String	"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"	Font family for the tick labels, follows CSS font-family options.
fontSize	Number	12	Font size for the tick labels.
fontStyle	String	'normal'	Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
reverse	Boolean	false	Reverses order of tick labels.