Styling · Chart.js documentation
Author: chartjs

# 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/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/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, grid lines will be shifted to be between labels. This is set to `true` in the 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.
`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.
`minor` | `object` | `{}` | Minor ticks configuration. Omitted options are inherited from options above.
`major` | `object` | `{}` | Major ticks configuration. Omitted options are inherited from options above.

## 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.
`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).

## 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.
`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).

# results matching ""

# No results matching ""