Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 12:19:08 +02:00
Code Issues Packages Projects Releases Wiki Activity
0ea9fa7efe
Chart.js/docs/axes/styling.md
Evert Timberg ed2b96eeaf
Switch docs to Vuepress to match other chart.js repositories (#8751) 
* 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>
2021-03-30 10:32:39 -04:00

3.5 KiB
Raw Blame History

Styling

There are a number of options to allow styling an axis. There are settings to control grid lines and ticks.

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 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.
borderDashOffset number Yes 0.0 Offset for line dashes. See MDN.
circular boolean false If true, gridlines are circular (on radar chart only).
color Color 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 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 section.

Tick Configuration

!!!include(axes/_common_ticks.md)!!!

The scriptable context is described in Options 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.