Skip to content

Commit

Permalink
Use maxTicksLimit option to calculate the labels size on ticks (#11069)
Browse files Browse the repository at this point in the history
* Use maxTicksLimit option to calculate the labels size on ticks

* apply review
  • Loading branch information
stockiNail committed Feb 9, 2023
1 parent 1db46ef commit 8dfcf1c
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 4 deletions.
10 changes: 6 additions & 4 deletions src/core/core.scale.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down
37 changes: 37 additions & 0 deletions test/fixtures/scale.category/max-ticks-limit-norotation.js
Original file line number Diff line number Diff line change
@@ -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
}
};
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 8dfcf1c

Please sign in to comment.