mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-07 20:59:08 +02:00
ed2b96eeaf
* Initial work * Update doc commands * Updated sidebar config * Move docs * Update theme version and enable * Convert to chart.js sample * Update scripts to point to local build * Chart.js from local build * Simplify getting-started example * Axis docs updated except for imported content * Common ticks import works * Chart type docs ported to editor plugin * Last pages to use editor * Fix small errors * Frontmatter title to heading * Remove duplicate example * Update sidebar * Add paths * Remove paths * Add getting-started back * Update menus and add copyright to license section of the docs * Add GA plugin * Style sub-groups * Remove unneeded license page since it is covered on the main page * Remove docusaurus readme page * Remove docusaurus files * Fix issues in docs * Build and deploy scripts for docs work * Conditional base URL for nice local testing * Use eslint-plugin-markdown * Remove hard coded lines * Remove mentions of docusaurus Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>
45 lines
3.5 KiB
Markdown
45 lines
3.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
|
|
|
|
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`](../general/colors.md) | | | | If set, used as the color of the border line. If unset, the first `color` option is resolved and used.
|
|
| `borderWidth` | `number` | | | | If set, used as the width of the border line. If unset, the first `lineWidth` option is resolved and used.
|
|
| `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` | Yes | | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
|
|
| `circular` | `boolean` | | | `false` | If true, gridlines are circular (on radar chart only).
|
|
| `color` | [`Color`](../general/colors.md) | Yes | Yes | `'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.
|
|
| `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`](../general/colors.md) | 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](../general/options.md#tick) section.
|
|
|
|
## Tick Configuration
|
|
|
|
!!!include(axes/_common_ticks.md)!!!
|
|
|
|
The scriptable context is described in [Options](../general/options.md#tick) 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.
|