diff --git a/js/ui/chart/docs/axes/styling.md b/js/ui/chart/docs/axes/styling.md new file mode 100644 index 0000000..23b2123 --- /dev/null +++ b/js/ui/chart/docs/axes/styling.md @@ -0,0 +1,67 @@ +# 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 + +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](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). +| `borderDashOffset` | `number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). +| `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](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). +| `zeroLineBorderDashOffset` | `number` | `0.0` | Offset for line dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). +| `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. + +## 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](../axes/labelling.md#creating-custom-tick-formats). +| `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](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)). +| `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 + +## 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](../axes/labelling.md#creating-custom-tick-formats). +| `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](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)). + +## 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](../axes/labelling.md#creating-custom-tick-formats). +| `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](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).