[charts] Add bar batch renderer #20457

bernardobelchior · 2025-11-26T11:56:21Z

Part of #12960.

Here's a PR where bar charts default to the batch renderer so you can test it and check Argos.

Differences from the individual bar plot:

When the border radius is greater than half the bar's width or height, the batch plot handles it differently:

Before/After

Before

After

CSS styling of single bars is no longer possible. For this reason, when onItemClick is set, cursor: pointer is not applied to bars.
Transparent highlight style: for performance reasons, the highlighted state creates a highlighted bar on top of the original bar. Applying transparency to the highlighted bar can cause the original bar to be partially visible.
No animation when highlighting or fading bars.

mui-bot · 2025-11-26T11:57:47Z

Deploy preview: https://deploy-preview-20457--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	🔺+7.08KB^(+2.04%)	🔺+2.24KB^(+2.17%)
@mui/x-charts-pro	🔺+6.95KB^(+1.54%)	🔺+2.05KB^(+1.50%)
@mui/x-charts-premium	🔺+6.96KB^(+1.55%)	🔺+2.13KB^(+1.58%)
@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 b94d8bc

codspeed-hq · 2025-11-26T12:06:57Z

CodSpeed Performance Report

Merging #20457 will not alter performance

_{Comparing bernardobelchior:batch-bar-plot (b94d8bc) with master (dcbbc64)¹}

Summary

✅ 14 untouched

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

github-actions · 2025-11-27T10:40:26Z

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

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

github-actions · 2025-12-01T15:56:19Z

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

github-actions · 2025-12-04T11:57:40Z

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

github-actions · 2025-12-04T14:32:23Z

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

JCQuintas

Works nicely, gj on the tooltip/highlight as well 👍

I've left some comments on possible improvements

docs/data/charts/bars/BarBatchRenderer.tsx

docs/data/charts/bars/bars.md

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

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

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

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

JCQuintas · 2025-12-09T11:29:24Z

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

+import { getBarItemAtPosition } from './getBarItemAtPosition';
+import { useStore } from '../internals/store/useStore';
+
+export function useInteractionItemProps() {


Should we use this and useOnItemClick on the default bar renderer as well?

It feels like it could be useful if we render stuff on top of charts, or if using things like canvas

It feels like it could be useful if we render stuff on top of charts

Well, if we want to render stuff on top of charts and don't want them to influence the clicks, we should add pointer-events: none to that stuff. I think it would be weird to hijack clicks from elements that would normally receive them.

It's unfortunate we need to maintain two code paths, but I suppose that's the price to pay for better performance.

Is the performance much better?

I don't think we have another option. If we want to implement a batch bar plot like the one in this PR, we can't use onClick event to detect clicks, so the only way is to calculate the clicked bar like we do in this PR.

Oh, I don't mean that.

I meant to say that we should maybe use the way it is calculated in this PR (based on pointer only) everywhere

We could, but it would be a breaking change because the event source would have changed.

It also changes event handling slightly, which might break stuff that users are relying on.

I guess this is something that we'd need to investigate deeper

prakhargupta1 · 2025-12-10T11:41:03Z

In the demo, zooming in throws this runtime error, I guess a rebase will fix it?

…r of bars

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

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

bernardobelchior force-pushed the batch-bar-plot branch from 1d51405 to a152903 Compare November 27, 2025 10:41

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

bernardobelchior force-pushed the batch-bar-plot branch from d6e2d12 to e6c01d8 Compare November 27, 2025 17:13

bernardobelchior commented Nov 28, 2025

View reviewed changes

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

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

bernardobelchior force-pushed the batch-bar-plot branch from 856ae32 to f8701da Compare December 3, 2025 11:10

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged. and removed PR: out-of-date The pull request has merge conflicts and can't be merged. labels Dec 3, 2025

bernardobelchior force-pushed the batch-bar-plot branch from f8701da to ae86542 Compare December 4, 2025 12:04

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

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

bernardobelchior force-pushed the batch-bar-plot branch from ae86542 to 185ca1f Compare December 4, 2025 16:02

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

bernardobelchior force-pushed the batch-bar-plot branch from 67f4390 to 85e75cb Compare December 9, 2025 09:22

bernardobelchior marked this pull request as ready for review December 9, 2025 09:29

bernardobelchior requested review from a team and prakhargupta1 as code owners December 9, 2025 09:29

bernardobelchior requested review from JCQuintas and alexfauquette December 9, 2025 09:29

JCQuintas reviewed Dec 9, 2025

View reviewed changes

bernardobelchior added 28 commits December 19, 2025 15:09

Remove animation from highlight/fade

aaa80b2

Fix type imports

2d452fc

Fix pointer leave

42d957c

Rename

f65036a

Add brightness filter to highlighted item

92c7b0b

Revert demos

2b069fa

Fix types

66e1cd6

Fix rebase

f203c4a

Address feedback

cf54848

Use ordinal time ticks

f2c871b

Gen stuff

c1ca1e6

Use stroke and stroke-width to fix sub-pixel rendering in large numbe…

48f9919

…r of bars

Fix highlight when zooming (still inefficient)

27841d9

Revert changes to findClosestPoint

cbac66e

Address PR feedback

0ee3bfb

Handle sub-pixel rendering issues

0c08ac4

Convert getBarItemAtPosition to selector

5759df6

Set cursor: pointer when hovering a bar

38ca19e

Revert stroke on bars. Allow the user to select renderer in docs.

688a64f

Fix static

0f461a4

Use CSS animations

81e9bc9

Ignore gap ratio depending on gap size

f92d1aa

Fix animation while zooming

935188e

Fix rounding issues with click event

5f29ff8

Register event handlers on the svg element

59c304e

Update docs

9020425

Replace useSelector with store.use()

8e2b105

Fix skip animation

8cd7e48

bernardobelchior force-pushed the batch-bar-plot branch from cd32216 to 8cd7e48 Compare December 19, 2025 14:09

Fix onItemClick type

b94d8bc

Uh oh!

[charts] Add bar batch renderer #20457

Are you sure you want to change the base?

[charts] Add bar batch renderer #20457

Conversation

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

Uh oh!

Uh oh!

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

Uh oh!

Bundle size report

Uh oh!

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

Uh oh!

CodSpeed Performance Report

Merging #20457 will not alter performance

Summary

Footnotes

Uh oh!

github-actions bot commented Nov 27, 2025

Uh oh!

Uh oh!

github-actions bot commented Dec 1, 2025

Uh oh!

github-actions bot commented Dec 4, 2025

Uh oh!

github-actions bot commented Dec 4, 2025

Uh oh!

JCQuintas 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JCQuintas Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

bernardobelchior Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

JCQuintas Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

bernardobelchior Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

JCQuintas Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

bernardobelchior Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

prakhargupta1 commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

bernardobelchior commented Nov 26, 2025 •

edited

Loading

mui-bot commented Nov 26, 2025 •

edited

Loading

codspeed-hq bot commented Nov 26, 2025 •

edited

Loading

JCQuintas left a comment •

edited

Loading

prakhargupta1 commented Dec 10, 2025 •

edited

Loading