mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-07 20:59:08 +02:00
7dc71d009b
Add a new `offset` option to scales to add extra space at edges and remove the `includeOffset` argument from `getPixelForValue()` and `getPixelForTick()`. The bar controller now automatically calculates the bar width to avoid overlaps. When `offsetGridLines` is true, grid lines move to the left by one half of the tick interval, and labels don't move.
62 lines
5.5 KiB
Markdown
62 lines
5.5 KiB
Markdown
# 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.
|
|
| `color` | Color or 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](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
|
|
| `borderDashOffset` | `Number` | `0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
|
|
| `lineWidth` | `Number or 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](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
|
|
| `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)
|
|
| `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](../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).
|
|
| `reverse` | `Boolean` | `false` | Reverses order of tick labels.
|
|
| `minor` | `object` | `{}` | Minor ticks configuration. Ommited options are inherited from options above.
|
|
| `major` | `object` | `{}` | Major ticks configuration. Ommited 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](../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).
|
|
|
|
## 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).
|