[charts] Add `VisibilityManager` logic to allow managing series/items #20571

JCQuintas · 2025-12-05T12:05:11Z

Split from #20404

Code is the same, but removed the implementation part to decrease complexity.

This should be ready to review/merge as the plugin is not hooked into anything.

Docs on:
https://deploy-preview-20404--material-ui-x.netlify.app/x/react-charts/legend/#toggle-visibility

mui-bot · 2025-12-05T12:07:21Z

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

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	🔺+2.69KB^(+0.79%)	🔺+776B^(+0.76%)
@mui/x-charts-pro	🔺+2.69KB^(+0.60%)	🔺+903B^(+0.67%)
@mui/x-charts-premium	🔺+1.68KB^(+0.38%)	🔺+509B^(+0.38%)
@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 7fde6c4

codspeed-hq · 2025-12-05T12:17:33Z

CodSpeed Performance Report

Merging #20571 will not alter performance

_{Comparing JCQuintas:visibility-manager-code (7fde6c4) with master (882da2c)¹}

Summary

✅ 13 untouched

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

alexfauquette · 2025-12-05T13:00:37Z

packages/x-charts/src/BarChart/seriesConfig/bar/seriesProcessor.ts

+    // We sort the keys based on the original stacking order to ensure consistency
+    const idOrder = stackedData.sort((a, b) => a.index - b.index).map((s) => s.key);


Not sure about why this is needed. For me D3 takes care of the ordering with stackingOrder

We have to use the exact same order as stackedData.

IIRC the issue was that some ordering functions change the order based on value, so if we have value 0 for a hidden series it would be ordered first/last in the stack.

alexfauquette · 2025-12-05T13:02:22Z

packages/x-charts/src/BarChart/seriesConfig/bar/seriesProcessor.ts

+        const keyIndex = keys.indexOf(key);
+        const seriesId = ids[keyIndex];
+
+        if (!isIdentifierVisible?.(`${seriesId}`)) {


I assunme the `${seriesId}` is here to be sure seriesId are string

yeah, I could move it into the isIdentifierVisible though

alexfauquette · 2025-12-05T13:05:26Z

packages/x-charts/src/BarChart/seriesConfig/bar/seriesProcessor.ts

+        }
+        return d[key] ?? 0;
+      })
+      .offset(stackingOffset)(d3Dataset);


I would assume the stackingOrder is needed for the visible stack and not for the one with all series.

Mentioned above

alexfauquette · 2025-12-05T13:15:34Z

packages/x-charts/src/BarChart/seriesConfig/bar/seriesProcessor.ts

+    // Post-process visibleStackedData to fix positions for hidden series
+    // Hidden series should collapse to the cumulative position of visible series before them


I'm unsure about this part.

On one side, the animations it creates look nice. On the other one, it looks like something that should be the responsability of the animation, not the data processing.

Hum, I think I can achieve the same by tweaking the animation logic. Let me try

These are the necessary changes: 114188a
seems reasonable @bernardobelchior wdyt?

Its missing line chart adjustments that needs to be made, but it works nicely for barchart, animations are the same

My only remaining concern would be performances, because we render all the items even the one that ends up being hidden.

But I assume this could be simply solved by something like "if animation is disabled, useBarPlotData filter out hidden series"

alexfauquette · 2025-12-05T13:26:46Z

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

+  const visibleValues = series.visibleStackedData[dataIndex];
+  const visibleValueCoordinates = visibleValues.map((v) =>


Nit pick: you don't need to rename values by visibleValues in the rendering part since every thing here is based on the visible stuff

alexfauquette · 2025-12-05T13:30:53Z

...charts/src/internals/plugins/featurePlugins/useChartVisibilityManager/isIdentifierVisible.ts

+
+export const VISIBILITY_SEPARATOR = '-';
+
+export const buildIdentifier = (ids: string | (string | number)[]) => {


Should we be more explicit in types like that?

Suggested change

export const buildIdentifier = (ids: string | (string | number)[]) => {

export const buildIdentifier = (ids: SeriesId | [SeriesId, ItemId]) => {

I don't think so, we maybe need to add number as in ids: string | number | (string | number)[], but in general my idea was that this could eventually also be used by things like sankey, which doesn't use seriesId

alexfauquette · 2025-12-05T13:32:47Z

...nals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.selectors.ts

+  selectorVisibilityMap,
+  (visibilityMap) => {
+    return {
+      // Return an object as selectors don't correctly memoize direct functions


If it's the case, then we have an issue with highlight selectors 😮

alexfauquette · 2025-12-05T13:35:06Z

.../src/internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.ts

+  store,
+  params,
+}) => {
+  // Manage controlled state


Ther eis an helper for th ewarning messages

useAssertModelConsistencyOutsideOfProduction

alexfauquette · 2025-12-05T13:48:02Z

...nternals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.types.ts

+   * Function to check if an item is visible based on its identifier.
+   * @param {string | (string | number)[]} identifier The identifier of the item.
+   * @returns {boolean} Whether the item is visible.


The "identifier" naming is a bit confusing because it conflicts with the identifiers used in highlight and tooltip.

The array signatures looks surprising too.

Just an idea that came in mind while writing the comment:

IsIdentifierVisible = (seriesId: SeriesId, itemId?: string | number) => boolean

The array makes it easier to use imo, but the types are more complex.

My idea was if it is a string, use as is, but I think a better API might be (id: string|number, ...ids: (string|number)[])

This way we concatenate if there are more than 1 args

The (id: string|number, ...ids: (string|number)[]) looks effectively better. The array was giving the feeling that we can provide multiple items at the same time

alexfauquette · 2025-12-05T13:54:29Z

packages/x-charts/src/BarChart/seriesConfig/bar/seriesProcessor.ts

+          // Calculate the cumulative sum of all visible series before this one
+          // Only accumulate values with the same sign


Looks like you're doing back the job done in visibleStackedData. You could "just" need to find the id of the first visible series before this one and use it's stacked value

JCQuintas added 4 commits December 5, 2025 12:55

impl

3485822

types

94740e7

impl

8ebdb1f

exports

7fde6c4

JCQuintas self-assigned this Dec 5, 2025

JCQuintas requested a review from a team as a code owner December 5, 2025 12:05

JCQuintas added type: new feature Expand the scope of the product to solve a new problem. scope: charts Changes related to the charts. labels Dec 5, 2025

alexfauquette reviewed Dec 5, 2025

View reviewed changes

		// We sort the keys based on the original stacking order to ensure consistency
		const idOrder = stackedData.sort((a, b) => a.index - b.index).map((s) => s.key);

		// Post-process visibleStackedData to fix positions for hidden series
		// Hidden series should collapse to the cumulative position of visible series before them

		const visibleValues = series.visibleStackedData[dataIndex];
		const visibleValueCoordinates = visibleValues.map((v) =>


		export const VISIBILITY_SEPARATOR = '-';

		export const buildIdentifier = (ids: string \| (string \| number)[]) => {

	export const buildIdentifier = (ids: string \| (string \| number)[]) => {
	export const buildIdentifier = (ids: SeriesId \| [SeriesId, ItemId]) => {

		// Calculate the cumulative sum of all visible series before this one
		// Only accumulate values with the same sign

Uh oh!

[charts] Add VisibilityManager logic to allow managing series/items #20571

Are you sure you want to change the base?

[charts] Add VisibilityManager logic to allow managing series/items #20571

Uh oh!

Conversation

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

Uh oh!

Uh oh!

mui-bot commented Dec 5, 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 Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging #20571 will not alter performance

Summary

Footnotes

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!

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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[charts] Add `VisibilityManager` logic to allow managing series/items #20571

[charts] Add `VisibilityManager` logic to allow managing series/items #20571

JCQuintas commented Dec 5, 2025 •

edited

Loading

mui-bot commented Dec 5, 2025 •

edited

Loading

codspeed-hq bot commented Dec 5, 2025 •

edited

Loading