diff --git a/src/core/core.scale.js b/src/core/core.scale.js index b6113f794b7..7eaa656c6ce 100644 --- a/src/core/core.scale.js +++ b/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 diff --git a/test/fixtures/controller.bar/minBarLength/vertical.png b/test/fixtures/controller.bar/minBarLength/vertical.png index c79c4f3f3c9..2074397ea0f 100644 Binary files a/test/fixtures/controller.bar/minBarLength/vertical.png and b/test/fixtures/controller.bar/minBarLength/vertical.png differ diff --git a/test/fixtures/core.scale/border-behind-elements.js b/test/fixtures/core.scale/border-behind-elements.js new file mode 100644 index 00000000000..c5d17182383 --- /dev/null +++ b/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 + } + } +}; diff --git a/test/fixtures/core.scale/border-behind-elements.png b/test/fixtures/core.scale/border-behind-elements.png new file mode 100644 index 00000000000..d3f37719d7e Binary files /dev/null and b/test/fixtures/core.scale/border-behind-elements.png differ diff --git a/test/fixtures/core.scale/title/horizontal-center.js b/test/fixtures/core.scale/title/horizontal-center.js new file mode 100644 index 00000000000..68e488d8a5a --- /dev/null +++ b/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 + }, + } +}; diff --git a/test/fixtures/core.scale/title/horizontal-center.png b/test/fixtures/core.scale/title/horizontal-center.png new file mode 100644 index 00000000000..b3abf341cda Binary files /dev/null and b/test/fixtures/core.scale/title/horizontal-center.png differ diff --git a/test/fixtures/core.scale/title/horizontal-value.js b/test/fixtures/core.scale/title/horizontal-value.js new file mode 100644 index 00000000000..7cb97f6ad61 --- /dev/null +++ b/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 + }, + } +}; diff --git a/test/fixtures/core.scale/title/horizontal-value.png b/test/fixtures/core.scale/title/horizontal-value.png new file mode 100644 index 00000000000..9d3c5dd05c9 Binary files /dev/null and b/test/fixtures/core.scale/title/horizontal-value.png differ diff --git a/test/fixtures/core.scale/title/vertical-center.js b/test/fixtures/core.scale/title/vertical-center.js new file mode 100644 index 00000000000..89669be6d3f --- /dev/null +++ b/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 + }, + } +}; diff --git a/test/fixtures/core.scale/title/vertical-center.png b/test/fixtures/core.scale/title/vertical-center.png new file mode 100644 index 00000000000..8ebdad43d86 Binary files /dev/null and b/test/fixtures/core.scale/title/vertical-center.png differ diff --git a/test/fixtures/core.scale/title/vertical-value.js b/test/fixtures/core.scale/title/vertical-value.js new file mode 100644 index 00000000000..b8a0de6373b --- /dev/null +++ b/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 + }, + } +}; diff --git a/test/fixtures/core.scale/title/vertical-value.png b/test/fixtures/core.scale/title/vertical-value.png new file mode 100644 index 00000000000..eb4b201db5a Binary files /dev/null and b/test/fixtures/core.scale/title/vertical-value.png differ