Skip to content

Latest commit

 

History

History
69 lines (59 loc) · 6.56 KB

styling.md

File metadata and controls

69 lines (59 loc) · 6.56 KB
Raw

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.
circular boolean false If true, gridlines are circular (on radar chart only).
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.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.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 for a category scale in a bar chart by default.
z number 0 z-index of gridline layer. Values <= 0 are drawn under datasets, > 0 on top.

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).
lineHeight number|string 1.2 Height of an individual line of text (see MDN).
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.
padding number 0 Sets the offset of the tick labels from the axis
z number 0 z-index of tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top.

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).
lineHeight number|string 1.2 Height of an individual line of text (see MDN).

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. These options are disabled by default.

Name Type Default Description
enabled boolean false If true, major tick options are used to show major ticks.
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).
lineHeight number|string 1.2 Height of an individual line of text (see MDN).