Apply maxTicksLimit to grid when ticks are hidden (#9277)

src/core/core.scale.js

@@ -1,6 +1,6 @@
 import Element from './core.element';
 import {_alignPixel, _measureText, renderText, clipArea, unclipArea} from '../helpers/helpers.canvas';
-import {callback as call, each, finiteOrDefault, isArray, isFinite, isNullOrUndef, isObject} from '../helpers/helpers.core';
+import {callback as call, each, finiteOrDefault, isArray, isFinite, isNullOrUndef, isObject, valueOrDefault} from '../helpers/helpers.core';
 import {toDegrees, toRadians, _int16Range, _limitValue, HALF_PI} from '../helpers/helpers.math';
 import {_alignStartEnd, _toLeftRightCenter} from '../helpers/helpers.extras';
 import {toFont, toPadding, _addGrace} from '../helpers/helpers.options';
@@ -1072,7 +1072,9 @@ export default class Scale extends Element {
       x2 = chartArea.right;
     }
 
-    for (i = 0; i < ticksLength; ++i) {
+    const limit = valueOrDefault(options.ticks.maxTicksLimit, ticksLength);
+    const step = Math.max(1, Math.ceil(ticksLength / limit));
+    for (i = 0; i < ticksLength; i += step) {
       const optsAtIndex = grid.setContext(me.getContext(i));
 
       const lineWidth = optsAtIndex.lineWidth;

test/fixtures/scale.category/max-ticks-limit-a.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/7302',
+  config: {
+    type: 'bar',
+    data: {
+      datasets: [{
+        data
+      }],
+      labels
+    },
+    options: {
+      scales: {
+        x: {
+          ticks: {
+            display: false,
+            maxTicksLimit: 7
+          },
+          grid: {
+            color: 'red'
+          }
+        },
+        y: {display: false}
+      },
+      layout: {
+        padding: {
+          right: 2
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/scale.category/max-ticks-limit-b.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/7302',
+  config: {
+    type: 'bar',
+    data: {
+      datasets: [{
+        data
+      }],
+      labels
+    },
+    options: {
+      scales: {
+        x: {
+          ticks: {
+            display: false,
+            maxTicksLimit: 6
+          },
+          grid: {
+            color: 'red'
+          }
+        },
+        y: {display: false}
+      },
+      layout: {
+        padding: {
+          right: 2
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};