From 4d034a02759aaf2350ad288f7e5cd3afdb0b39cc Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Sun, 1 Dec 2024 10:49:55 +0100 Subject: [PATCH] Add documentation about setting default tooltip font (#11968) --- docs/configuration/tooltip.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md index 123f4c719ae..8e6e0539e60 100644 --- a/docs/configuration/tooltip.md +++ b/docs/configuration/tooltip.md @@ -4,6 +4,10 @@ Namespace: `options.plugins.tooltip`, the global options for the chart tooltips is defined in `Chart.defaults.plugins.tooltip`. +:::warning +The `titleFont`, `bodyFont` and `footerFont` options default to the `Chart.defaults.font` options. To change the overrides for those options, you will need to pass a function that returns a font object. See section about [overriding default fonts](#default-font-overrides) for extra information below. +::: + | Name | Type | Default | Description | ---- | ---- | ------- | ----------- | `enabled` | `boolean` | `true` | Are on-canvas tooltips enabled? @@ -420,7 +424,7 @@ Tooltip.positioners.myCustomPositioner = function(elements, eventPosition) { }; // Then, to use it... -new Chart.js(ctx, { +new Chart(ctx, { data, options: { plugins: { @@ -443,3 +447,15 @@ declare module 'chart.js' { } } ``` + +## Default font overrides + +By default, the `titleFont`, `bodyFont` and `footerFont` listen to the `Chart.defaults.font` options for setting its values. +Overriding these normally by accessing the object won't work because it is backed by a get function that looks to the default `font` namespace. +So you will need to override this get function with your own function that returns the desired config. + +Example: + +```javascript +Chart.defaults.plugins.tooltip.titleFont = () => ({ size: 20, lineHeight: 1.2, weight: 800 }); +``` \ No newline at end of file