[charts] Add tick spacing property #20282

bernardobelchior · 2025-11-11T16:34:15Z

Part of #12960.

Adds a tickSpacing property that defines the minimum space in pixels between ticks. At the moment, this is only used for ordinal scales. This should improve performance significantly while also improving the look of ticks in bar charts with many data points.

Ideally, in v9 we'd set this default to 50px, similar to continuous scales.

Demo

mui-bot · 2025-11-11T16:36:32Z

Deploy preview: https://deploy-preview-20282--material-ui-x.netlify.app/

Updated pages:

docs/data/charts/axis/axis.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-charts	🔺+287B^(+0.08%)	🔺+127B^(+0.12%)
@mui/x-charts-pro	🔺+286B^(+0.06%)	🔺+106B^(+0.08%)
@mui/x-charts-premium	🔺+287B^(+0.06%)	🔺+123B^(+0.09%)
@mui/x-date-pickers	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 9d34f31

bernardobelchior · 2025-11-11T16:44:01Z

packages/x-charts/src/hooks/useTicks.ts

   */
  tickLabelPlacement?: 'middle' | 'tick';
+  /**
+   * The space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.


Should we only apply this to ordinal scales?

bernardobelchior · 2025-11-11T16:45:20Z

packages/x-charts/src/hooks/useTicks.ts

  tickLabelPlacement?: 'middle' | 'tick';
+  /**
+   * The space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0


Do we want to increase the default in v9? Linear scales indirectly use 50 for this (because it calculates the default tick number as range[1] - range[0] / 50)

Do we need a default value? For me we could have no default value.

For me the ordinal ticks should display all ticks by default. It feels more natural to modify a configuration to sub sample ticks than having to modify the config to see all your ticks

I'm thinking about bar charts like those

Yeah I wouldn't increase it either

Suggested change

* @default 0

bernardobelchior · 2025-11-11T16:46:08Z

packages/x-charts/src/hooks/useTicks.ts

   */
  tickLabelPlacement?: 'middle' | 'tick';
+  /**
+   * The space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.


Need to document how this interacts/conflicts with tickMinStep, tickMaxStep, tickLabelInterval and tickLabelMinGap

Need to document how this interacts/conflicts with tickMinStep, tickMaxStep, tickLabelInterval and tickLabelMinGap

For now it does not interact, because those are for continuous scale only (except for tickInterval)

What about

The minimum distance in pixels between two ticks.

For ordinal scale, ticks are filtered out to match the distance.

For continuous scale, the tickSpacing is used to compute the tickumber if not defined.

For continuous scale, the tickSpacing is used to compute the tickumber if not defined.

For continuous scales we're defaulting this to 50, so it would only work if we change the default depending on the scale type.

bernardobelchior · 2025-11-11T16:53:51Z

Using a tick spacing of 50 in the example below allowed me to reduce the rendering time by 400ms (from 1.15s to 750ms, 4x CPU throttling).

With this plus a batch scatter plot, I think we can reduce a large bar chart's rendering time significantly.

bernardobelchior · 2025-11-12T18:36:40Z

@alexfauquette your input would be especially appreciated here as you've worked on a similar topic 😄

github-actions · 2025-11-21T09:38:15Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

codspeed-hq · 2025-11-24T08:15:17Z

CodSpeed Performance Report

Merging #20282 will not alter performance

_{Comparing bernardobelchior:band-tick-spacing (9d34f31) with master (7160d7b)¹}

Summary

✅ 13 untouched

No successful run was found on master (dd38206) during the generation of this report, so 7160d7b was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

alexfauquette

The behavior looks good, and it's a nice move in direction of more resposive charts.

Sorry for the delay in reviewing this PR

alexfauquette · 2025-11-27T07:59:44Z

packages/x-charts/src/hooks/useTicks.ts

+  const every = Math.ceil(domain.length / (rangeSpan / tickSpacing));
+  return domain.filter((_, index) => index % every === 0);
+}


To handle the case tick spacing = 0

Suggested change

const every = Math.ceil(domain.length / (rangeSpan / tickSpacing));

return domain.filter((_, index) => index % every === 0);

}

const every = Math.ceil(domain.length * tickSpacing / rangeSpan);

if(Number.isNaN(every) || every <= 1){

return domain;

}

return domain.filter((_, index) => index % every === 0);

}

I stated that assumption in the documentation of the function:

Assumes tick spacing is greater than 0.

Do we need to handle it? It should already be ensured by the caller.

It cost nothing, plus add an extra savings:

avoid to run filter if the every is equal to 1

do no crash rangeSpan is 0

alexfauquette · 2025-11-27T08:07:43Z

packages/x-charts/src/hooks/useTicks.ts

   */
  tickLabelPlacement?: 'middle' | 'tick';
+  /**
+   * The space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.


Need to document how this interacts/conflicts with tickMinStep, tickMaxStep, tickLabelInterval and tickLabelMinGap

For now it does not interact, because those are for continuous scale only (except for tickInterval)

What about

The minimum distance in pixels between two ticks.

For ordinal scale, ticks are filtered out to match the distance.

For continuous scale, the tickSpacing is used to compute the tickumber if not defined.

alexfauquette · 2025-11-27T08:12:04Z

packages/x-charts/src/hooks/useTicks.ts

  tickLabelPlacement?: 'middle' | 'tick';
+  /**
+   * The space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0


Do we need a default value? For me we could have no default value.

For me the ordinal ticks should display all ticks by default. It feels more natural to modify a configuration to sub sample ticks than having to modify the config to see all your ticks

I'm thinking about bar charts like those

packages/x-charts/src/hooks/useTicks.ts

alexfauquette

Mostly minor comments to polish

docs/data/charts/axis/TickSpacing.tsx

alexfauquette · 2025-12-02T08:59:31Z

packages/x-charts/src/hooks/useTicks.ts

  tickLabelPlacement?: 'middle' | 'tick';
+  /**
+   * The space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0


Suggested change

* @default 0

alexfauquette · 2025-12-02T09:00:10Z

packages/x-charts/src/hooks/useTicks.ts

+        filteredDomain = filteredDomain.filter(tickInterval);
+      }
+
+      if (tickSpacing !== undefined && tickSpacing > 0) {


Suggested change

if (tickSpacing !== undefined && tickSpacing > 0) {

if (tickSpacing) {

I find the current way of writing more explicit, otherwise it might not be clear that this isn't an oversight. I can replace it with a comment if you prefer, though

alexfauquette · 2025-12-02T09:02:26Z

packages/x-charts/src/models/axis.ts

  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0


Suggested change

* @default 0

Why should we remove the default?

Why adding a default instead of just considering that if not provided it has no effect?

Plus it will stay accurate if at some point we extend the impact of this property to continuous axes

just considering that if not provided it has no effect

Should we state that instead, then? Otherwise I don't think it's clear for users what the default value is.

If they're looking at this prop for the first time, isn't it plausible that we set a default value different than 0?

alexfauquette · 2025-12-02T09:20:14Z

docs/data/charts/axis/axis.md

+You can use the `tickSpacing` property to define the minimum spacing in pixels between two ticks in ordinal scales.
+
+By default, this value is set to 0, so there is no minimum spacing between ticks.
+
+For band scales where hidden ticks can be interpolated, such as numbers and dates, the tick spacing can be set to a positive value.
+
+This should improve the readability of the axis by reducing the number of ticks shown as well as improve performance when there is a large number of ticks.


Suggested change

You can use the `tickSpacing` property to define the minimum spacing in pixels between two ticks in ordinal scales.

By default, this value is set to 0, so there is no minimum spacing between ticks.

For band scales where hidden ticks can be interpolated, such as numbers and dates, the tick spacing can be set to a positive value.

This should improve the readability of the axis by reducing the number of ticks shown as well as improve performance when there is a large number of ticks.

Use the `tickSpacing` property to define the minimum spacing in pixels between two ticks.

Having a minimal space between ticks improves the readability and the performances of the axis.

This property is only available for ordinal axes (the one with band and point scale).

I've rewritten some of this paragraph, but why do you think we should remove the usage suggestion and the default value? I think it's useful info

I think documentation readers have a small capacity for attention.

The explanation on the default is a full sentence to explain what happen if they don't set this property. But they already have their code running, or they have seen dozens of bar chart before so they intuitively know there is a tick per category by default

About the usage, I've not removed it. I only focused on what I think matters the most:

It's interesting for readability and performances 👍

The fact that values should be interoperable: That's a concern for us, not for the users. They have a particular dataset to display, so they intuitively know if they can remove ticks or not.

insist on the fact it only works on ordinal scales, to be sure people don't lose their mind trying to make this work on a continuous one

Makes sense. I tried shortening the docs even further

docs/data/charts/axis/TickSpacing.js

bernardobelchior added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: charts Changes related to the charts. labels Nov 11, 2025

bernardobelchior force-pushed the band-tick-spacing branch from fb049d5 to b8a212f Compare November 11, 2025 16:43

bernardobelchior commented Nov 11, 2025

View reviewed changes

bernardobelchior force-pushed the band-tick-spacing branch from b8a212f to 6a97e6a Compare November 11, 2025 16:48

bernardobelchior mentioned this pull request Nov 11, 2025

[charts] Place ordinal ticks according to a continuous scale #19808

Merged

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 21, 2025

bernardobelchior force-pushed the band-tick-spacing branch from f47a446 to fb0a165 Compare November 24, 2025 08:03

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 24, 2025

bernardobelchior force-pushed the band-tick-spacing branch 2 times, most recently from 5336655 to 7824e1b Compare November 26, 2025 11:28

bernardobelchior marked this pull request as ready for review November 26, 2025 15:52

bernardobelchior requested review from JCQuintas, alexfauquette and prakhargupta1 as code owners November 26, 2025 15:52

bernardobelchior force-pushed the band-tick-spacing branch from 82239a0 to 2f4974c Compare November 26, 2025 15:52

alexfauquette reviewed Nov 27, 2025

View reviewed changes

bernardobelchior added 6 commits November 27, 2025 14:31

[charts] Add tick spacing property

e7c0c69

Add demo

35a5912

Gen static

434e294

Use middle tick placement

cbe37e1

Update demo. Move code to separate function.

30fc080

Fix spacing

c39b989

bernardobelchior added 6 commits November 27, 2025 14:31

Update docs

5919358

Add tests

bb3f116

Address PR comments

cb6385f

Add tick spacing prop to axis components

3788041

Handle every=1 and NaN

af2a607

Gen static

dd7136f

bernardobelchior force-pushed the band-tick-spacing branch from d1e85a5 to dd7136f Compare November 27, 2025 13:31

Apply interval before spacing

cf18fb5

bernardobelchior requested a review from alexfauquette December 1, 2025 09:58

alexfauquette approved these changes Dec 2, 2025

View reviewed changes

bernardobelchior added 3 commits December 2, 2025 14:13

Rewrite

3b5d2f8

Use pro chart

012fbbc

Shorten docs

9d34f31

bernardobelchior merged commit a37ad24 into mui:master Dec 3, 2025
22 checks passed

bernardobelchior deleted the band-tick-spacing branch December 3, 2025 10:50

bernardobelchior mentioned this pull request Dec 3, 2025

[charts] Fix vitest lint error #20550

Merged

A-s-h-o-k pushed a commit to A-s-h-o-k/mui-x that referenced this pull request Dec 14, 2025

[charts] Add tick spacing property (mui#20282)

2c68881

mapache-salvaje pushed a commit to mapache-salvaje/mui-x that referenced this pull request Dec 29, 2025

[charts] Add tick spacing property (mui#20282)

90b3fdc

	if (tickSpacing !== undefined && tickSpacing > 0) {
	if (tickSpacing) {

Uh oh!

[charts] Add tick spacing property #20282

[charts] Add tick spacing property #20282

Uh oh!

Conversation

bernardobelchior commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bernardobelchior Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bernardobelchior commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bernardobelchior commented Nov 12, 2025

Uh oh!

github-actions bot commented Nov 21, 2025

Uh oh!

codspeed-hq bot commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging #20282 will not alter performance

Summary

Footnotes

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

alexfauquette Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bernardobelchior commented Nov 11, 2025 •

edited

Loading

mui-bot commented Nov 11, 2025 •

edited

Loading

bernardobelchior Nov 11, 2025 •

edited

Loading

bernardobelchior commented Nov 11, 2025 •

edited

Loading

codspeed-hq bot commented Nov 24, 2025 •

edited

Loading

alexfauquette Nov 27, 2025 •

edited

Loading