| commit | author | age | ||
| 83c3f6 | 1 | # Styling |
| SP | 2 | |
| 3 | 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). | |
| 4 | ||
| 5 | ## Grid Line Configuration | |
| 6 | ||
| 7 | 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. | |
| 8 | ||
| 9 | | Name | Type | Default | Description | |
| 10 | | -----| ---- | --------| ----------- | |
| 11 | | `display` | `Boolean` | `true` | If false, do not display grid lines for this axis. | |
| 12 | | `circular` | `Boolean` | `false` | If true, gridlines are circular (on radar chart only) | |
| 13 | | `color` | `Color/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. | |
| 14 | | `borderDash` | `Number[]` | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash) | |
| 15 | | `borderDashOffset` | `Number` | `0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset) | |
| 16 | | `lineWidth` | `Number/Number[]` | `1` | Stroke width of grid lines. | |
| 17 | | `drawBorder` | `Boolean` | `true` | If true, draw border at the edge between the axis and the chart area. | |
| 18 | | `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. | |
| 19 | | `drawTicks` | `Boolean` | `true` | If true, draw lines beside the ticks in the axis area beside the chart. | |
| 20 | | `tickMarkLength` | `Number` | `10` | Length in pixels that the grid lines will draw into the axis area. | |
| 21 | | `zeroLineWidth` | `Number` | `1` | Stroke width of the grid line for the first index (index 0). | |
| 22 | | `zeroLineColor` | Color | `'rgba(0, 0, 0, 0.25)'` | Stroke color of the grid line for the first index (index 0). | |
| 23 | | `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) | |
| 24 | | `zeroLineBorderDashOffset` | `Number` | `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) | |
| 25 | | `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. | |
| 26 | ||
| 27 | ## Tick Configuration | |
| 28 | 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. | |
| 29 | ||
| 30 | | Name | Type | Default | Description | |
| 31 | | -----| ---- | --------| ----------- | |
| 32 | | `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). | |
| 33 | | `display` | `Boolean` | `true` | If true, show tick marks | |
| 34 | | `fontColor` | `Color` | `'#666'` | Font color for tick labels. | |
| 35 | | `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options. | |
| 36 | | `fontSize` | `Number` | `12` | Font size for the tick labels. | |
| 37 | | `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). | |
| 38 | | `reverse` | `Boolean` | `false` | Reverses order of tick labels. | |
| 39 | | `minor` | `object` | `{}` | Minor ticks configuration. Omitted options are inherited from options above. | |
| 40 | | `major` | `object` | `{}` | Major ticks configuration. Omitted options are inherited from options above. | |
| 41 | ||
| 42 | ## Minor Tick Configuration | |
| 43 | 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. | |
| 44 | ||
| 45 | | Name | Type | Default | Description | |
| 46 | | -----| ---- | --------| ----------- | |
| 47 | | `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). | |
| 48 | | `fontColor` | `Color` | `'#666'` | Font color for tick labels. | |
| 49 | | `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options. | |
| 50 | | `fontSize` | `Number` | `12` | Font size for the tick labels. | |
| 51 | | `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). | |
| 52 | ||
| 53 | ## Major Tick Configuration | |
| 54 | 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. | |
| 55 | ||
| 56 | | Name | Type | Default | Description | |
| 57 | | -----| ---- | --------| ----------- | |
| 58 | | `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). | |
| 59 | | `fontColor` | `Color` | `'#666'` | Font color for tick labels. | |
| 60 | | `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options. | |
| 61 | | `fontSize` | `Number` | `12` | Font size for the tick labels. | |
| 62 | | `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). | |
