Styling | Chart.js
Description: Open source HTML5 Charts for your website

# # 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
--- | --- | --- | --- | --- | ---
`borderColor` | `Color` |  |  | `Chart.defaults.borderColor` | The color of the border line.
`borderWidth` | `number` |  |  | `1` | The width of the border line.
`borderDash` | `number[]` | Yes |  | `[]` | Length and spacing of dashes on grid lines. See MDN (opens new window).
`borderDashOffset` | `number` | Yes |  | `0.0` | Offset for line dashes. See MDN (opens new window).
`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.
`drawBorder` | `boolean` |  |  | `true` | If true, draw a 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.
`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` |  |  | `0` | z-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`

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.