lower z index of scale border so it draws behind the chart elements again

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;
   }
@@ -593,8 +613,8 @@ export default class Scale extends Element {
 				- tickOpts.padding - getTitleHeight(options.title, me.chart.options.font);
       maxLabelDiagonal = Math.sqrt(maxLabelWidth * maxLabelWidth + maxLabelHeight * maxLabelHeight);
       labelRotation = toDegrees(Math.min(
-        Math.asin(Math.min((labelSizes.highest.height + 6) / tickWidth, 1)),
-        Math.asin(Math.min(maxHeight / maxLabelDiagonal, 1)) - Math.asin(maxLabelHeight / maxLabelDiagonal)
+        Math.asin(_limitValue((labelSizes.highest.height + 6) / tickWidth, -1, 1)),
+        Math.asin(_limitValue(maxHeight / maxLabelDiagonal, -1, 1)) - Math.asin(_limitValue(maxLabelHeight / maxLabelDiagonal, -1, 1))
       ));
       labelRotation = Math.max(minRotation, Math.min(maxRotation, labelRotation));
     }
@@ -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);
@@ -1600,7 +1620,7 @@ export default class Scale extends Element {
     const me = this;
     const opts = me.options;
     const tz = opts.ticks && opts.ticks.z || 0;
-    const gz = opts.grid && opts.grid.z || 0;
+    const gz = valueOrDefault(opts.grid && opts.grid.z, -1);
 
     if (!me._isVisible() || me.draw !== Scale.prototype.draw) {
       // backward compatibility: draw has been overridden by custom scale

test/fixtures/core.scale/border-behind-elements.js

@@ -0,0 +1,49 @@
+module.exports = {
+  config: {
+    type: 'bubble',
+    data: {
+      datasets: [
+        {
+          label: '# of Votes',
+          data: [{x: 19, y: 3, r: 3}, {x: 2, y: 2, r: 60}],
+          radius: 100,
+          backgroundColor: 'pink'
+        }
+      ]
+    },
+    options: {
+      plugins: {
+        legend: {
+          display: false
+        }
+      },
+      scales: {
+        y: {
+          ticks: {
+            display: false
+          },
+          grid: {
+            borderColor: 'red',
+            borderWidth: 5
+          }
+        },
+        x: {
+          ticks: {
+            display: false
+          },
+          grid: {
+            borderColor: 'red',
+            borderWidth: 5
+          }
+        }
+      }
+    }
+  },
+
+  options: {
+    canvas: {
+      height: 512,
+      width: 512
+    }
+  }
+};

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