Skip to content

Latest commit

 

History

History
53 lines (39 loc) · 3.96 KB

styling.md

File metadata and controls

53 lines (39 loc) · 3.96 KB

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
circular boolean false If true, gridlines are circular (on radar and polar area charts only).
color Color Yes Yes Chart.defaults.borderColor 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.
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.
step number 1 Setting higher value allows skipping ticks before the next grid line.
tickBorderDash number[] Yes Yes [] 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 -1 z-index of the 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.

Border Configuration

Namespace: options.scales[scaleId].border, it defines options for the border that run perpendicular to the axis.

Name Type Scriptable Indexable Default Description
display boolean true If true, draw a border at the edge between the axis and the chart area.
color Color Chart.defaults.borderColor The color of the border line.
width number 1 The width of the border line.
dash number[] Yes [] Length and spacing of dashes on grid lines. See MDN.
dashOffset number Yes 0.0 Offset for line dashes. See MDN.
z number 0 z-index of the border layer. Values <= 0 are drawn under datasets, > 0 on top.