[charts] Support array on highlightedItem prop for dataIndex

[Sladeck]

Summary

The current chart components from MUI does not allow users to highlight multiple slices at the same time. This is an issue when visualizing data with multiple similar items (e.g., clusters or categories) where more than one slice needs to be highlighted simultaneously. highlightedItem prop should accept an array of dataIndex.

The current documentation (https://mui.com/x/api/charts/pie-chart/) shows:
highlightedItem -> { dataIndex?: number, seriesId?: number | string }

I propose:
highlightedItem -> { dataIndex?: [number], seriesId?: number | string }

Examples

Motivation

Consider a scenario where we are displaying a pie chart that visualizes products, and some products share similar attributes. For example:

• Product A: 40% of total sales, Category: "Electronics"
• Product B: 30% of total sales, Category: "Electronics"
• Product C: 30% of total sales, Category: "Home Goods"

If we want to highlight all the products that are "Electronics," ideally, the slices for Product A and Product B should both be highlighted at the same time. However, the current implementation only supports highlighting a single slice, so it's not possible to highlight multiple slices that share the same attribute.

It would be more suitable for use cases where slices share similar attributes and need to be highlighted together. It's common in data visualizations to have groups of slices that represent similar traits.

Search keywords: highlightedItem charts

[alexfauquette]

That's an interesting usecase.

I'm not sure about the fact of having multiple indexes in the highlight state, because you can't over multiple elements at the same time. This behavior looks more to the notion of "scope" we have for highlight.

For now we handle item and series. Othe issues are asking to support the notion of "same data index" or "same stacking id". But we could go further by supporting callback that compare the highlight state with items, to know if we need to highlight them or no.

Then you could implement your custom logic of "same item type"

[Sladeck]

You’re absolutely right about highlighting a single item on hover—I wouldn’t want to change that behavior. And I also agree that highlightScope looks like a better place to make that change and would actually make it more useful when working with a single chart and a single series.

Regarding your point /other issues on using the same dataIndex, I agree that grouping slices under the same index could be valuable as long as we retain the ability to differentiate slices individually when needed, to avoid losing granularity.

As for the callback idea: that's sounds great! Though I'm guessing that in terms of complexity this will require more work.