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. |
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 |
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 |
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 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. | |
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. | |
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. | |
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). |