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 <jaccoberg2281@gmail.com>
* Update docs/configuration/tooltip.md

Co-authored-by: Jacco van den Berg <jaccoberg2281@gmail.com>
* docs: notes about html legend, tooltip and title fix

Co-authored-by: Jacco van den Berg <jaccoberg2281@gmail.com>

diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md
index cda19e885f92804cadc18e33409a6d9eacb11491..296b6d59e14de581888bd65b59492c6048f093cd 100644 (file)
--- 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 f15b25b4b791eed2b23e7664b9bdd486da67b8cd..336abd4d7fb33b8f96188bf0b4d53dbe46f795bc 100644 (file)
--- 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 f2430d4b913900421de4b9fd0b5213d775829403..9ca7b898c289363558068c7b553750c9b2bf3933 100644 (file)
--- 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: