diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 562ab21b654..50ddca8724c 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -8,6 +8,7 @@ import {autoSkip} from './core.scale.autoskip.js'; const reverseAlign = (align) => align === 'left' ? 'right' : align === 'right' ? 'left' : align; const offsetFromEdge = (scale, edge, offset) => edge === 'top' || edge === 'left' ? scale[edge] + offset : scale[edge] - offset; +const getTicksLimit = (ticksLength, maxTicksLimit) => Math.min(maxTicksLimit || ticksLength, ticksLength); /** * @typedef { import('./core.controller.js').default } Chart @@ -585,7 +586,7 @@ export default class Scale extends Element { calculateLabelRotation() { const options = this.options; const tickOpts = options.ticks; - const numTicks = this.ticks.length; + const numTicks = getTicksLimit(this.ticks.length, options.ticks.maxTicksLimit); const minRotation = tickOpts.minRotation || 0; const maxRotation = tickOpts.maxRotation; let labelRotation = minRotation; @@ -803,7 +804,7 @@ export default class Scale extends Element { ticks = sample(ticks, sampleSize); } - this._labelSizes = labelSizes = this._computeLabelSizes(ticks, ticks.length); + this._labelSizes = labelSizes = this._computeLabelSizes(ticks, ticks.length, this.options.ticks.maxTicksLimit); } return labelSizes; @@ -815,15 +816,16 @@ export default class Scale extends Element { * @return {{ first: object, last: object, widest: object, highest: object, widths: Array, heights: array }} * @private */ - _computeLabelSizes(ticks, length) { + _computeLabelSizes(ticks, length, maxTicksLimit) { const {ctx, _longestTextCache: caches} = this; const widths = []; const heights = []; + const increment = Math.floor(length / getTicksLimit(length, maxTicksLimit)); let widestLabelSize = 0; let highestLabelSize = 0; let i, j, jlen, label, tickFont, fontString, cache, lineHeight, width, height, nestedLabel; - for (i = 0; i < length; ++i) { + for (i = 0; i < length; i += increment) { label = ticks[i].label; tickFont = this._resolveTickFontOptions(i); ctx.font = fontString = tickFont.string; diff --git a/test/fixtures/scale.category/max-ticks-limit-norotation.js b/test/fixtures/scale.category/max-ticks-limit-norotation.js new file mode 100644 index 00000000000..d9c86c53727 --- /dev/null +++ b/test/fixtures/scale.category/max-ticks-limit-norotation.js @@ -0,0 +1,37 @@ +const data = Array.from({length: 42}, (_, i) => i + 1); +const labels = data.map(v => 'tick' + v); + +module.exports = { + description: 'https://github.com/chartjs/Chart.js/issues/10856', + config: { + type: 'bar', + data: { + datasets: [{ + data + }], + labels + }, + options: { + scales: { + x: { + ticks: { + display: true, + maxTicksLimit: 6 + }, + grid: { + color: 'red' + } + }, + y: {display: false} + }, + layout: { + padding: { + right: 2 + } + } + } + }, + options: { + spriteText: true + } +}; diff --git a/test/fixtures/scale.category/max-ticks-limit-norotation.png b/test/fixtures/scale.category/max-ticks-limit-norotation.png new file mode 100644 index 00000000000..063f06d1a96 Binary files /dev/null and b/test/fixtures/scale.category/max-ticks-limit-norotation.png differ