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

bernardobelchior · 2025-02-24T10:18:26Z

Part of #10928.

Fix x-axis tick label overflow by applying an ellipsis for overflowing labels.

This PR does not change the algorithm for tick label visibility, so that logic should remain the same. The only difference is if those label would cause an overflow, they no longer will. This is especially noticeable for angles !== 0 and for tick labels at the extremities of charts.

Before

After

Checklist

Test multi-line labels
Test multiple anchors/baselines
Test with zoom

Screen.Recording.2025-03-04.at.09.42.23.mov
Test ellipsis with unicode characters

Changelog

Tick labels in the x-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 x-axis size by increasing its height property.
The default line-height has also been changed to 1.25, so if you aren't customizing the line height for x-axis tick labels, make sure to double check if the result is desirable.

mui-bot · 2025-02-24T10:22:48Z

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

Updated pages:

docs/data/charts/axis/axis.md

Generated by 🚫 dangerJS against 1949237

bernardobelchior · 2025-02-24T16:36:23Z

It seems the tick labels are hidden in visual tests:

The reason is simple, but also unfortunate. We're spreading the style of MUI's caption onto the tick label, which has a line-height of 1.66. By default, the X axis has a height of 25px and the tick size is by default 6px. This means that there's 19px for the tick label to take up. The default font size of the tick label is 12px, which multiplied by 1.66 is 19.92px, meaning that it's 0.92px above the limit, so the label is hidden.

Options:

Increase default axis height
Decrease default tick size
Decrease tick label line height

In my opinion, number 3 is best because a line height of 1.66 seems to big for this use case.

This is a line height of 1.25:

This is a default line height of 1.66:

Is a default line height of 1.25 acceptable?

github-actions · 2025-02-28T16:55:37Z

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

codspeed-hq · 2025-03-03T10:34:24Z

CodSpeed Performance Report

Merging #16709 will not alter performance

_{Comparing bernardobelchior:fix-axis-tick-label-overflow (1949237) with master (8d75836)}

Summary

✅ 7 untouched benchmarks

bernardobelchior · 2025-03-03T16:04:38Z

There's a small conflict with overflow + text-anchor next to the limit of the chart.

In this case (circled blue), we have 60px to the left of the X axis to render the tick label. However, the text-anchor is middle, so we must center label. Given that we only have 60px to the left, the maximum width can only be 120px for the label to remain centered. However, setting the max width to 120px creates a void between the first and second tick labels:

There are at least these two options:

Live with this limitation for now. This will only impact axes with band scale whose labels are centered and too long to display. In this case, my suggestion would be to rotate the label using the angle and this problem would be solved.
Treat the text-anchor: middle as a suggestion, and override it in this case, to be able to display more of the tick label. The consequence is that the label would seem like pointing somewhere else;
Integrate the ellipsis algorithm in the tick label visibility algorithm to more accurately define which labels to show. This would probably allow us to provide better results, at the cost of more development time.

Obviously, number 2 would be preferable, but I'm worried it might increase the scope of this PR too much since it might create more questions. One I can think of is:

if we can add an ellipsis, should we try to show all labels with an ellipsis or show as many labels without ellipsis as possible?

@alexfauquette @JCQuintas what do you think?

alexfauquette · 2025-03-04T09:34:18Z

Is a default line height of 1.25 acceptable?

Seems good

Live with this limitation for now. This will only impact axes with band scale whose labels are centered and too long to display. In this case, my suggestion would be to rotate the label using the angle and this problem would be solved.

I'm good with this solution. It's a realy nich issue

bernardobelchior · 2025-03-04T16:17:54Z

packages/x-charts/src/internals/ellipsize.ts

+  do {
+    lastLength = newLength;
+    newLength = Math.floor(text.length * by);
+
+    ellipsizedText = sliceUntil(text, newLength).trim();
+    const fits = doesTextFitInRect(ellipsizedText + ELLIPSIS, config);
+    step += 1;
+
+    if (fits) {
+      longestFittingText = ellipsizedText;
+      by += 1 / 2 ** step;
+    } else {
+      by -= 1 / 2 ** step;
+    }
+  } while (newLength !== lastLength);


The goal of this algorithm is to search for the point where text is longest and fits.

Let's say you have a string with 32 characters. The algorithm will first check if the 32 characters fit. If not, it'll check if 16 characters fit, then:

If 16 characters don't fit, it'll check if 8 characters fit

If the 16 characters fit, it will check if 24 characters fit

The idea is to split the search space in two in every iteration. The algorithm will eventually stop when it can no longer split the search space.

github-actions · 2025-03-05T13:36:00Z

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

bernardobelchior · 2025-03-05T14:47:48Z

packages/x-charts/src/internals/getGraphemeCount.ts

+
+  let count = 0;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/naming-convention,no-underscore-dangle


Need to disable all of these, otherwise CI will fail 🤣

segments is an iterator, so we need to iterate it to count. I could do Array.from() but didn't want to allocate an array just to obtain its length.

As such, the _unused var is useless, but I can't name it _ or unused because that will cause different lint errors to fire.

bernardobelchior · 2025-03-06T08:38:13Z

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

+
+  const tickLabels = isClient
+    ? shortenLabels(visibleLabels, drawingArea, tickLabelsMaxHeight, axisTickLabelProps.style)
+    : new Map();


Not sure if we should no labels or all labels when server-side rendering.

All labels would make more sense for the cases when there's no overlap, but they wouldn't look good for cases with an overlap 🤔

All labels would make more sense for the cases when there's no overlap

I agree on this one, especially if devs don't care at all about SSR, they might use the responsive charts wich do not render on server because they don't have access to their height/width. And if they care, they can filter values by themself to remove overflow

This reverts commit 6bd18f2.

bernardobelchior · 2025-03-11T13:59:45Z

There's this hydration issue that's causing the axis labels to be incorrectly positioned.

For some reason, Next isn't updating the y value of the labels after hydrating:

Screen.Recording.2025-03-11.at.14.58.36.mov

bernardobelchior · 2025-03-11T14:43:04Z

There's this hydration issue that's causing the axis labels to be incorrectly positioned.

For some reason, Next isn't updating the y value of the labels after hydrating:

Screen.Recording.2025-03-11.at.14.58.36.mov

I have this fix, but I'm not too happy about it because we're applying a transform that might not make sense to apply if the user is customizing the component. @alexfauquette @JCQuintas do you see any other option?

JCQuintas · 2025-03-11T14:51:33Z

There's this hydration issue that's causing the axis labels to be incorrectly positioned.
For some reason, Next isn't updating the y value of the labels after hydrating:
Screen.Recording.2025-03-11.at.14.58.36.mov

I have this fix, but I'm not too happy about it because we're applying a transform that might not make sense to apply if the user is customizing the component. @alexfauquette @JCQuintas do you see any other option?

Is this happening because getStringSize(label, axisLabelProps.style).height can't detect the correct height?

bernardobelchior · 2025-03-11T14:52:59Z

There's this hydration issue that's causing the axis labels to be incorrectly positioned.
For some reason, Next isn't updating the y value of the labels after hydrating:
Screen.Recording.2025-03-11.at.14.58.36.mov

I have this fix, but I'm not too happy about it because we're applying a transform that might not make sense to apply if the user is customizing the component. @alexfauquette @JCQuintas do you see any other option?

Is this happening because getStringSize(label, axisLabelProps.style).height can't detect the correct height?

Yes. getStringSize returns { width: 0, height: 0 } on the server. Even if we use an heuristic for calculating the string size, there's always the possibility hydration mismatches.

JCQuintas · 2025-03-11T15:11:59Z

There's this hydration issue that's causing the axis labels to be incorrectly positioned.
For some reason, Next isn't updating the y value of the labels after hydrating:
Screen.Recording.2025-03-11.at.14.58.36.mov

I have this fix, but I'm not too happy about it because we're applying a transform that might not make sense to apply if the user is customizing the component. @alexfauquette @JCQuintas do you see any other option?

Is this happening because getStringSize(label, axisLabelProps.style).height can't detect the correct height?

Yes. getStringSize returns { width: 0, height: 0 } on the server. Even if we use an heuristic for calculating the string size, there's always the possibility hydration mismatches.

Would changing the anchor solve the issue, instead of calculating the line height?

bernardobelchior · 2025-03-11T15:18:11Z

There's this hydration issue that's causing the axis labels to be incorrectly positioned.
For some reason, Next isn't updating the y value of the labels after hydrating:
Screen.Recording.2025-03-11.at.14.58.36.mov

I have this fix, but I'm not too happy about it because we're applying a transform that might not make sense to apply if the user is customizing the component. @alexfauquette @JCQuintas do you see any other option?

Is this happening because getStringSize(label, axisLabelProps.style).height can't detect the correct height?

Yes. getStringSize returns { width: 0, height: 0 } on the server. Even if we use an heuristic for calculating the string size, there's always the possibility hydration mismatches.

Would changing the anchor solve the issue, instead of calculating the line height?

Yeah, it could work, but how would you go about it?

I tried changing the dominant-baseline and transform-origin, but they didn't seem to work. Not sure if I did something wrong.

JCQuintas · 2025-03-11T16:05:33Z

Yeah, it could work, but how would you go about it?

I tried changing the dominant-baseline and transform-origin, but they didn't seem to work. Not sure if I did something wrong.

It seems you can try to get funky with dominantBaseline: position === 'bottom' ? 'text-after-edge' : 'text-before-edge' instead of the boring old position === 'bottom' ? 'hanging' : 'auto'

hanging -> top of text
ideographic -> bottom of text
text-after-edge -> magic stuff, long boring documentation, mostly translates to "the baseline is the top of the text-area"
text-before-edge -> "baseline is the bottom of the text area"

JCQuintas · 2025-03-11T16:11:07Z

It seems you can try to get funky with dominantBaseline: position === 'bottom' ? 'text-after-edge' : 'text-before-edge' instead of the boring old position === 'bottom' ? 'hanging' : 'auto'

Disclaimer, test on different browsers, not sure how they will react to this 😆

alexfauquette · 2025-03-12T08:27:46Z

@bernardobelchior I pushed the fix from JC suggestion.

alexfauquette · 2025-03-12T08:28:57Z

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

+  const isClient = useIsClient();
+
  const wordsByLines = React.useMemo(
-    () => getWordsByLines({ style, needsComputation: text.includes('\n'), text }),
-    [style, text],
+    () => getWordsByLines({ style, needsComputation: isClient && text.includes('\n'), text }),
+    [style, text, isClient],
  );


I noticed similar hydration issues when using \n in axes labels. SO I added this fix that ignore the size computation during the hydration phase

By the way, technically isClient is not correct, because the hydration is on the client. It's more isHydrationDone

By the way, technically isClient is not correct, because the hydration is on the client. It's more isHydrationDone

I'll rename it in a follow-up.

Done: #16937

alexfauquette · 2025-03-12T08:31:56Z

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

  );

  let startDy: number;
  switch (dominantBaseline) {
    case 'hanging':
+    case 'text-before-edge':


I adde dthis one and the text-after-edge because it gives better result.

Makes me realise the hanging and auto are not 100% correctly computed but nobody complained about it

bernardobelchior · 2025-03-12T09:30:00Z

It seems you can try to get funky with dominantBaseline: position === 'bottom' ? 'text-after-edge' : 'text-before-edge' instead of the boring old position === 'bottom' ? 'hanging' : 'auto'

Disclaimer, test on different browsers, not sure how they will react to this 😆

I found a solution that works for almost all browsers, but unfortunately it doesn't work on Safari <= 18.3 (i.e,. in Safari, it only works in the current beta, which is 18.4).

The problem is that the line-height unit (lh) doesn't seem to work on Safari <= 18.3 when using it as part of an SVG attribute, e.g., <tspan dy="1lh" />.

Here's an example CodeSandbox.

Screen.Recording.2025-03-12.at.10.27.46.mov

bernardobelchior · 2025-03-12T11:51:00Z

@bernardobelchior I pushed the fix from JC suggestion.

Thank you!

bernardobelchior added the component: charts This is the name of the generic UI component, not the React module! label Feb 24, 2025

bernardobelchior force-pushed the fix-axis-tick-label-overflow branch from 8e61dfe to 961878d Compare February 24, 2025 15:51

bernardobelchior force-pushed the fix-axis-tick-label-overflow branch from 2b2dc4c to acd8b68 Compare February 25, 2025 08:36

bernardobelchior mentioned this pull request Feb 25, 2025

[charts] Render axis title within axis size #16730

Merged

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

bernardobelchior force-pushed the fix-axis-tick-label-overflow branch from a1d7350 to ba2165a Compare March 3, 2025 08:04

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

bernardobelchior force-pushed the fix-axis-tick-label-overflow branch from 7c0b2c2 to 87d9dfe Compare March 3, 2025 11:04

bernardobelchior force-pushed the fix-axis-tick-label-overflow branch 3 times, most recently from 885c737 to 3472b18 Compare March 4, 2025 08:09

This was referenced Mar 4, 2025

[charts] XAxis: Add defaults for textAnchor and dominantBaseline based on angle #16817

Merged

[charts] Allow tickLabelPlacement='middle' in continuous scales #16803

Open

bernardobelchior force-pushed the fix-axis-tick-label-overflow branch from 83dc895 to da69e85 Compare March 4, 2025 13:53

bernardobelchior commented Mar 4, 2025

View reviewed changes

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

bernardobelchior force-pushed the fix-axis-tick-label-overflow branch from 9eed1a4 to d276110 Compare March 5, 2025 13:38

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

bernardobelchior force-pushed the fix-axis-tick-label-overflow branch 2 times, most recently from f24a704 to dcb8a3f Compare March 5, 2025 14:45

bernardobelchior commented Mar 5, 2025

View reviewed changes

bernardobelchior force-pushed the fix-axis-tick-label-overflow branch from 9d09700 to 3aefeeb Compare March 5, 2025 16:50

bernardobelchior commented Mar 6, 2025

View reviewed changes

bernardobelchior added 11 commits March 11, 2025 14:59

Avoid object creation

f7a3224

Fix demos

986a9a2

Fix demos' margins

01dfa94

Fix margins in more demos

e3d5bd1

Update docs

6b6c56d

Fix final demo

eb59e6d

Add docs on first/last tick label overflow

8b6223f

Address PR feedback

633f315

Render axis and tick labels in SSR

9386525

Fix hydration issue

cc99f53

Revert "Fix hydration issue"

1d4d31b

This reverts commit 6bd18f2.

bernardobelchior force-pushed the fix-axis-tick-label-overflow branch from 8cc3c1c to 1d4d31b Compare March 11, 2025 13:59

fix

1949237

alexfauquette approved these changes Mar 12, 2025

View reviewed changes

bernardobelchior mentioned this pull request Mar 12, 2025

[charts] fix axis label hydration issues #16930

Draft

JCQuintas approved these changes Mar 12, 2025

View reviewed changes

bernardobelchior merged commit cb56bfd into mui:master Mar 12, 2025
19 checks passed

bernardobelchior mentioned this pull request Mar 12, 2025

[charts] Rename useIsClient #16937

Open

1 task

bernardobelchior deleted the fix-axis-tick-label-overflow branch March 12, 2025 12:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

bernardobelchior commented Feb 24, 2025 •

edited

Loading

mui-bot commented Feb 24, 2025 •

edited

Loading

bernardobelchior commented Feb 24, 2025

github-actions bot commented Feb 28, 2025

codspeed-hq bot commented Mar 3, 2025 •

edited

Loading

bernardobelchior commented Mar 3, 2025

alexfauquette commented Mar 4, 2025

bernardobelchior Mar 4, 2025

github-actions bot commented Mar 5, 2025

bernardobelchior Mar 5, 2025

bernardobelchior Mar 6, 2025

alexfauquette Mar 10, 2025

bernardobelchior commented Mar 11, 2025

bernardobelchior commented Mar 11, 2025

JCQuintas commented Mar 11, 2025

bernardobelchior commented Mar 11, 2025

JCQuintas commented Mar 11, 2025

bernardobelchior commented Mar 11, 2025

JCQuintas commented Mar 11, 2025 •

edited

Loading

JCQuintas commented Mar 11, 2025

alexfauquette commented Mar 12, 2025

alexfauquette Mar 12, 2025

alexfauquette Mar 12, 2025

bernardobelchior Mar 12, 2025

bernardobelchior Mar 12, 2025

alexfauquette Mar 12, 2025

bernardobelchior commented Mar 12, 2025

bernardobelchior commented Mar 12, 2025


		let count = 0;

		// eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/naming-convention,no-underscore-dangle

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

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

Conversation

bernardobelchior commented Feb 24, 2025 • edited Loading

Before

After

Checklist

Changelog

mui-bot commented Feb 24, 2025 • edited Loading

bernardobelchior commented Feb 24, 2025

github-actions bot commented Feb 28, 2025

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

Merging #16709 will not alter performance

Summary

bernardobelchior commented Mar 3, 2025

alexfauquette commented Mar 4, 2025

Choose a reason for hiding this comment

github-actions bot commented Mar 5, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bernardobelchior commented Mar 11, 2025

bernardobelchior commented Mar 11, 2025

JCQuintas commented Mar 11, 2025

bernardobelchior commented Mar 11, 2025

JCQuintas commented Mar 11, 2025

bernardobelchior commented Mar 11, 2025

JCQuintas commented Mar 11, 2025 • edited Loading

JCQuintas commented Mar 11, 2025

alexfauquette commented Mar 12, 2025

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 12, 2025

bernardobelchior commented Mar 12, 2025

bernardobelchior commented Feb 24, 2025 •

edited

Loading

mui-bot commented Feb 24, 2025 •

edited

Loading

codspeed-hq bot commented Mar 3, 2025 •

edited

Loading

JCQuintas commented Mar 11, 2025 •

edited

Loading