Fix center axis title positions (#9413)

* Fix the title positions for center positioned axes

* Handle center position for vertical axes

* Tests

src/core/core.scale.js

@@ -132,16 +132,36 @@ function titleAlign(align, position, reverse) {
 }
 
 function titleArgs(scale, offset, position, align) {
-  const {top, left, bottom, right} = scale;
+  const {top, left, bottom, right, chart} = scale;
+  const {chartArea, scales} = chart;
   let rotation = 0;
   let maxWidth, titleX, titleY;
+  const height = bottom - top;
+  const width = right - left;
 
   if (scale.isHorizontal()) {
     titleX = _alignStartEnd(align, left, right);
-    titleY = offsetFromEdge(scale, position, offset);
+
+    if (isObject(position)) {
+      const positionAxisID = Object.keys(position)[0];
+      const value = position[positionAxisID];
+      titleY = scales[positionAxisID].getPixelForValue(value) + height - offset;
+    } else if (position === 'center') {
+      titleY = (chartArea.bottom + chartArea.top) / 2 + height - offset;
+    } else {
+      titleY = offsetFromEdge(scale, position, offset);
+    }
     maxWidth = right - left;
   } else {
-    titleX = offsetFromEdge(scale, position, offset);
+    if (isObject(position)) {
+      const positionAxisID = Object.keys(position)[0];
+      const value = position[positionAxisID];
+      titleX = scales[positionAxisID].getPixelForValue(value) - width + offset;
+    } else if (position === 'center') {
+      titleX = (chartArea.left + chartArea.right) / 2 - width + offset;
+    } else {
+      titleX = offsetFromEdge(scale, position, offset);
+    }
     titleY = _alignStartEnd(align, bottom, top);
     rotation = position === 'left' ? -HALF_PI : HALF_PI;
   }
@@ -1557,7 +1577,7 @@ export default class Scale extends Element {
     const align = title.align;
     let offset = font.lineHeight / 2;
 
-    if (position === 'bottom') {
+    if (position === 'bottom' || position === 'center' || isObject(position)) {
       offset += padding.bottom;
       if (isArray(title.text)) {
         offset += font.lineHeight * (title.text.length - 1);

test/fixtures/core.scale/title/horizontal-center.js

@@ -0,0 +1,49 @@
+module.exports = {
+  config: {
+    type: 'line',
+    options: {
+      events: [],
+      scales: {
+        y: {
+          type: 'linear',
+          position: 'left',
+          min: 0,
+          max: 100,
+          ticks: {
+            display: false
+          },
+          grid: {
+            display: false
+          },
+          title: {
+            display: true,
+            text: 'vertical'
+          }
+        },
+        x: {
+          type: 'linear',
+          position: 'center',
+          min: 0,
+          max: 100,
+          ticks: {
+            display: false
+          },
+          grid: {
+            display: false
+          },
+          title: {
+            display: true,
+            text: 'horizontal'
+          }
+        },
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 256,
+      width: 256
+    },
+  }
+};

test/fixtures/core.scale/title/horizontal-value.js

@@ -0,0 +1,51 @@
+module.exports = {
+  config: {
+    type: 'line',
+    options: {
+      events: [],
+      scales: {
+        y: {
+          type: 'linear',
+          position: 'left',
+          min: 0,
+          max: 100,
+          ticks: {
+            display: false
+          },
+          grid: {
+            display: false
+          },
+          title: {
+            display: true,
+            text: 'vertical'
+          }
+        },
+        x: {
+          type: 'linear',
+          position: {
+            y: 40,
+          },
+          min: 0,
+          max: 100,
+          ticks: {
+            display: false
+          },
+          grid: {
+            display: false
+          },
+          title: {
+            display: true,
+            text: 'horizontal'
+          }
+        },
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 256,
+      width: 256
+    },
+  }
+};

test/fixtures/core.scale/title/vertical-center.js

@@ -0,0 +1,49 @@
+module.exports = {
+  config: {
+    type: 'line',
+    options: {
+      events: [],
+      scales: {
+        y: {
+          type: 'linear',
+          position: 'center',
+          min: 0,
+          max: 100,
+          ticks: {
+            display: false
+          },
+          grid: {
+            display: false
+          },
+          title: {
+            display: true,
+            text: 'vertical'
+          }
+        },
+        x: {
+          type: 'linear',
+          position: 'bottom',
+          min: 0,
+          max: 100,
+          ticks: {
+            display: false
+          },
+          grid: {
+            display: false
+          },
+          title: {
+            display: true,
+            text: 'horizontal'
+          }
+        },
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 256,
+      width: 256
+    },
+  }
+};

test/fixtures/core.scale/title/vertical-value.js

@@ -0,0 +1,51 @@
+module.exports = {
+  config: {
+    type: 'line',
+    options: {
+      events: [],
+      scales: {
+        y: {
+          type: 'linear',
+          position: {
+            x: 40
+          },
+          min: 0,
+          max: 100,
+          ticks: {
+            display: false
+          },
+          grid: {
+            display: false
+          },
+          title: {
+            display: true,
+            text: 'vertical'
+          }
+        },
+        x: {
+          type: 'linear',
+          position: 'bottom',
+          min: 0,
+          max: 100,
+          ticks: {
+            display: false
+          },
+          grid: {
+            display: false
+          },
+          title: {
+            display: true,
+            text: 'horizontal'
+          }
+        },
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 256,
+      width: 256
+    },
+  }
+};