Enable multi-line axis titles (#8579)

Author: etimberg

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.

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;
 }
 
 /**

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
+    }
+  }
+};

test/fixtures/core.scale/title-multi-line.png

@@ -2698,7 +2698,7 @@ export interface CartesianScaleOptions extends CoreScaleOptions {
 
   title: {
     display: boolean;
-    text: string;
+    text: string | string[];
     color: Color;
     font: FontSpec;
     padding: {