[charts] highlight band

docs/data/charts/highlighting/ElementHighlights.tsx

@@ -188,6 +188,7 @@ export default function ElementHighlights() {
           <MenuItem value={'none'}>none</MenuItem>
           <MenuItem value={'item'}>item</MenuItem>
           <MenuItem value={'series'}>series</MenuItem>
+          <MenuItem value={'group'}>group</MenuItem>
         </TextField>
         <TextField
           select

packages/x-charts/src/internals/plugins/featurePlugins/useChartHighlight/createIsHighlighted.ts

@@ -1,10 +1,23 @@
+import { AxisInteractionData } from '../useChartInteraction/useChartInteraction.types';
 import { HighlightScope } from './highlightConfig.types';
 import { HighlightItemData } from './useChartHighlight.types';
 
 export const createIsHighlighted =
-  (highlightScope: HighlightScope | null | undefined, highlightedItem: HighlightItemData | null) =>
+  (
+    highlightScope: HighlightScope | null | undefined,
+    highlightedItem: HighlightItemData | null,
+    axisInteractionData: AxisInteractionData | undefined,
+  ) =>
   (item: HighlightItemData | null): boolean => {
-    if (!highlightScope || !highlightedItem || !item) {
+    if (!highlightScope || !item) {
+      return false;
+    }
+
+    if (highlightScope.highlight === 'group') {
+      return axisInteractionData?.x?.index === item.dataIndex;
+    }
+
+    if (!highlightedItem) {
       return false;
     }
 

packages/x-charts/src/internals/plugins/featurePlugins/useChartHighlight/highlightConfig.types.ts

@@ -1,4 +1,4 @@
-export type HighlightOptions = 'none' | 'item' | 'series';
+export type HighlightOptions = 'none' | 'item' | 'series' | 'group';
 
 export type FadeOptions = 'none' | 'series' | 'global';
 
@@ -8,6 +8,7 @@ export type HighlightScope = {
    * - 'none': no highlight.
    * - 'item': only highlight the item.
    * - 'series': highlight all elements of the same series.
+   * - 'group': highlight all elements of the same group.
    * @default 'none'
    */
   highlight?: HighlightOptions;

packages/x-charts/src/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.ts

@@ -1,3 +1,9 @@
+import {
+  selectorChartsInteractionAxis,
+  selectorChartsInteractionXAxis,
+  useSelector,
+  useStore,
+} from '@mui/x-charts/internals';
 import { SeriesId } from '../../../../models/seriesType/common';
 import { ChartSeriesType } from '../../../../models/seriesType/config';
 import { UseChartSeriesSignature } from '../../corePlugins/useChartSeries/useChartSeries.types';
@@ -62,10 +68,11 @@ export const selectorChartsIsHighlighted = createSelector(
   [
     selectorChartsHighlightScope,
     selectorChartsHighlightedItem,
+    selectorChartsInteractionAxis,
     (_, item: HighlightItemData | null) => item,
   ],
-  (highlightScope, highlightedItem, item) =>
-    createIsHighlighted(highlightScope, highlightedItem)(item),
+  (highlightScope, highlightedItem, axisInteractionData, item) =>
+    createIsHighlighted(highlightScope, highlightedItem, axisInteractionData)(item),
 );
 
 export const selectorChartsIsFaded = createSelector(