[charts] Add prop for positioning a bar label #20194

Sigdriv · 2025-11-04T14:20:44Z

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2025-11-04T14:22:59Z

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

Updated pages:

docs/data/charts/bars/bars.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	🔺+934B^(+0.28%)	🔺+332B^(+0.33%)
@mui/x-charts-pro	🔺+934B^(+0.21%)	🔺+320B^(+0.24%)
@mui/x-charts-premium	🔺+934B^(+0.21%)	🔺+315B^(+0.24%)
@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 d4e7419

bernardobelchior · 2025-11-04T15:48:51Z

Thanks for your contribution, @Sigdriv! We're currently evaluating whether it makes sense for barLabel to be defined at the chart or at the series level. That decision will probably affect this PR as well, so we might be slower to approve to avoid adding a prop that will be immediately deprecated.

Nevertheless, I think we can already review this PR and deal with that change if needed.

bernardobelchior

@Sigdriv what's the intended behavior when rendering negative bars?

Here's how it looks like now:

I'm wondering if the label should be shown below the bar when the bar is negative. What do you think?

packages/x-charts/src/BarChart/BarLabel/BarLabel.tsx

docs/data/charts/bars/BarLabelAbove.tsx

codspeed-hq · 2025-11-04T16:02:56Z

CodSpeed Performance Report

Merging #20194 will not alter performance

_{Comparing Sigdriv:feat/barLabelPlacement (8c51094) with master (1938a4a)¹}

Summary

✅ 13 untouched

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

bernardobelchior · 2025-11-04T16:03:21Z

It doesn't seem to be working on an horizontal layout:

Sigdriv · 2025-11-04T17:15:54Z

@Sigdriv what's the intended behavior when rendering negative bars?

Here's how it looks like now:
I'm wondering if the label should be shown below the bar when the bar is negative. What do you think?

Hmm, that's a good question. I think it will look great if we put it down below the bar, but I don't know how we should handle it if the bar is on the axis like in the picture below (see the bar with value -4):

Sigdriv · 2025-11-04T17:27:59Z

@bernardobelchior One thing that I haven't thought about is how we should handle the "stacking" functionality with this. The way it's now it will be at the top of the bar, which is not looking good.

Do you have any input on how we can solve this?

Sigdriv · 2025-11-04T19:48:36Z

It doesn't seem to be working on an horizontal layout:

I looked into this but I don't know how we should do it. If we do it like this I'm afraid that the label will be clipped if the value is to high like 1000

prakhargupta1 · 2025-11-05T04:36:04Z

@bernardobelchior One thing that I haven't thought about is how we should handle the "stacking" functionality with this. The way it's now it will be at the top of the bar, which is not looking good.

Do you have any input on how we can solve this?

Just to keep in mind that in future we may have to support showing total at the top of the stacked bar as requested in #19458.

github-actions · 2025-11-05T11:26:23Z

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

bernardobelchior · 2025-11-05T12:10:20Z

Hmm, that's a good question. I think it will look great if we put it down below the bar, but I don't know how we should handle it if the bar is on the axis like in the picture below (see the bar with value -4):

That's an edge case that'll likely also happen if we have an axis on top, so it doesn't happen only in negative bars.

I think we can live with that edge case. There are multiple ways to solve it: use the barLabel to hide the label if it's too close to the limit, decrease the chart's min so that the negative isn't touching the x-axis. We can also consider (as a follow-up) making barLabelPlacement a function that receives information such as value and dataIndex so placement can vary depending on these values.

@bernardobelchior One thing that I haven't thought about is how we should handle the "stacking" functionality with this. The way it's now it will be at the top of the bar, which is not looking good.

Do you have any input on how we can solve this?

That's what happens currently when the bar label is centered, so I think this is a bit out of scope for this PR.

One thing I'm thinking of is that we could add stacking information to the barLabel context. That would allow users to customize this behavior as they please.

I looked into this but I don't know how we should do it. If we do it like this I'm afraid that the label will be clipped if the value is to high like 1000

I think this is a valid solution for now. We can always improve on it later if there are many requests.

We can also consider adding a slot for BarLabelItem so that users can customize the behavior as they please. With a slot they would be able to implement custom truncating behavior if that's something useful to them. We can tackle the slot as a follow-up as well.

packages/x-charts/src/models/seriesType/bar.ts

bernardobelchior

There seems to be an issue with this visual regression test.

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

packages/x-charts/src/BarChart/BarLabel/BarLabel.tsx

Sigdriv · 2025-11-10T14:19:48Z

I suspect it's related to the changes made to ChartsClipPath. If you revert the changes, does the issue still happen?

I have reverted the changes to the ChartsClipPath and it fixed the issue with the other bar. But now we have the clipping again.

bernardobelchior · 2025-11-10T16:22:16Z

packages/x-charts/src/hooks/animation/useAnimateBarLabel.ts

+    const shouldPlaceBelow = props.y > props.yOrigin;
+    const shouldPlaceAbove = props.y < props.yOrigin;


@Sigdriv based the implementation on the x/y coordinates instead of the bar's value.

The benefits of this approach are that it handles axis reversion gracefully and that we don't need useAnimateBarLabel to depend on value, so there's no breaking change.

The prior implementation looked like this:

Notice that in the layout: vertical, reverse: true case, the -1 and -4 values are rendering below the bar when should be rendering above.

The new implementation fixes the issue:

bernardobelchior · 2025-11-10T16:32:18Z

@Sigdriv I really wanted to thank you for this work 🙏

I've done one change that I explained here. Also added a regression test to ensure we cover all these cases.

We'll just another review and I think it's good to go.

Amazing work 🎉

bernardobelchior · 2025-11-10T16:36:00Z

I have reverted the changes to the ChartsClipPath and it fixed the issue with the other bar. But now we have the clipping again.

Yes, that's expected. Does this affect your use case?

I see several ways to fix it, but I think we should do it as a follow-up:

Move BarLabelPlot outside the clip path (we'd need to check if it doesn't cause any breaking changes)
a. Optionally, we can also add an option to clip the labels or not
Encourage composition and render BarLabelPlot outside the clip path
Implement some logic to avoid the labels being rendered outside the drawing area, which why they're being clipped. This is harder because we'd need to measure the size of the label to know what offset to apply.

bernardobelchior · 2025-11-10T17:49:55Z

packages/x-charts/src/BarChart/useBarPlotData.ts

+  const minValueCoord = Math.min(...valueCoordinates);
+  const maxValueCoord = Math.max(...valueCoordinates);


I was able to trace this change back to this PR. Still need to check what implications this might have, but it's creating issues because we aren't rounded the origin coordinates, making it impossible to compare to the x/y coordinates.

If we still need to round these values, we can do so when rendering instead of doing it here.

Reverted because it caused gaps between bars: https://app.argos-ci.com/mui/mui-x/builds/43580/218980533

Opted for rounding the origin instead.

bernardobelchior · 2025-11-11T10:11:32Z

@Sigdriv created this issue to track the bar label clipping issue

JCQuintas

Nice works, there is still a small bug, also left some documentation suggestions

JCQuintas · 2025-11-11T10:39:30Z

docs/data/charts/bars/bars.md

+
+:::info
+When using `outside` placement, if the label does not fit in the chart area, it will be clipped.
+To avoid this, you can decrease/increase the min/max respectively so that there's enough space for the labels.


Which min/max is this?

Let me know if it's clearer now

packages/x-charts/src/BarChart/BarLabel/BarLabel.tsx

packages/x-charts/src/BarChart/BarLabel/BarLabelItem.tsx

test/regressions/charts/BarLabelPlacement.tsx

bernardobelchior · 2025-11-11T14:54:35Z

Once again, thank you @Sigdriv for the initiative 🙏

This reverts commit 28f7e77.

Sigdriv requested review from JCQuintas, alexfauquette, bernardobelchior and prakhargupta1 as code owners November 4, 2025 14:20

Sigdriv force-pushed the feat/barLabelPlacement branch from 8fb20bc to 7fda73e Compare November 4, 2025 15:08

bernardobelchior changed the title ~~[charts] Add prop for position of barLabel on BarCharts~~ [charts] Add prop for positioning a bar label Nov 4, 2025

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

bernardobelchior reviewed Nov 4, 2025

View reviewed changes

packages/x-charts/src/BarChart/BarLabel/BarLabel.tsx Outdated Show resolved Hide resolved

bernardobelchior reviewed Nov 4, 2025

View reviewed changes

docs/data/charts/bars/BarLabelAbove.tsx Outdated Show resolved Hide resolved

Sigdriv force-pushed the feat/barLabelPlacement branch from 7fda73e to 6f189e1 Compare November 4, 2025 19:58

Sigdriv requested a review from bernardobelchior November 4, 2025 19:59

Sigdriv force-pushed the feat/barLabelPlacement branch from a00a9d5 to 2198677 Compare November 4, 2025 20:21

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

Sigdriv force-pushed the feat/barLabelPlacement branch from 2198677 to 2659553 Compare November 5, 2025 19:13

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

Sigdriv force-pushed the feat/barLabelPlacement branch from e0d3e86 to 4dcdeff Compare November 6, 2025 07:43

bernardobelchior reviewed Nov 6, 2025

View reviewed changes

packages/x-charts/src/models/seriesType/bar.ts Outdated Show resolved Hide resolved

bernardobelchior reviewed Nov 6, 2025

View reviewed changes

packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx Outdated Show resolved Hide resolved

packages/x-charts/src/BarChart/BarLabel/BarLabel.tsx Outdated Show resolved Hide resolved

Sigdriv force-pushed the feat/barLabelPlacement branch from 4dcdeff to cb54ae7 Compare November 6, 2025 19:40

Sigdriv added 3 commits November 10, 2025 15:16

Revert ChartsClipPath changes

42d4b0d

pnpm commands

0214302

Rename barLabelPlacement to placement in useAnimateBarLabel

eabad03

Sigdriv force-pushed the feat/barLabelPlacement branch from 1ea9806 to eabad03 Compare November 10, 2025 14:18

Base implementation on x/y coordinates instead of bar value

b99a989

bernardobelchior reviewed Nov 10, 2025

View reviewed changes

Gen static

1ee6046

Fix bar values being rounded. Fix issue with demo.

af67c7a

bernardobelchior reviewed Nov 10, 2025

View reviewed changes

bernardobelchior added 2 commits November 10, 2025 17:51

Gen files

c80f0b3

Revert rounding removal. Round origin points as well.

fc920dd

bernardobelchior mentioned this pull request Nov 11, 2025

[charts] Handle bar label clipping when placement isn't 'center' #20280

Open

JCQuintas requested changes Nov 11, 2025

View reviewed changes

bernardobelchior added 3 commits November 11, 2025 11:48

Update text anchor and baseline depending on position.

02a5cbd

Address feedback

fbbf0d2

Fix lint

54ef4ca

JCQuintas approved these changes Nov 11, 2025

View reviewed changes

Merge branch 'master' into feat/barLabelPlacement

d4e7419

bernardobelchior merged commit 28f7e77 into mui:master Nov 11, 2025
20 of 21 checks passed

Sigdriv deleted the feat/barLabelPlacement branch November 12, 2025 11:11

bernardobelchior mentioned this pull request Nov 17, 2025

[charts] Add an option to put bar label on top of the bar #12975

Closed

bernardobelchior added a commit to bernardobelchior/mui-x that referenced this pull request Nov 19, 2025

Revert "[charts] Add prop for positioning a bar label (mui#20194)"

b630c28

This reverts commit 28f7e77.

bernardobelchior added a commit to bernardobelchior/mui-x that referenced this pull request Nov 19, 2025

Revert "[charts] Add prop for positioning a bar label (mui#20194)"

5c82113

This reverts commit 28f7e77.

bernardobelchior added a commit to bernardobelchior/mui-x that referenced this pull request Nov 19, 2025

Revert "[charts] Add prop for positioning a bar label (mui#20194)"

2d0c756

This reverts commit 28f7e77.

bernardobelchior added a commit to bernardobelchior/mui-x that referenced this pull request Nov 19, 2025

Revert "[charts] Add prop for positioning a bar label (mui#20194)"

e0e18c1

This reverts commit 28f7e77.

		const shouldPlaceBelow = props.y > props.yOrigin;
		const shouldPlaceAbove = props.y < props.yOrigin;

		const minValueCoord = Math.min(...valueCoordinates);
		const maxValueCoord = Math.max(...valueCoordinates);

Uh oh!

[charts] Add prop for positioning a bar label #20194

[charts] Add prop for positioning a bar label #20194

Uh oh!

Conversation

Sigdriv commented Nov 4, 2025

Uh oh!

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

Uh oh!

Bundle size report

Uh oh!

bernardobelchior commented Nov 4, 2025

Uh oh!

bernardobelchior left a comment • 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!

Uh oh!

Uh oh!

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

Uh oh!

CodSpeed Performance Report

Merging #20194 will not alter performance

Summary

Footnotes

Uh oh!

bernardobelchior commented Nov 4, 2025

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Sigdriv commented Nov 4, 2025

Uh oh!

prakhargupta1 commented Nov 5, 2025

Uh oh!

github-actions bot commented Nov 5, 2025

Uh oh!

bernardobelchior commented Nov 5, 2025

Uh oh!

Uh oh!

bernardobelchior left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Sigdriv commented Nov 10, 2025

Uh oh!

bernardobelchior Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

Sigdriv Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

bernardobelchior commented Nov 10, 2025

Uh oh!

bernardobelchior commented Nov 10, 2025

Uh oh!

bernardobelchior Nov 10, 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!

bernardobelchior Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

bernardobelchior commented Nov 11, 2025

Uh oh!

JCQuintas left a comment

Choose a reason for hiding this comment

Uh oh!

JCQuintas Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

bernardobelchior Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mui-bot commented Nov 4, 2025 •

edited

Loading

bernardobelchior left a comment •

edited

Loading

codspeed-hq bot commented Nov 4, 2025 •

edited

Loading

Sigdriv commented Nov 4, 2025 •

edited

Loading

Sigdriv commented Nov 4, 2025 •

edited

Loading

bernardobelchior Nov 10, 2025 •

edited

Loading