docs/axes/styling.md
There are a number of options to allow styling an axis. There are settings to control grid lines and ticks.
Namespace: options.scales[scaleId].grid, it defines options for the grid lines that run perpendicular to the axis.
| Name | Type | Scriptable | Indexable | Default | Description |
|---|---|---|---|---|---|
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. | ||
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[] | Yes | Yes | [] | 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 | -1 | z-index of the gridline layer. Values <= 0 are drawn under datasets, > 0 on top. |
The scriptable context is described in Options section.
!!!include(axes/_common_ticks.md)!!!
The scriptable context is described in Options section.
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. |
Namespace: options.scales[scaleId].border, it defines options for the border that run perpendicular to the axis.
| Name | Type | Scriptable | Indexable | Default | Description |
|---|---|---|---|---|---|
display | boolean | true | If true, draw a border at the edge between the axis and the chart area. | ||
color | Color | Chart.defaults.borderColor | The color of the border line. | ||
width | number | 1 | The width of the border line. | ||
dash | number[] | Yes | [] | Length and spacing of dashes on grid lines. See MDN. | |
dashOffset | number | Yes | 0.0 | Offset for line dashes. See MDN. | |
z | number | 0 | z-index of the border layer. Values <= 0 are drawn under datasets, > 0 on top. |