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](#grid-line-configuration) and [ticks](#tick-configuration).

## 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.
| `circular` | `boolean` | `false` | If true, gridlines are circular (on radar chart only).
| `color` | <code>Color&#124;Color[]</code> | `'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](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | `number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `lineWidth` | <code>number&#124;number[]</code> | `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](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `zeroLineBorderDashOffset` | `number` | `0.0` | Offset for line dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `offsetGridLines` | `boolean` | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a category scale in a bar chart by default.

## 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](../axes/labelling.md#creating-custom-tick-formats).
| `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).
| `lineHeight` | <code>number&#124;string</code> | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
| `reverse` | `boolean` | `false` | Reverses order of tick labels.
| `minor` | `object` | `{}` | Minor ticks configuration. Omitted options are inherited from options above.
| `major` | `object` | `{}` | Major ticks configuration. Omitted options are inherited from options above.
| `padding` | `number` | `0` | Sets the offset of the tick labels from the axis

## Minor Tick Configuration
The minorTick configuration is nested under the ticks configuration in the `minor` key. It defines options for the minor tick marks that are generated by the axis. Omitted options are inherited from `ticks` configuration.

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `callback` | `function` | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
| `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).
| `lineHeight` | <code>number&#124;string</code> | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).

## 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. Omitted options are inherited from `ticks` configuration.

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `callback` | `function` | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
| `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).
| `lineHeight` | <code>number&#124;string</code> | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
Update the docs structure/content to use GitBook (#3751) Update the docs structure/content to use GitBook 2017-03-21 01:36:54 +01:00			`# Styling`

			`There are a number of options to allow styling an axis. There are settings to control [grid lines](#grid-line-configuration) and [ticks](#tick-configuration).`

			`## 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`
Fix typos and make the docs consistent (#6020) 2019-01-29 13:34:16 +01:00			`\| ---- \| ---- \| ------- \| -----------`
			\| `display` \| `boolean` \| `true` \| If false, do not display grid lines for this axis.
			\| `circular` \| `boolean` \| `false` \| If true, gridlines are circular (on radar chart only).
			\| `color` \| <code>Color\|Color[]</code> \| `'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](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
			\| `borderDashOffset` \| `number` \| `0.0` \| Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
			\| `lineWidth` \| <code>number\|number[]</code> \| `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](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
			\| `zeroLineBorderDashOffset` \| `number` \| `0.0` \| Offset for line dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
			\| `offsetGridLines` \| `boolean` \| `false` \| If true, grid lines will be shifted to be between labels. This is set to `true` for a category scale in a bar chart by default.
Update the docs structure/content to use GitBook (#3751) Update the docs structure/content to use GitBook 2017-03-21 01:36:54 +01:00
			`## 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`
Fix typos and make the docs consistent (#6020) 2019-01-29 13:34:16 +01:00			`\| ---- \| ---- \| ------- \| -----------`
			\| `callback` \| `function` \| \| Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
			\| `display` \| `boolean` \| `true` \| If true, show tick marks.
minor doc fixes (#4851) 2017-10-17 00:45:54 +02:00			\| `fontColor` \| `Color` \| `'#666'` \| Font color for tick labels.
Fix typos and make the docs consistent (#6020) 2019-01-29 13:34:16 +01:00			\| `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).
			\| `lineHeight` \| <code>number\|string</code> \| `1.2` \| Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
			\| `reverse` \| `boolean` \| `false` \| Reverses order of tick labels.
Fix typos and broken links in the docs (#5010) 2017-11-30 14:41:32 +01:00			\| `minor` \| `object` \| `{}` \| Minor ticks configuration. Omitted options are inherited from options above.
			\| `major` \| `object` \| `{}` \| Major ticks configuration. Omitted options are inherited from options above.
Fix typos and make the docs consistent (#6020) 2019-01-29 13:34:16 +01:00			\| `padding` \| `number` \| `0` \| Sets the offset of the tick labels from the axis
Time axis tick formatting with major and minor units (#4268) Working towards creating the TimeSeries scale, this PR adds formatting for major and minor ticks on axes. 2017-06-15 13:20:16 +02:00
			`## Minor Tick Configuration`
			The minorTick configuration is nested under the ticks configuration in the `minor` key. It defines options for the minor tick marks that are generated by the axis. Omitted options are inherited from `ticks` configuration.

			`\| Name \| Type \| Default \| Description`
Fix typos and make the docs consistent (#6020) 2019-01-29 13:34:16 +01:00			`\| ---- \| ---- \| ------- \| -----------`
			\| `callback` \| `function` \| \| Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
minor doc fixes (#4851) 2017-10-17 00:45:54 +02:00			\| `fontColor` \| `Color` \| `'#666'` \| Font color for tick labels.
Fix typos and make the docs consistent (#6020) 2019-01-29 13:34:16 +01:00			\| `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).
			\| `lineHeight` \| <code>number\|string</code> \| `1.2` \| Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
Time axis tick formatting with major and minor units (#4268) Working towards creating the TimeSeries scale, this PR adds formatting for major and minor ticks on axes. 2017-06-15 13:20:16 +02:00
			`## 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. Omitted options are inherited from `ticks` configuration.

			`\| Name \| Type \| Default \| Description`
Fix typos and make the docs consistent (#6020) 2019-01-29 13:34:16 +01:00			`\| ---- \| ---- \| ------- \| -----------`
			\| `callback` \| `function` \| \| Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
minor doc fixes (#4851) 2017-10-17 00:45:54 +02:00			\| `fontColor` \| `Color` \| `'#666'` \| Font color for tick labels.
Fix typos and make the docs consistent (#6020) 2019-01-29 13:34:16 +01:00			\| `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).
			\| `lineHeight` \| <code>number\|string</code> \| `1.2` \| Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).