diff --git a/src/core/core.scale.js b/src/core/core.scale.js index a640d332a..b6113f794 100644 --- a/src/core/core.scale.js +++ b/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; diff --git a/test/fixtures/scale.category/max-ticks-limit-a.js b/test/fixtures/scale.category/max-ticks-limit-a.js new file mode 100644 index 000000000..9a89bcb9c --- /dev/null +++ b/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 + } +}; diff --git a/test/fixtures/scale.category/max-ticks-limit-a.png b/test/fixtures/scale.category/max-ticks-limit-a.png new file mode 100644 index 000000000..8b0c7b8f8 Binary files /dev/null and b/test/fixtures/scale.category/max-ticks-limit-a.png differ diff --git a/test/fixtures/scale.category/max-ticks-limit-b.js b/test/fixtures/scale.category/max-ticks-limit-b.js new file mode 100644 index 000000000..21654fd6a --- /dev/null +++ b/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 + } +}; diff --git a/test/fixtures/scale.category/max-ticks-limit-b.png b/test/fixtures/scale.category/max-ticks-limit-b.png new file mode 100644 index 000000000..f9f1a9516 Binary files /dev/null and b/test/fixtures/scale.category/max-ticks-limit-b.png differ