Add color options to documentation and types where missing (#8196)

* fixes #8188 and #8189

* removes scriptable context sample with link to options page

* Removes <code> tags in markdown where not needed

docs/docs/axes/_common_ticks.md

@@ -4,9 +4,10 @@
 | ---- | ---- | :-------------------------------: | ------- | -----------
 | `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 labels.
-| `font` | `Font` | Yes | `defaults.font` | See [Fonts](../general/fonts.md)
+| `color` | [`Color`](../general/colors.md) | Yes | `Chart.defaults.color` | Color of ticks.
+| `font` | `Font` | Yes | `Chart.defaults.font` | See [Fonts](../general/fonts.md)
 | `major` | `object` | | `{}` | [Major ticks configuration](./styling.mdx#major-tick-configuration).
 | `padding` | `number` | | `0` | Sets the offset of the tick labels from the axis
-| `textStrokeColor` | `string` | `` | The color of the stroke around the text.
+| `textStrokeColor` | `string` | | `` | The color of the stroke around the text.
-| `textStrokeWidth` | `number` | `0` | Stroke width around the text.
+| `textStrokeWidth` | `number` | | `0` | Stroke width around the text.
 | `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.

docs/docs/axes/labelling.md

@@ -13,7 +13,8 @@ The scale label configuration is nested under the scale configuration in the `sc
 | `display` | `boolean` | `false` | If true, display the axis title.
 | `align` | `string` | `'center'` | Alignment of the axis title. Possible options are `'start'`, `'center'` and `'end'`
 | `labelString` | `string` | `''` | The text for the title. (i.e. "# of People" or "Response Choices").
-| `font` | `Font` | `defaults.font` | See [Fonts](../general/fonts.md)
+| `color` | [`Color`](../general/colors.md) | `Chart.defaults.color` | Color of label.
+| `font` | `Font` | `Chart.defaults.font` | See [Fonts](../general/fonts.md)
 | `padding` | `number`\|`object` | `4` | Padding to apply around scale labels. Only `top` and `bottom` are implemented.
 
 ## Creating Custom Tick Formats

docs/docs/axes/radial/linear.mdx

@@ -15,6 +15,7 @@ The following additional configuration options are provided by the radial linear
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
+| `animate` | `boolean` | `true` | Whether to animate scaling the chart from the centre
 | `angleLines` | `object` | | Angle line configuration. [more...](#angle-line-options)
 | `beginAtZero` | `boolean` | `false` | if true, scale will include 0 if it is not already included.
 | `pointLabels` | `object` | | Point label configuration. [more...](#point-label-options)
@@ -27,7 +28,7 @@ The following additional configuration options are provided by the radial linear
 
 | Name | Type | Scriptable | Default | Description
 | ---- | ---- | ------- | ------- | -----------
-| `backdropColor` | `Color` | Yes | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops.
+| `backdropColor` | [`Color`](../../general/colors.md) | Yes | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops.
 | `backdropPaddingX` | `number` | | `2` | Horizontal padding of label backdrop.
 | `backdropPaddingY` | `number` | | `2` | Vertical padding of label backdrop.
 | `format` | `object` | | | The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options used by the default label formatter
@@ -38,16 +39,7 @@ The following additional configuration options are provided by the radial linear
 
 <CommonTicksAll />
 
-The scriptable context has the following form:
+The scriptable context is described in [Options](../../general/options.md#tick) section.
-
-```javascript
-{
-    chart,
-    scale,
-    index,
-    tick
-}
-```
 
 ## Axis Range Settings
 
@@ -108,23 +100,14 @@ The following options are used to configure angled lines that radiate from the c
 | Name | Type | Scriptable | Default | Description
 | ---- | ---- | ------- | ------- | -----------
 | `display` | `boolean` | | `true` | if true, angle lines are shown.
-| `color` | `Color` | Yes | `'rgba(0, 0, 0, 0.1)'` | Color of angled lines.
+| `color` | [`Color`](../../general/colors.md) | Yes | `Chart.defaults.borderColor` | Color of angled lines.
 | `lineWidth` | `number` | Yes | `1` | Width of angled lines.
-| `borderDash` | `number[]` | Yes* | `[]` | Length and spacing of dashes on angled lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
+| `borderDash` | `number[]` | Yes<sup>1</sup> | `[]` | Length and spacing of dashes on angled lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
 | `borderDashOffset` | `number` | Yes | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
 
-The `borderDash` setting only accepts a static value or a function. Passing an array of arrays is not supported.
+  1. the `borderDash` setting only accepts a static value or a function. Passing an array of arrays is not supported.
 
-The scriptable context has the following form:
+The scriptable context is described in [Options](../../general/options.md#scale) section.
-
-```javascript
-{
-    chart,
-    scale,
-    index,
-    label
-}
-```
 
 ## Point Label Options
 
@@ -134,9 +117,10 @@ The following options are used to configure the point labels that are shown on t
 | ---- | ---- | ------- | ------- | -----------
 | `display` | `boolean` | | `true` | if true, point labels are shown.
 | `callback` | `function` | | | Callback function to transform data labels to point labels. The default implementation simply returns the current string.
-| `font` | `Font` | Yes | `defaults.font` | See [Fonts](./general/fonts.md)
+| `color` | [`Color`](../../general/colors.md) | Yes | `Chart.defaults.color` | Color of label.
+| `font` | `Font` | Yes | `Chart.defaults.font` | See [Fonts](./general/fonts.md)
 
-The scriptable context is the same as for the [Angle Line Options](#angle-line-options).
+The scriptable context is described in [Options](../../general/options.md#scale) section.
 
 ## Internal data format
 

docs/docs/axes/styling.mdx

@@ -27,22 +27,13 @@ The grid line configuration is nested under the scale configuration in the `grid
 | `offsetGridLines` | `boolean` | | | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a bar chart by default.
 | `z` | `number` | | | `0` | z-index of gridline layer. Values <= 0 are drawn under datasets, > 0 on top.
 
-The scriptable context has the following form:
+The scriptable context is described in [Options](../general/options.md#tick) section.
-
-```javascript
-{
-    chart,
-    scale,
-    index,
-    tick
-}
-```
 
 ## Tick Configuration
 
 <CommonTicks />
 
-The scriptable context is the same as for the [Grid Line Configuration](#grid-line-configuration).
+The scriptable context is described in [Options](../general/options.md#tick) section.
 
 ## Major Tick Configuration
 

docs/docs/charts/bar.mdx

@@ -82,15 +82,15 @@ the color of the bars is generally set this way.
 | [`base`](#general) | `number` | Yes | Yes |
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'start'`
-| [`borderWidth`](#borderwidth) | <code>number&#124;object</code> | Yes | Yes | `0`
+| [`borderWidth`](#borderwidth) | `number`\|`object` | Yes | Yes | `0`
-| [`borderRadius`](#borderradius) | <code>number&#124;object</code> | Yes | Yes | `0`
+| [`borderRadius`](#borderradius) | `number`\|`object` | Yes | Yes | `0`
-| [`clip`](#general) | <code>number&#124;object</code> | - | - | `undefined`
+| [`clip`](#general) | `number`\|`object` | - | - | `undefined`
 | [`data`](#data-structure) | `object[]` | - | - | **required**
 | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
 | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
 | [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1`
 | [`hoverBorderRadius`](#interactions) | `number` | Yes | Yes | `0`
-| [`indexAxis`](#general) | `string` | `'x'` | The base axis for the dataset. Use `'y'` for horizontal bar.
+| [`indexAxis`](#general) | `string` | - | - | `'x'`
 | [`label`](#general) | `string` | - | - | `''`
 | [`order`](#general) | `number` | - | - | `0`
 | [`xAxisID`](#general) | `string` | - | - | first x axis
@@ -170,7 +170,7 @@ The bar chart accepts the following configuration from the associated dataset op
 | ---- | ---- | ------- | -----------
 | `barPercentage` | `number` | `0.9` | Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. [more...](#barpercentage-vs-categorypercentage)
 | `categoryPercentage` | `number` | `0.8` | Percent (0-1) of the available width each category should be within the sample width. [more...](#barpercentage-vs-categorypercentage)
-| `barThickness` | <code>number&#124;string</code> | | Manually set width of each bar in pixels. If set to `'flex'`, it computes "optimal" sample widths that globally arrange bars side by side. If not set (default), bars are equally sized based on the smallest interval. [more...](#barthickness)
+| `barThickness` | `number`\|`string` | | Manually set width of each bar in pixels. If set to `'flex'`, it computes "optimal" sample widths that globally arrange bars side by side. If not set (default), bars are equally sized based on the smallest interval. [more...](#barthickness)
 | `base` | `number` | | Base value for the bar in data units along the value axis. If not set, defaults to the value axis base value.
 | `maxBarThickness` | `number` | | Set this to ensure that bars are not sized thicker than this.
 | `minBarLength` | `number` | | Set this to ensure that bars have a minimum length in pixels.

docs/docs/charts/bubble.mdx

@@ -54,7 +54,7 @@ The bubble chart allows a number of properties to be specified for each dataset.
 | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`borderWidth`](#styling) | `number` | Yes | Yes | `3`
-| [`clip`](#general) | <code>number&#124;object</code> | - | - | `undefined`
+| [`clip`](#general) | `number`\|`object` | - | - | `undefined`
 | [`data`](#data-structure) | `object[]` | - | - | **required**
 | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
 | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`

docs/docs/charts/doughnut.mdx

@@ -103,7 +103,7 @@ The doughnut/pie chart allows a number of properties to be specified for each da
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
 | [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
 | ['circumference`](#general) | `number` | - | - | `undefined`
-| [`clip`](#general) | <code>number&#124;object</code> | - | - | `undefined`
+| [`clip`](#general) | `number`\|`object` | - | - | `undefined`
 | [`data`](#data-structure) | `number[]` | - | - | **required**
 | [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
 | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`

docs/docs/charts/polar.mdx

@@ -61,7 +61,7 @@ The following options can be included in a polar area chart dataset to configure
 | [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'`
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
 | [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
-| [`clip`](#general) | <code>number&#124;object</code> | - | - | `undefined`
+| [`clip`](#general) | `number`\|`object` | - | - | `undefined`
 | [`data`](#data-structure) | `number[]` | - | - | **required**
 | [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
 | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`

docs/docs/charts/radar.mdx

@@ -91,8 +91,8 @@ The radar chart allows a number of properties to be specified for each dataset.
 | [`hoverBorderDashOffset`](#line-styling) | `number` | Yes | - | `undefined`
 | [`hoverBorderJoinStyle`](#line-styling) | `string` | Yes | - | `undefined`
 | [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
-| [`clip`](#general) | <code>number&#124;object</code> | - | - | `undefined`
+| [`clip`](#general) | `number`\|`object` | - | - | `undefined`
-| [`fill`](#line-styling) | <code>boolean&#124;string</code> | Yes | - | `false`
+| [`fill`](#line-styling) | `boolean`\|`string` | Yes | - | `false`
 | [`label`](#general) | `string` | - | - | `''`
 | [`order`](#general) | `number` | - | - | `0`
 | [`tension`](#line-styling) | `number` | - | - | `0`
@@ -106,7 +106,7 @@ The radar chart allows a number of properties to be specified for each dataset.
 | [`pointHoverRadius`](#interactions) | `number` | Yes | Yes | `4`
 | [`pointRadius`](#point-styling) | `number` | Yes | Yes | `3`
 | [`pointRotation`](#point-styling) | `number` | Yes | Yes | `0`
-| [`pointStyle`](#point-styling) | <code>string&#124;Image</code> | Yes | Yes | `'circle'`
+| [`pointStyle`](#point-styling) | `string`\|`Image` | Yes | Yes | `'circle'`
 | [`spanGaps`](#line-styling) | `boolean` | - | - | `undefined`
 
 ### General

docs/docs/configuration/animations.mdx

@@ -151,8 +151,8 @@ A property option is defined by the same options of the main [animation configur
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `type` | `string` | `typeof property` | Type of property, determines the interpolator used. Possible values: `'number'`, `'color'` and `'boolean'`. Only really needed for `'color'`, because `typeof` does not get that right.
-| `from`  | <code>`number`&#124;`Color`&#124;`boolean`</code> | `undefined` | Start value for the animation. Current value is used when `undefined`
+| `from`  | `number`\|`Color`\|`boolean` | `undefined` | Start value for the animation. Current value is used when `undefined`
-| `to`  | <code>`number`&#124;`Color`&#124;`boolean`</code> | `undefined` | End value for the animation. Updated value is used when `undefined`
+| `to`  | `number`\|`Color`\|`boolean` | `undefined` | End value for the animation. Updated value is used when `undefined`
 | `fn` | <code>&lt;T&gt;(from: T, to: T, factor: number) => T;</code> | `undefined` | Optional custom interpolator, instead of using a predefined interpolator from `type` |
 
 ## Animation properties collection configuration

docs/docs/configuration/elements.md

@@ -23,9 +23,9 @@ Global point options: `Chart.defaults.elements.point`.
 | `radius` | `number` | `3` | Point radius.
 | [`pointStyle`](#point-styles) | `string`\|`Image` | `'circle'` | Point style.
 | `rotation` | `number` | `0` | Point rotation (in degrees).
-| `backgroundColor` | `Color` | `Chart.defaults.backgroundColor` | Point fill color.
+| `backgroundColor` | [`Color`](../general/colors.md) | `Chart.defaults.backgroundColor` | Point fill color.
 | `borderWidth` | `number` | `1` | Point stroke width.
-| `borderColor` | `Color` | `Chart.defaults.borderColor` | Point stroke color.
+| `borderColor` | [`Color`](../general/colors.md) | `Chart.defaults.borderColor` | Point stroke color.
 | `hitRadius` | `number` | `1` | Extra radius added to point radius for hit detection.
 | `hoverRadius` | `number` | `4` | Point radius when hovered.
 | `hoverBorderWidth` | `number` | `1` | Stroke width when hovered.
@@ -56,9 +56,9 @@ Global line options: `Chart.defaults.elements.line`.
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `tension` | `number` | `0` | Bézier curve tension (`0` for no Bézier curves).
-| `backgroundColor` | `Color` | `Chart.defaults.backgroundColor` | Line fill color.
+| `backgroundColor` | [`Color`](../general/colors.md) | `Chart.defaults.backgroundColor` | Line fill color.
 | `borderWidth` | `number` | `3` | Line stroke width.
-| `borderColor` | `Color` | `Chart.defaults.borderColor` | Line stroke color.
+| `borderColor` | [`Color`](../general/colors.md) | `Chart.defaults.borderColor` | Line stroke color.
 | `borderCapStyle` | `string` | `'butt'` | Line cap style. See [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap).
 | `borderDash` | `number[]` | `[]` | Line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
 | `borderDashOffset` | `number` | `0.0` | Line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
@@ -76,9 +76,9 @@ Global bar options: `Chart.defaults.elements.bar`.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
-| `backgroundColor` | `Color` | `Chart.defaults.backgroundColor` | Bar fill color.
+| `backgroundColor` | [`Color`](../general/colors.md) | `Chart.defaults.backgroundColor` | Bar fill color.
 | `borderWidth` | `number` | `0` | Bar stroke width.
-| `borderColor` | `Color` | `Chart.defaults.borderColor` | Bar stroke color.
+| `borderColor` | [`Color`](../general/colors.md) | `Chart.defaults.borderColor` | Bar stroke color.
 | `borderSkipped` | `string` | `'start'` | Skipped (excluded) border: `'start'`, `'end'`, `'bottom'`, `'left'`, `'top'` or `'right'`.
 
 ## Arc Configuration
@@ -90,7 +90,7 @@ Global arc options: `Chart.defaults.elements.arc`.
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `angle` - for polar only | `number` | `circumference / (arc count)` | Arc angle to cover.
-| `backgroundColor` | `Color` | `Chart.defaults.backgroundColor` | Arc fill color.
+| `backgroundColor` | [`Color`](../general/colors.md) | `Chart.defaults.backgroundColor` | Arc fill color.
 | `borderAlign` | `string` | `'center'` | Arc stroke alignment.
-| `borderColor` | `Color` | `'#fff'` | Arc stroke color.
+| `borderColor` | [`Color`](../general/colors.md) | `'#fff'` | Arc stroke color.
 | `borderWidth`| `number` | `2` | Arc stroke width.

docs/docs/configuration/layout.md

@@ -6,7 +6,7 @@ The layout configuration is passed into the `options.layout` namespace. The glob
 
 | Name | Type | Default | [Scriptable](../general/options.md#scriptable-options) | Description
 | ---- | ---- | ------- | :----: | -----------
-| `padding` | <code>number&#124;object</code> | `0` | Yes | The padding to add inside the chart. [more...](#padding)
+| `padding` | `number`\|`object` | `0` | Yes | The padding to add inside the chart. [more...](#padding)
 
 ## Padding
 If this value is a number, it is applied to all sides of the chart (left, top, right, bottom). If this value is an object, the `left` property defines the left padding. Similarly the `right`, `top` and `bottom` properties can also be specified.

docs/docs/configuration/legend.md

@@ -13,8 +13,8 @@ The legend configuration is passed into the `options.plugins.legend` namespace.
 | `display` | `boolean` | `true` | Is the legend shown?
 | `position` | `string` | `'top'` | Position of the legend. [more...](#position)
 | `align` | `string` | `'center'` | Alignment of the legend. [more...](#align)
-| `maxHeight` `number` | | Maximum height of the legend, in pixels
+| `maxHeight` | `number` | | Maximum height of the legend, in pixels
-| `maxWidth` `number` | | Maximum width of the legend, in pixels
+| `maxWidth` | `number` | | Maximum width of the legend, in pixels
 | `fullWidth` | `boolean` | `true` | Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use.
 | `onClick` | `function` | | A callback that is called when a click event is registered on a label item. Arguments: `[event, legendItem, legend]`.
 | `onHover` | `function` | | A callback that is called when a 'mousemove' event is registered on top of a label item. Arguments: `[event, legendItem, legend]`.
@@ -51,9 +51,9 @@ The legend label configuration is nested below the legend configuration using th
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `boxWidth` | `number` | `40` | Width of coloured box.
-| `boxHeight` | `number` | fontSize | Height of the coloured box.
+| `boxHeight` | `number` | `font.size` | Height of the coloured box.
-| `color` |[`Color`](../general/colors.md) | `defaults.color` | Color of text.
+| `color` | [`Color`](../general/colors.md) | `Chart.defaults.color` | Color of label.
-| `font` | `Font` | `defaults.font` | See [Fonts](../general/fonts.md)
+| `font` | `Font` | `Chart.defaults.font` | See [Fonts](../general/fonts.md)
 | `padding` | `number` | `10` | Padding between rows of colored boxes.
 | `generateLabels` | `function` | | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See [Legend Item](#legend-item-interface) for details.
 | `filter` | `function` | `null` | Filters legend items out of the legend. Receives 2 parameters, a [Legend Item](#legend-item-interface) and the chart data.
@@ -67,9 +67,9 @@ The legend title configuration is nested below the legend configuration using th
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
-| `color` | [`Color`](../general/colors.md) | `defaults.color` | Color of text.
+| `color` | [`Color`](../general/colors.md) | `Chart.defaults.color` | Color of text.
 | `display` | `boolean` | `false` | Is the legend title displayed.
-| `font` | `Font` | `defaults.font` | See [Fonts](../general/fonts.md)
+| `font` | `Font` | `Chart.defaults.font` | See [Fonts](../general/fonts.md)
 | `padding` | `number`\|`object` | `0` | Padding around the title. If specified as a number, it applies evenly to all sides.
 | `text` | `string` | | The string title.
 

docs/docs/configuration/title.md

@@ -11,11 +11,12 @@ The title configuration is passed into the `options.plugins.title` namespace. Th
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `align` | `string` | `'center'` | Alignment of the title. [more...](#align)
+| `color` | [`Color`](../general/colors.md) | `Chart.defaults.color` | Color of text.
 | `display` | `boolean` | `false` | Is the title shown?
 | `position` | `string` | `'top'` | Position of title. [more...](#position)
-| `font` | `Font` | `defaults.font` | See [Fonts](../general/fonts.md)
+| `font` | `Font` | `Chart.defaults.font` | See [Fonts](../general/fonts.md)
-| `padding` | <code>number&#124;{top: number, bottom: number}</code> | `10` | Adds padding above and below the title text if a single number is specified. It is also possible to change top and bottom padding separately.
+| `padding` | `number`\|`{top: number, bottom: number}` | `10` | Adds padding above and below the title text if a single number is specified. It is also possible to change top and bottom padding separately.
-| `text` | <code>string&#124;string[]</code> | `''` | Title text to display. If specified as an array, text is rendered on multiple lines.
+| `text` | `string`\|`string[]` | `''` | Title text to display. If specified as an array, text is rendered on multiple lines.
 
 ### Position
 

docs/docs/configuration/tooltip.md

@@ -16,15 +16,18 @@ The tooltip configuration is passed into the `options.plugins.tooltip` namespace
 | `callbacks` | `object` | | See the [callbacks section](#tooltip-callbacks).
 | `itemSort` | `function` | | Sort tooltip items. [more...](#sort-callback)
 | `filter` | `function` | | Filter tooltip items. [more...](#filter-callback)
-| `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.8)'` | Background color of the tooltip.
+| `backgroundColor` | [`Color`](../general/colors.md) | `'rgba(0, 0, 0, 0.8)'` | Background color of the tooltip.
-| `titleFont` | `Font` | `{style: 'bold', color: '#fff'}` | See [Fonts](../general/fonts.md).
+| `titleColor` | [`Color`](../general/colors.md) | `'#fff'` | Color of title text.
+| `titleFont` | `Font` | `{style: 'bold'}` | See [Fonts](../general/fonts.md).
 | `titleAlign` | `string` | `'left'` | Horizontal alignment of the title text lines. [more...](#alignment)
 | `titleSpacing` | `number` | `2` | Spacing to add to top and bottom of each title line.
 | `titleMarginBottom` | `number` | `6` | Margin to add on bottom of title section.
-| `bodyFont` | `Font` | `{color: '#fff'}` | See [Fonts](../general/fonts.md).
+| `bodyColor` | [`Color`](../general/colors.md) | `'#fff'` | Color of body text.
+| `bodyFont` | `Font` | `{}` | See [Fonts](../general/fonts.md).
 | `bodyAlign` | `string` | `'left'` | Horizontal alignment of the body text lines. [more...](#alignment)
 | `bodySpacing` | `number` | `2` | Spacing to add to top and bottom of each tooltip item.
-| `footerFont` | `Font` | `{style: 'bold', color: '#fff'}` | See [Fonts](../general/fonts.md).
+| `footerColor` | [`Color`](../general/colors.md) | `'#fff'` | Color of footer text.
+| `footerFont` | `Font` | `{style: 'bold'}` | See [Fonts](../general/fonts.md).
 | `footerAlign` | `string` | `'left'` | Horizontal alignment of the footer text lines. [more...](#alignment)
 | `footerSpacing` | `number` | `2` | Spacing to add to top and bottom of each footer line.
 | `footerMarginTop` | `number` | `6` | Margin to add before drawing the footer.
@@ -33,12 +36,12 @@ The tooltip configuration is passed into the `options.plugins.tooltip` namespace
 | `caretPadding` | `number` | `2` | Extra distance to move the end of the tooltip arrow away from the tooltip point.
 | `caretSize` | `number` | `5` | Size, in px, of the tooltip arrow.
 | `cornerRadius` | `number` | `6` | Radius of tooltip corner curves.
-| `multiKeyBackground` | `Color` | `'#fff'` | Color to draw behind the colored boxes when multiple items are in the tooltip.
+| `multiKeyBackground` | [`Color`](../general/colors.md) | `'#fff'` | Color to draw behind the colored boxes when multiple items are in the tooltip.
 | `displayColors` | `boolean` | `true` | If true, color boxes are shown in the tooltip.
 | `boxWidth` | `number` | `bodyFont.size` | Width of the color box if displayColors is true.
 | `boxHeight` | `number` | `bodyFont.size` | Height of the color box if displayColors is true.
 | `usePointStyle` | `boolean` | `false` | Use the corresponding point style (from dataset options) instead of color boxes, ex: star, triangle etc. (size is based on the minimum value between boxWidth and boxHeight).
-| `borderColor` | `Color` | `'rgba(0, 0, 0, 0)'` | Color of the border.
+| `borderColor` | [`Color`](../general/colors.md) | `'rgba(0, 0, 0, 0)'` | Color of the border.
 | `borderWidth` | `number` | `0` | Size of the border.
 | `rtl` | `boolean` | | `true` for rendering the tooltip from right to left.
 | `textDirection` | `string` | canvas' default | This will force the text direction `'rtl' or 'ltr` on the canvas for rendering the tooltips, regardless of the css specified on the canvas

docs/docs/general/data-structures.md

@@ -62,10 +62,10 @@ In this mode, property name is used for `index` scale and value for `value` scal
 | Name | Type | Description
 | ---- | ---- | -----------
 | `label` | `string` | The label for the dataset which appears in the legend and tooltips.
-| `clip` | <code>number&#124;object</code> | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}
+| `clip` | `number`\|`object` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}
 | `order` | `number` | The drawing order of dataset. Also affects order for stacking, tooltip and legend.
 | `stack` | `string` | The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack).
-| `parsing` | <code>boolean&#124;object</code> | How to parse the dataset. The parsing can be disabled by specifying parsing: false at chart options or dataset. If parsing is disabled, data must be sorted and in the formats the associated chart type and scales use internally.
+| `parsing` | `boolean`\|`object` | How to parse the dataset. The parsing can be disabled by specifying parsing: false at chart options or dataset. If parsing is disabled, data must be sorted and in the formats the associated chart type and scales use internally.
 
 ### parsing
 

docs/docs/general/fonts.md

@@ -32,7 +32,7 @@ let chart = new Chart(ctx, {
 | `size` | `number` | `12` | Default font size (in px) for text. Does not apply to radialLinear scale point labels.
 | `style` | `string` | `'normal'` | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title. Follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
 | `weight` | `string` | `undefined` | Default font weight (boldness). (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)).
-| `lineHeight` | <code>number&#124;string</code> | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
+| `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)).
 
 ## Missing Fonts
 

types/core/interfaces.d.ts

@@ -282,11 +282,6 @@ export type AnimationOptions = AnimationSpecContainer & {
 };
 
 export interface FontSpec {
-  /**
-   * Default font color for all text.
-   * @default '#666'
-   */
-  color: Color;
   /**
    * Default font family for all text, follows CSS font-family options.
    * @default "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
@@ -311,15 +306,6 @@ export interface FontSpec {
    * @default 1.2
    */
   lineHeight: number | string;
-  /**
-   * Stroke width around the text. Currently only supported by ticks.
-   * @default 0
-   */
-  lineWidth: number;
-  /**
-   * The color of the stroke around the text. Currently only supported by ticks.
-   */
-  strokeStyle: string | null;
 }
 
 export type TextAlign = 'left' | 'center' | 'right';

types/plugins/index.d.ts

@@ -153,7 +153,15 @@ export interface LegendOptions {
      * @default fontSize
      */
     boxHeight: number;
-
+    /**
+     * Color of label
+     * @see Defaults.color
+     */
+    color: Color;
+    /**
+     * Font of label
+     * @see Defaults.font
+     */
     font: FontSpec;
     /**
      * Padding between rows of colored boxes.
@@ -193,6 +201,11 @@ export interface LegendOptions {
      * @default false
      */
     display: boolean;
+    /**
+     * Color of title
+     * @see Defaults.color
+     */
+    color: Color;
     /**
      * see Fonts
      */
@@ -224,6 +237,11 @@ export interface TitleOptions {
    * @default 'top'
    */
   position: 'top' | 'left' | 'bottom' | 'right';
+  /**
+   * Color of text
+   * @see Defaults.color
+   */
+  color: Color;
   font: FontSpec;
   // fullWidth: boolean;
   /**
@@ -371,9 +389,14 @@ export interface TooltipOptions extends CoreInteractionOptions {
    * @default 'rgba(0, 0, 0, 0.8)'
    */
   backgroundColor: Color;
+  /**
+   * Color of title
+   * @default '#fff'
+   */
+  titleColor: Color;
   /**
    * See Fonts
-   * @default {style: 'bold', color: '#fff'}
+   * @default {style: 'bold'}
    */
   titleFont: FontSpec;
   /**
@@ -396,9 +419,14 @@ export interface TooltipOptions extends CoreInteractionOptions {
    * @default 2
    */
   bodySpacing: number;
+  /**
+   * Color of body
+   * @default '#fff'
+   */
+  bodyColor: Color;
   /**
    * 	See Fonts.
-   * @default {color: '#fff'}
+   * @default {}
    */
   bodyFont: FontSpec;
   /**
@@ -416,9 +444,14 @@ export interface TooltipOptions extends CoreInteractionOptions {
    * @default 6
    */
   footerMarginTop: number;
+  /**
+   * Color of footer
+   * @default '#fff'
+   */
+  footerColor: Color;
   /**
    * See Fonts
-   * @default {style: 'bold', color: '#fff'}
+   * @default {style: 'bold'}
    */
   footerFont: FontSpec;
   /**

types/scales/index.d.ts

@@ -61,6 +61,11 @@ export interface TickOptions {
    * @default true
    */
   display: boolean;
+  /**
+   * Color of tick
+   * @see Defaults.color
+   */
+  color: ScriptAbleScale<Color>;
   /**
    * see Fonts
    */
@@ -125,6 +130,7 @@ export interface CartesianScaleOptions extends CoreScaleOptions {
   scaleLabel: {
     display: boolean;
     labelString: string;
+    color: Color;
     font: FontSpec;
     padding: {
       top: number;
@@ -433,6 +439,11 @@ export type RadialLinearScaleOptions = CoreScaleOptions & {
      * @default true
      */
     display: boolean;
+    /**
+     * Color of label
+     * @see Defaults.color
+     */
+    color: ScriptAbleScale<Color>;
     /**
      * @see https://www.chartjs.org/docs/next/axes/general/fonts.md
      */