Use maxTicksLimit option to calculate the labels size on ticks (#11069)

* Use maxTicksLimit option to calculate the labels size on ticks

* apply review

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index 562ab21b654e9f8f593765e8d5f47c6eae9ad8cd..50ddca8724c5c3bf70a8932c8f880de53210997e 100644 (file)
--- 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 (file)
index 0000000..d9c86c5
--- /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 (file)
index 0000000..063f06d
Binary files /dev/null and b/test/fixtures/scale.category/max-ticks-limit-norotation.png differ