From: Evert Timberg <evert.timberg+github@gmail.com>
Date: Sat, 6 Mar 2021 15:18:32 +0000 (-0500)
Subject: Enable multi-line axis titles (#8579)
X-Git-Tag: v3.0.0-beta.13~2
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=279b6ae1da19d2f0f35c7e0a4d5de1fb195046f6;p=thirdparty%2FChart.js.git

Enable multi-line axis titles (#8579)
---

diff --git a/docs/docs/axes/labelling.md b/docs/docs/axes/labelling.md
index 23e59535d..44e01892e 100644
--- a/docs/docs/axes/labelling.md
+++ b/docs/docs/axes/labelling.md
@@ -12,7 +12,7 @@ Namespace: `options.scales[scaleId].title`, it defines options for the scale tit
 | ---- | ---- | ------- | -----------
 | `display` | `boolean` | `false` | If true, display the axis title.
 | `align` | `string` | `'center'` | Alignment of the axis title. Possible options are `'start'`, `'center'` and `'end'`
-| `text` | `string` | `''` | The text for the title. (i.e. "# of People" or "Response Choices").
+| `text` | `string`\|`string[]` | `''` | The text for the title. (i.e. "# of People" or "Response Choices").
 | `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.
diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index 6c4218b2e..ec8a42ae8 100644
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -177,8 +177,9 @@ function getTitleHeight(options, fallback) {
 
   const font = toFont(options.font, fallback);
   const padding = toPadding(options.padding);
+  const lines = isArray(options.text) ? options.text.length : 1;
 
-  return font.lineHeight + padding.height;
+  return (lines * font.lineHeight) + padding.height;
 }
 
 /**
diff --git a/test/fixtures/core.scale/title-multi-line.js b/test/fixtures/core.scale/title-multi-line.js
new file mode 100644
index 000000000..d116254f8
--- /dev/null
+++ b/test/fixtures/core.scale/title-multi-line.js
@@ -0,0 +1,32 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      datasets: [{
+        data: [1, -1, 3],
+      }],
+      labels: ['Label1', 'Label2', 'Label3']
+    },
+    options: {
+      scales: {
+        y: {
+          title: {
+            display: true,
+            text: [
+              'Line 1',
+              'Line 2',
+              'Line 3',
+            ]
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};
diff --git a/test/fixtures/core.scale/title-multi-line.png b/test/fixtures/core.scale/title-multi-line.png
new file mode 100644
index 000000000..291bb2865
Binary files /dev/null and b/test/fixtures/core.scale/title-multi-line.png differ
diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index 4ee77eab4..9ae5fc70a 100644
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -2698,7 +2698,7 @@ export interface CartesianScaleOptions extends CoreScaleOptions {
 
   title: {
     display: boolean;
-    text: string;
+    text: string | string[];
     color: Color;
     font: FontSpec;
     padding: {