diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 4bcabe0224f..9c82bb7cde6 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1,6 +1,6 @@ import defaults from './core.defaults'; import Element from './core.element'; -import {_alignPixel, _measureText, renderText} from '../helpers/helpers.canvas'; +import {_alignPixel, _measureText, renderText, clipArea, unclipArea} from '../helpers/helpers.canvas'; import {callback as call, each, finiteOrDefault, isArray, isFinite, isNullOrUndef, isObject, valueOrDefault} from '../helpers/helpers.core'; import {_factorize, toDegrees, toRadians, _int16Range, HALF_PI} from '../helpers/helpers.math'; import {toFont, resolve, toPadding} from '../helpers/helpers.options'; @@ -1468,6 +1468,7 @@ export default class Scale extends Element { const labelSizes = me._getLabelSizes(); const tickAndPadding = tl + padding; const widest = labelSizes.widest.width; + const lineSpace = labelSizes.highest.offset * 0.8; let textAlign; let x; @@ -1486,7 +1487,7 @@ export default class Scale extends Element { x -= (widest / 2); } else { textAlign = 'left'; - x -= widest; + x = me.left + lineSpace; } } } else if (position === 'right') { @@ -1503,7 +1504,7 @@ export default class Scale extends Element { x += widest / 2; } else { textAlign = 'right'; - x += widest; + x = me.right - lineSpace; } } } else { @@ -1513,6 +1514,23 @@ export default class Scale extends Element { return {textAlign, x}; } + /** + * @private + */ + _computeLabelArea() { + const me = this; + const chart = me.chart; + const position = me.options.position; + + if (position === 'left' || position === 'right') { + return {top: 0, left: me.left, bottom: chart.height, right: me.right}; + } if (position === 'top' || position === 'bottom') { + return {top: me.top, left: 0, bottom: me.bottom, right: chart.width}; + } + + return null; + } + /** * @protected */ @@ -1604,6 +1622,12 @@ export default class Scale extends Element { } const ctx = me.ctx; + + const area = me._computeLabelArea(); + if (area) { + clipArea(ctx, area); + } + const items = me._labelItems || (me._labelItems = me._computeLabelItems(chartArea)); let i, ilen; @@ -1614,6 +1638,10 @@ export default class Scale extends Element { let y = item.textOffset; renderText(ctx, label, 0, y, tickFont, item); } + + if (area) { + unclipArea(ctx); + } } /** diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-left-far-clipped.js b/test/fixtures/core.scale/crossAlignment/cross-align-left-far-clipped.js new file mode 100644 index 00000000000..27a936dce2c --- /dev/null +++ b/test/fixtures/core.scale/crossAlignment/cross-align-left-far-clipped.js @@ -0,0 +1,32 @@ +module.exports = { + config: { + type: 'bar', + data: { + datasets: [{ + data: [1, 2, 3], + }], + labels: ['Long long long long label 1', 'Label 2', 'Less more longer label 3'] + }, + options: { + indexAxis: 'y', + scales: { + y: { + position: 'left', + ticks: { + crossAlign: 'far', + }, + afterFit: axis => { + axis.width = 64; + }, + }, + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-left-far-clipped.png b/test/fixtures/core.scale/crossAlignment/cross-align-left-far-clipped.png new file mode 100644 index 00000000000..75258b70be7 Binary files /dev/null and b/test/fixtures/core.scale/crossAlignment/cross-align-left-far-clipped.png differ diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-right-far-clipped.js b/test/fixtures/core.scale/crossAlignment/cross-align-right-far-clipped.js new file mode 100644 index 00000000000..893b293d411 --- /dev/null +++ b/test/fixtures/core.scale/crossAlignment/cross-align-right-far-clipped.js @@ -0,0 +1,33 @@ +module.exports = { + config: { + type: 'bar', + data: { + datasets: [{ + data: [1, 2, 3], + }], + labels: ['Long long long long label 1', 'Label 2', 'Less more longer label 3'] + }, + options: { + indexAxis: 'y', + scales: { + y: { + position: 'right', + ticks: { + crossAlign: 'far', + }, + afterFit: axis => { + axis.width = 64; + }, + }, + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 512 + } + }, + tolerance: 0.1 +}; diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-right-far-clipped.png b/test/fixtures/core.scale/crossAlignment/cross-align-right-far-clipped.png new file mode 100644 index 00000000000..53395107ed5 Binary files /dev/null and b/test/fixtures/core.scale/crossAlignment/cross-align-right-far-clipped.png differ