[charts] fix y-axis tick label overflow #16846

bernardobelchior · 2025-03-06T13:56:55Z

Part of #10928.

Depends on:

[charts] fix x-axis tick label overflow #16709

Fixes tick label overflow for the y-axis. It follows the same approach as #16709, but the y-axis doesn't hide overlapping labels at the moment, which is why in the "after" image below you'll see that there's overlapping labels, namely when the labels are rotated -90 and 90 degrees.

The algorithm for hiding overlapping labels in the y-axis is out of scope for this PR.

Before:

After:

Changelog

Tick labels in the y-axis of cartesian charts will now have an ellipsis applied to prevent overflow.
If your tick labels are being clipped sooner than you would like, you can increase the y-axis size by increasing its width property.

mui-bot · 2025-03-06T14:00:19Z

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

Generated by 🚫 dangerJS against ebce504

codspeed-hq · 2025-03-06T14:04:58Z

CodSpeed Performance Report

Merging #16846 will not alter performance

_{Comparing bernardobelchior:fix-y-axis-tick-overflow (ebce504) with master (4877ff1)}

Summary

✅ 7 untouched benchmarks
🆕 1 new benchmarks

Benchmarks breakdown

	Benchmark	`BASE`	`HEAD`	Change
🆕	`PieChart with big data amount`	N/A	182.8 ms	N/A

bernardobelchior · 2025-03-06T15:54:29Z

@alexfauquette @JCQuintas should we consider once again updating the default axis size? Now for the y-axis 😛

The default axis size of 30px isn't enough to render "1,000" without ellipsis:

To do so, we'd need a width of 42px:

Should we increase the axis size? Would it make sense to reduce the margin or should we keep it as is? 🤔

github-actions · 2025-03-07T14:56:01Z

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

bernardobelchior · 2025-03-18T14:57:06Z

@alexfauquette @JCQuintas should we consider once again updating the default axis size? Now for the y-axis 😛

The default axis size of 30px isn't enough to render "1,000" without ellipsis:

To do so, we'd need a width of 42px:

Should we increase the axis size? Would it make sense to reduce the margin or should we keep it as is? 🤔

Increased it to 50px and solved the overflows of most demos. Let me know if you think that's acceptable

JCQuintas · 2025-03-18T15:17:47Z

Increased it to 50px and solved the overflows of most demos. Let me know if you think that's acceptable

That's probably for the better if it makes it so the defaults are better for everyone, I'll take a look at the screenshots

JCQuintas · 2025-03-18T15:45:25Z

Increased it to 50px and solved the overflows of most demos. Let me know if you think that's acceptable

It seems 40 would fit an entire 4 character number, though I suppose it doesn't because there are some margins expected to exist?

bernardobelchior · 2025-03-18T15:54:32Z

Increased it to 50px and solved the overflows of most demos. Let me know if you think that's acceptable

It seems 40 would fit an entire 4 character number, though I suppose it doesn't because there are some margins expected to exist?

To fit "1,000" we would need 42px as indicated in this comment. Without the comma, 40px might fit, yeah. Do you prefer if we chose 40px? It seems adding a comma is the default format.

JCQuintas · 2025-03-18T16:01:12Z

My brain didn't compute the comma 😅

I believe the best approach would be the lowest size we can have that solves most of the cases we have. Ofc my brain would prefer a round number, but If 42 is the lowest, then we might want to use that instead.

bernardobelchior · 2025-03-18T16:09:43Z

My brain didn't compute the comma 😅

I believe the best approach would be the lowest size we can have that solves most of the cases we have. Ofc my brain would prefer a round number, but If 42 is the lowest, then we might want to use that instead.

Ok, but I'd increase a couple pixels to maybe 45px. Text rendering can be different across different OSes, so it's possible that the same font and same text have different sizes.

alexfauquette

Nice port from x-axis to the y-axis 👍

Maybe a small message in the description of the PR to be sure we don't forget to mention it in the changelog

alexfauquette · 2025-03-24T08:34:31Z

packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx

@@ -174,6 +247,15 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
    x: positionSign * (axisWidth - labelHeight),


It is not directly related to this PR, but I just noticed this x position could be replaced by

Suggested change

x: positionSign * (axisWidth - labelHeight),

x: positionSign * axisWidth,

and the label placement could be modified with

- dominantBaseline: 'auto', + dominantBaseline: 'text-before-edge',

(or text-after-edge I never remember who is who)

Such that the axis label does not depend on text measure anymore

Updated 👍 it doesn't allow us to get rid of the label height measurement, though.

it doesn't allow us to get rid of the label height measurement, though.

Not for the clean renderµ. But at least the axis main label should not move between the server-side rendering and the hydration since labelHeight does not impact it anymore

Yeah, good point 👍

bernardobelchior · 2025-03-24T11:25:51Z

packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx

+  if (isRtl) {
+    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
+  }


bernardobelchior · 2025-03-24T11:26:04Z

packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx

+  if (isRtl) {
+    [leftBoundFactor, rightBoundFactor] = [rightBoundFactor, leftBoundFactor];
+  }


Fixes RTL:

Screen.Recording.2025-03-24.at.12.25.02.mov

JCQuintas · 2025-03-24T22:59:07Z

packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx

@@ -148,6 +149,10 @@ function shortenLabels(
    [leftBoundFactor, rightBoundFactor] = [rightBoundFactor, leftBoundFactor];
  }

+  if (isRtl) {
+    [leftBoundFactor, rightBoundFactor] = [rightBoundFactor, leftBoundFactor];


Probably good to leave a small comment on this code to mention it is to prevent an intermediate assignment 😅

From my point of view, it's clear what's happening, so I saw no need for a comment.

Nevertheless, I can add it, but this is used in 4 different places, should I leave the comment in all 4 places?

Just add it to the first usage on each of the files

Or you could extract the logic somehwere, they seem the same

But this is a nitpick, can be done after

I'll do it later as a follow-up, then 👍

bernardobelchior added enhancement This is not a bug, nor a new feature component: charts This is the name of the generic UI component, not the React module! labels Mar 6, 2025

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

bernardobelchior force-pushed the fix-y-axis-tick-overflow branch from e7fa935 to 1819759 Compare March 12, 2025 12:38

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

bernardobelchior force-pushed the fix-y-axis-tick-overflow branch 3 times, most recently from 68a7125 to 0747a89 Compare March 18, 2025 13:27

bernardobelchior force-pushed the fix-y-axis-tick-overflow branch from e14bb2d to 8872087 Compare March 19, 2025 15:58

bernardobelchior marked this pull request as ready for review March 21, 2025 11:06

bernardobelchior force-pushed the fix-y-axis-tick-overflow branch from 8872087 to 5b00547 Compare March 21, 2025 11:06

bernardobelchior requested review from alexfauquette and JCQuintas and removed request for alexfauquette March 21, 2025 11:06

JCQuintas approved these changes Mar 23, 2025

View reviewed changes

alexfauquette approved these changes Mar 24, 2025

View reviewed changes

bernardobelchior added 3 commits March 24, 2025 12:16

[charts] fix axis tick label overflow

971bec0

[charts] Fix y-axis tick overflow

1adcbe2

Invert text anchor if needed

c8fc66a

bernardobelchior and others added 17 commits March 24, 2025 12:16

Avoid object creation

fc24552

Hide axis label in server. Use constant for tick label gap.

18afecb

Reduce AXIS_LABEL_TICK_LABEL_GAP

dc5695a

Use clampAngle from internals.

ac9963a

Use default text placement fns

d7df143

Fix rebase

07b7d22

Fix useIsHydrated. Add visual regression test.

675b410

Fix lint and types

dc72539

Increase axis width to 50px

4264085

Fix tests

92ed9b4

Fix failing visuals

2978a16

Reduce default width to 45px

871dcb2

Fix demos

7f6ef3e

Incorporate changes from x-axis. Fix types.

5a03e7c

Extract airport data

3b8daa7

Gen JS

a626b5e

Use text-before-edge

9367f14

bernardobelchior force-pushed the fix-y-axis-tick-overflow branch from dd289df to 9367f14 Compare March 24, 2025 11:16

bernardobelchior added 2 commits March 24, 2025 12:20

Fix angle at which factors change

8b1ce4d

Fix RTL

466547a

bernardobelchior commented Mar 24, 2025

View reviewed changes

Fix demos

c69a00f

bernardobelchior force-pushed the fix-y-axis-tick-overflow branch from 1dd7314 to c69a00f Compare March 24, 2025 14:36

Fix new regression test

989c446

JCQuintas reviewed Mar 24, 2025

View reviewed changes

Reduce y-axis tick label overflow regression test width

ebce504

bernardobelchior force-pushed the fix-y-axis-tick-overflow branch from a29e07c to ebce504 Compare March 25, 2025 16:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[charts] fix y-axis tick label overflow #16846

[charts] fix y-axis tick label overflow #16846

bernardobelchior commented Mar 6, 2025 •

edited

Loading

mui-bot commented Mar 6, 2025 •

edited

Loading

codspeed-hq bot commented Mar 6, 2025 •

edited

Loading

bernardobelchior commented Mar 6, 2025

github-actions bot commented Mar 7, 2025

bernardobelchior commented Mar 18, 2025 •

edited

Loading

JCQuintas commented Mar 18, 2025

JCQuintas commented Mar 18, 2025

bernardobelchior commented Mar 18, 2025

JCQuintas commented Mar 18, 2025

bernardobelchior commented Mar 18, 2025

alexfauquette left a comment

alexfauquette Mar 24, 2025

bernardobelchior Mar 24, 2025

alexfauquette Mar 24, 2025

bernardobelchior Mar 24, 2025

bernardobelchior Mar 24, 2025

bernardobelchior Mar 24, 2025

JCQuintas Mar 24, 2025

bernardobelchior Mar 25, 2025

JCQuintas Mar 25, 2025

JCQuintas Mar 25, 2025

JCQuintas Mar 25, 2025

bernardobelchior Mar 25, 2025

		@@ -174,6 +247,15 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
		x: positionSign * (axisWidth - labelHeight),

	x: positionSign * (axisWidth - labelHeight),
	x: positionSign * axisWidth,

[charts] fix y-axis tick label overflow #16846

Are you sure you want to change the base?

[charts] fix y-axis tick label overflow #16846

Conversation

bernardobelchior commented Mar 6, 2025 • edited Loading

Changelog

mui-bot commented Mar 6, 2025 • edited Loading

codspeed-hq bot commented Mar 6, 2025 • edited Loading

Merging #16846 will not alter performance

Summary

Benchmarks breakdown

bernardobelchior commented Mar 6, 2025

github-actions bot commented Mar 7, 2025

bernardobelchior commented Mar 18, 2025 • edited Loading

JCQuintas commented Mar 18, 2025

JCQuintas commented Mar 18, 2025

bernardobelchior commented Mar 18, 2025

JCQuintas commented Mar 18, 2025

bernardobelchior commented Mar 18, 2025

alexfauquette left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bernardobelchior commented Mar 6, 2025 •

edited

Loading

mui-bot commented Mar 6, 2025 •

edited

Loading

codspeed-hq bot commented Mar 6, 2025 •

edited

Loading

bernardobelchior commented Mar 18, 2025 •

edited

Loading