From f16e836c3d24bc3f766f90e252ce7e6626c8fa0e Mon Sep 17 00:00:00 2001 From: stockiNail Date: Fri, 18 Dec 2020 21:03:01 +0100 Subject: [PATCH] Add color options to documentation and types where missing (#8196) * fixes #8188 and #8189 * removes scriptable context sample with link to options page * Removes tags in markdown where not needed --- docs/docs/axes/_common_ticks.md | 7 +++-- docs/docs/axes/labelling.md | 3 +- docs/docs/axes/radial/linear.mdx | 36 +++++++--------------- docs/docs/axes/styling.mdx | 13 ++------ docs/docs/charts/bar.mdx | 10 +++---- docs/docs/charts/bubble.mdx | 2 +- docs/docs/charts/doughnut.mdx | 2 +- docs/docs/charts/polar.mdx | 2 +- docs/docs/charts/radar.mdx | 6 ++-- docs/docs/configuration/animations.mdx | 4 +-- docs/docs/configuration/elements.md | 16 +++++----- docs/docs/configuration/layout.md | 2 +- docs/docs/configuration/legend.md | 14 ++++----- docs/docs/configuration/title.md | 7 +++-- docs/docs/configuration/tooltip.md | 15 ++++++---- docs/docs/general/data-structures.md | 4 +-- docs/docs/general/fonts.md | 2 +- types/core/interfaces.d.ts | 14 --------- types/plugins/index.d.ts | 41 +++++++++++++++++++++++--- types/scales/index.d.ts | 11 +++++++ 20 files changed, 111 insertions(+), 100 deletions(-) diff --git a/docs/docs/axes/_common_ticks.md b/docs/docs/axes/_common_ticks.md index f9cb435f3..365286e54 100644 --- a/docs/docs/axes/_common_ticks.md +++ b/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. -| `textStrokeWidth` | `number` | `0` | Stroke width around the text. +| `textStrokeColor` | `string` | | `` | The color of the stroke 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. diff --git a/docs/docs/axes/labelling.md b/docs/docs/axes/labelling.md index 8bc04e75a..f2bde1e84 100644 --- a/docs/docs/axes/labelling.md +++ b/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 diff --git a/docs/docs/axes/radial/linear.mdx b/docs/docs/axes/radial/linear.mdx index d52f22306..10cf1757b 100644 --- a/docs/docs/axes/radial/linear.mdx +++ b/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 -The scriptable context has the following form: - -```javascript -{ - chart, - scale, - index, - tick -} -``` +The scriptable context is described in [Options](../../general/options.md#tick) section. ## 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[]` | Yes1 | `[]` | 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: - -```javascript -{ - chart, - scale, - index, - label -} -``` +The scriptable context is described in [Options](../../general/options.md#scale) section. ## 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 diff --git a/docs/docs/axes/styling.mdx b/docs/docs/axes/styling.mdx index d93e806df..ae079fcf7 100644 --- a/docs/docs/axes/styling.mdx +++ b/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: - -```javascript -{ - chart, - scale, - index, - tick -} -``` +The scriptable context is described in [Options](../general/options.md#tick) section. ## Tick Configuration -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 diff --git a/docs/docs/charts/bar.mdx b/docs/docs/charts/bar.mdx index 2a7dc061e..229f148bc 100644 --- a/docs/docs/charts/bar.mdx +++ b/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) | number|object | Yes | Yes | `0` -| [`borderRadius`](#borderradius) | number|object | Yes | Yes | `0` -| [`clip`](#general) | number|object | - | - | `undefined` +| [`borderWidth`](#borderwidth) | `number`\|`object` | Yes | Yes | `0` +| [`borderRadius`](#borderradius) | `number`\|`object` | Yes | Yes | `0` +| [`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` | 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) +| `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. diff --git a/docs/docs/charts/bubble.mdx b/docs/docs/charts/bubble.mdx index 7e8953fca..ec6b3d543 100644 --- a/docs/docs/charts/bubble.mdx +++ b/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) | number|object | - | - | `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` diff --git a/docs/docs/charts/doughnut.mdx b/docs/docs/charts/doughnut.mdx index 6248a47e0..5bfb70fa1 100644 --- a/docs/docs/charts/doughnut.mdx +++ b/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) | number|object | - | - | `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` diff --git a/docs/docs/charts/polar.mdx b/docs/docs/charts/polar.mdx index b378c4aaf..00155c0b2 100644 --- a/docs/docs/charts/polar.mdx +++ b/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) | number|object | - | - | `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` diff --git a/docs/docs/charts/radar.mdx b/docs/docs/charts/radar.mdx index 2e8d94cd9..0c2a377e0 100644 --- a/docs/docs/charts/radar.mdx +++ b/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) | number|object | - | - | `undefined` -| [`fill`](#line-styling) | boolean|string | Yes | - | `false` +| [`clip`](#general) | `number`\|`object` | - | - | `undefined` +| [`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) | string|Image | Yes | Yes | `'circle'` +| [`pointStyle`](#point-styling) | `string`\|`Image` | Yes | Yes | `'circle'` | [`spanGaps`](#line-styling) | `boolean` | - | - | `undefined` ### General diff --git a/docs/docs/configuration/animations.mdx b/docs/docs/configuration/animations.mdx index 9dae35593..edb55356d 100644 --- a/docs/docs/configuration/animations.mdx +++ b/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` | `number`|`Color`|`boolean` | `undefined` | Start value for the animation. Current value is used when `undefined` -| `to` | `number`|`Color`|`boolean` | `undefined` | End value for the animation. Updated value is used when `undefined` +| `from` | `number`\|`Color`\|`boolean` | `undefined` | Start value for the animation. Current value is used when `undefined` +| `to` | `number`\|`Color`\|`boolean` | `undefined` | End value for the animation. Updated value is used when `undefined` | `fn` | <T>(from: T, to: T, factor: number) => T; | `undefined` | Optional custom interpolator, instead of using a predefined interpolator from `type` | ## Animation properties collection configuration diff --git a/docs/docs/configuration/elements.md b/docs/docs/configuration/elements.md index 1b4531670..ff2b1684f 100644 --- a/docs/docs/configuration/elements.md +++ b/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. diff --git a/docs/docs/configuration/layout.md b/docs/docs/configuration/layout.md index afe2471d4..f1b74e3f3 100644 --- a/docs/docs/configuration/layout.md +++ b/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` | number|object | `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. diff --git a/docs/docs/configuration/legend.md b/docs/docs/configuration/legend.md index 32680a671..484262626 100644 --- a/docs/docs/configuration/legend.md +++ b/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 -| `maxWidth` `number` | | Maximum width of the legend, in pixels +| `maxHeight` | `number` | | Maximum height 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. -| `color` |[`Color`](../general/colors.md) | `defaults.color` | Color of text. -| `font` | `Font` | `defaults.font` | See [Fonts](../general/fonts.md) +| `boxHeight` | `number` | `font.size` | Height of the coloured box. +| `color` | [`Color`](../general/colors.md) | `Chart.defaults.color` | Color of label. +| `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. diff --git a/docs/docs/configuration/title.md b/docs/docs/configuration/title.md index 4fc6642db..243474385 100644 --- a/docs/docs/configuration/title.md +++ b/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) -| `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` | string|string[] | `''` | Title text to display. If specified as an array, text is rendered on multiple lines. +| `font` | `Font` | `Chart.defaults.font` | See [Fonts](../general/fonts.md) +| `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` | `string`\|`string[]` | `''` | Title text to display. If specified as an array, text is rendered on multiple lines. ### Position diff --git a/docs/docs/configuration/tooltip.md b/docs/docs/configuration/tooltip.md index 850322043..c8e65599e 100644 --- a/docs/docs/configuration/tooltip.md +++ b/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. -| `titleFont` | `Font` | `{style: 'bold', color: '#fff'}` | See [Fonts](../general/fonts.md). +| `backgroundColor` | [`Color`](../general/colors.md) | `'rgba(0, 0, 0, 0.8)'` | Background color of the tooltip. +| `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 diff --git a/docs/docs/general/data-structures.md b/docs/docs/general/data-structures.md index 9820fd3ff..0e4db12bb 100644 --- a/docs/docs/general/data-structures.md +++ b/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` | 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} +| `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` | 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` | `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 diff --git a/docs/docs/general/fonts.md b/docs/docs/general/fonts.md index 355ddb19c..946027a88 100644 --- a/docs/docs/general/fonts.md +++ b/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` | number|string | `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 diff --git a/types/core/interfaces.d.ts b/types/core/interfaces.d.ts index 97b194d9e..c9aba8e77 100644 --- a/types/core/interfaces.d.ts +++ b/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'; diff --git a/types/plugins/index.d.ts b/types/plugins/index.d.ts index 97db335da..a7282804f 100644 --- a/types/plugins/index.d.ts +++ b/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; /** diff --git a/types/scales/index.d.ts b/types/scales/index.d.ts index e22047044..f7a001aa4 100644 --- a/types/scales/index.d.ts +++ b/types/scales/index.d.ts @@ -61,6 +61,11 @@ export interface TickOptions { * @default true */ display: boolean; + /** + * Color of tick + * @see Defaults.color + */ + color: ScriptAbleScale; /** * 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; /** * @see https://www.chartjs.org/docs/next/axes/general/fonts.md */ -- 2.47.2