From: Dan Onoshko Date: Tue, 8 Nov 2022 00:49:47 +0000 (+0400) Subject: docs: notes about html legend, tooltip and title (#10857) X-Git-Tag: v4.0.0-release~5 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=718f46095a906aae4e658b6e3408f4c14f4485f3;p=thirdparty%2FChart.js.git docs: notes about html legend, tooltip and title (#10857) * docs: notes about html legend, tooltip and title * Update docs/configuration/legend.md Co-authored-by: Jacco van den Berg * Update docs/configuration/tooltip.md Co-authored-by: Jacco van den Berg * docs: notes about html legend, tooltip and title fix Co-authored-by: Jacco van den Berg --- diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md index cda19e885..296b6d59e 100644 --- a/docs/configuration/legend.md +++ b/docs/configuration/legend.md @@ -27,6 +27,10 @@ The doughnut, pie, and polar area charts override the legend defaults. To change | `textDirection` | `string` | canvas' default | This will force the text direction `'rtl'` or `'ltr'` on the canvas for rendering the legend, regardless of the css specified on the canvas | `title` | `object` | | See the [Legend Title Configuration](#legend-title-configuration) section below. +:::tip Note +If you need more visual customizations, please use an [HTML legend](../samples/legend/html.md). +::: + ## Position Position of the legend. Options are: @@ -62,7 +66,7 @@ Namespace: `options.plugins.legend.labels` | `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. -| `sort` | `function` | `null` | Sorts legend items. Type is : `sort(a: LegendItem, b: LegendItem, data: ChartData): number;`. Receives 3 parameters, two [Legend Items](#legend-item-interface) and the chart data. The return value of the function is a number that indicates the order of the two legend item parameters. The ordering matches the [return value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description) of `Array.prototype.sort()` +| `sort` | `function` | `null` | Sorts legend items. Type is : `sort(a: LegendItem, b: LegendItem, data: ChartData): number;`. Receives 3 parameters, two [Legend Items](#legend-item-interface) and the chart data. The return value of the function is a number that indicates the order of the two legend item parameters. The ordering matches the [return value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description) of `Array.prototype.sort()` | [`pointStyle`](elements.md#point-styles) | [`pointStyle`](elements.md#types) | `'circle'` | If specified, this style of point is used for the legend. Only used if `usePointStyle` is true. | `textAlign` | `string` | `'center'` | Horizontal alignment of the label text. Options are: `'left'`, `'right'` or `'center'`. | `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on pointStyleWidth or the minimum value between boxWidth and font.size). diff --git a/docs/configuration/title.md b/docs/configuration/title.md index f15b25b4b..336abd4d7 100644 --- a/docs/configuration/title.md +++ b/docs/configuration/title.md @@ -17,6 +17,10 @@ Namespace: `options.plugins.title`, the global options for the chart title is de | `padding` | [`Padding`](../general/padding.md) | `10` | Yes | Padding to apply around the title. Only `top` and `bottom` are implemented. | `text` | `string`\|`string[]` | `''` | Yes | Title text to display. If specified as an array, text is rendered on multiple lines. +:::tip Note +If you need more visual customizations, you can implement the title with HTML and CSS. +::: + ### Position Possible title position values are: diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md index f2430d4b9..9ca7b898c 100644 --- a/docs/configuration/tooltip.md +++ b/docs/configuration/tooltip.md @@ -50,6 +50,10 @@ The bubble, doughnut, pie, polar area, and scatter charts override the tooltip d | `xAlign` | `string` | `undefined` | Position of the tooltip caret in the X direction. [more](#tooltip-alignment) | `yAlign` | `string` | `undefined` | Position of the tooltip caret in the Y direction. [more](#tooltip-alignment) +:::tip Note +If you need more visual customizations, please use an [HTML tooltip](../samples/tooltip/html.md). +::: + ### Position Modes Possible modes are: