Enable multi-line axis titles (#8579)

diff --git a/docs/docs/axes/labelling.md b/docs/docs/axes/labelling.md
index 23e59535d74a2d17e14b99323596759c0ea6e667..44e01892ed4b7458137a90832eefb75215ef7e1f 100644 (file)
--- 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 6c4218b2e9910134a9a1a50d473c633f8c2aab8a..ec8a42ae832f36d762ad45e8310b2d341fe4edfa 100644 (file)
--- 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 (file)
index 0000000..d116254
--- /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 (file)
index 0000000..291bb28
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 4ee77eab4ed08989e8f968fb4f2ca2c92f75e0bd..9ae5fc70a6622ef7548f12bf975149c74c0a8259 100644 (file)
--- 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: {