Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 12:19:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add documentation on tooltip xAlign and yAlign (#9011)

Browse Source
This commit is contained in:
Evert Timberg 2021-05-01 11:57:13 -04:00 committed by GitHub
parent dffc086ad4
commit 55dd426a41
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
docs/configuration/tooltip.md
View File

@ -17,16 +17,16 @@ Namespace: `options.plugins.tooltip`, the global options for the chart tooltips
| `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` | `{weight: 'bold'}` | See [Fonts](../general/fonts.md).
| `titleAlign` | `string` | `'left'` | Horizontal alignment of the title text lines. [more...](#alignment)
| `titleAlign` | `string` | `'left'` | Horizontal alignment of the title text lines. [more...](#text-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.
| `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)
| `bodyAlign` | `string` | `'left'` | Horizontal alignment of the body text lines. [more...](#text-alignment)
| `bodySpacing` | `number` | `2` | Spacing to add to top and bottom of each tooltip item.
| `footerColor` | [`Color`](../general/colors.md) | `'#fff'` | Color of footer text.
| `footerFont` | `Font` | `{weight: 'bold'}` | See [Fonts](../general/fonts.md).
| `footerAlign` | `string` | `'left'` | Horizontal alignment of the footer text lines. [more...](#alignment)
| `footerAlign` | `string` | `'left'` | Horizontal alignment of the footer text lines. [more...](#text-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.
| `padding` | [`Padding`](../general/padding.md) | `6` | Padding inside the tooltip.
@ -42,6 +42,8 @@ Namespace: `options.plugins.tooltip`, the global options for the chart tooltips
| `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
| `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)
### Position Modes
@ -78,7 +80,23 @@ tooltipPlugin.positioners.myCustomPositioner = function(elements, eventPosition)
};
```
### Alignment
### Tooltip Alignment
The `xAlign` and `yAlign` options define the position of the tooltip caret. If these parameters are unset, the optimal caret position is determined.
The following values for the `xAlign` setting are supported.
* `'left'`
* `'center'`
* `'right'`
The following values for the `yAlign` setting are supported.
* `'top'`
* `'center'`
* `'bottom'`
### Text Alignment
The `titleAlign`, `bodyAlign` and `footerAlign` options define the horizontal position of the text lines with respect to the tooltip box. The following values are supported.