[charts] Remove deprecated highlight properties

docs/data/charts/bars/BarAnimation.tsx

@@ -5,6 +5,7 @@ import Slider from '@mui/material/Slider';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import { BarChart } from '@mui/x-charts/BarChart';
+import { HighlightScope } from '@mui/x-charts/context';
 
 export default function BarAnimation() {
   const [seriesNb, setSeriesNb] = React.useState(2);
@@ -67,10 +68,10 @@ export default function BarAnimation() {
   );
 }
 
-const highlightScope = {
+const highlightScope: HighlightScope = {
   highlight: 'series',
   fade: 'global',
-} as const;
+};
 
 const series = [
   {

docs/data/charts/highlighting/ControlledHighlight.js

@@ -18,8 +18,8 @@ export default function ControlledHighlight() {
     seriesId: 'A',
     dataIndex: 0,
   });
-  const [highlighted, setHighlighted] = React.useState('item');
-  const [faded, setFaded] = React.useState('global');
+  const [highlight, setHighlight] = React.useState('item');
+  const [fade, setFade] = React.useState('global');
 
   const handleHighLightedSeries = (event, newHighLightedSeries) => {
     if (newHighLightedSeries !== null) {
@@ -80,8 +80,8 @@ export default function ControlledHighlight() {
           series={barChartsProps.series.map((series) => ({
             ...series,
             highlightScope: {
-              highlighted,
-              faded,
+              highlight,
+              fade,
             },
           }))}
           highlightedItem={highlightedItem}
@@ -98,8 +98,8 @@ export default function ControlledHighlight() {
         <TextField
           select
           label="highlighted"
-          value={highlighted}
-          onChange={(event) => setHighlighted(event.target.value)}
+          value={highlight}
+          onChange={(event) => setHighlight(event.target.value)}
           sx={{ minWidth: 150 }}
         >
           <MenuItem value={'none'}>none</MenuItem>
@@ -109,8 +109,8 @@ export default function ControlledHighlight() {
         <TextField
           select
           label="faded"
-          value={faded}
-          onChange={(event) => setFaded(event.target.value)}
+          value={fade}
+          onChange={(event) => setFade(event.target.value)}
           sx={{ minWidth: 150 }}
         >
           <MenuItem value={'none'}>none</MenuItem>

docs/data/charts/highlighting/ControlledHighlight.tsx

@@ -19,8 +19,8 @@ export default function ControlledHighlight() {
       seriesId: 'A',
       dataIndex: 0,
     });
-  const [highlighted, setHighlighted] = React.useState('item');
-  const [faded, setFaded] = React.useState('global');
+  const [highlight, setHighlight] = React.useState('item');
+  const [fade, setFade] = React.useState('global');
 
   const handleHighLightedSeries = (event: any, newHighLightedSeries: string) => {
     if (newHighLightedSeries !== null) {
@@ -81,8 +81,8 @@ export default function ControlledHighlight() {
           series={barChartsProps.series.map((series) => ({
             ...series,
             highlightScope: {
-              highlighted,
-              faded,
+              highlight,
+              fade,
             } as HighlightScope,
           }))}
           highlightedItem={highlightedItem}
@@ -99,8 +99,8 @@ export default function ControlledHighlight() {
         <TextField
           select
           label="highlighted"
-          value={highlighted}
-          onChange={(event) => setHighlighted(event.target.value)}
+          value={highlight}
+          onChange={(event) => setHighlight(event.target.value)}
           sx={{ minWidth: 150 }}
         >
           <MenuItem value={'none'}>none</MenuItem>
@@ -110,8 +110,8 @@ export default function ControlledHighlight() {
         <TextField
           select
           label="faded"
-          value={faded}
-          onChange={(event) => setFaded(event.target.value)}
+          value={fade}
+          onChange={(event) => setFade(event.target.value)}
           sx={{ minWidth: 150 }}
         >
           <MenuItem value={'none'}>none</MenuItem>

docs/data/charts/highlighting/ElementHighlights.js

@@ -88,8 +88,8 @@ const pieChartsParams = {
 export default function ElementHighlights() {
   const [chartType, setChartType] = React.useState('bar');
   const [withArea, setWithArea] = React.useState(false);
-  const [highlighted, setHighlighted] = React.useState('item');
-  const [faded, setFaded] = React.useState('global');
+  const [highlight, setHighlight] = React.useState('item');
+  const [fade, setFade] = React.useState('global');
 
   const handleChartType = (event, newChartType) => {
     if (newChartType !== null) {
@@ -123,8 +123,8 @@ export default function ElementHighlights() {
             series={barChartsParams.series.map((series) => ({
               ...series,
               highlightScope: {
-                highlighted,
-                faded,
+                highlight,
+                fade,
               },
             }))}
           />
@@ -137,8 +137,8 @@ export default function ElementHighlights() {
               ...series,
               area: withArea,
               highlightScope: {
-                highlighted,
-                faded,
+                highlight,
+                fade,
               },
             }))}
           />
@@ -150,8 +150,8 @@ export default function ElementHighlights() {
             series={scatterChartsParams.series.map((series) => ({
               ...series,
               highlightScope: {
-                highlighted,
-                faded,
+                highlight,
+                fade,
               },
             }))}
           />
@@ -163,8 +163,8 @@ export default function ElementHighlights() {
             series={pieChartsParams.series.map((series) => ({
               ...series,
               highlightScope: {
-                highlighted,
-                faded,
+                highlight,
+                fade,
               },
             }))}
           />
@@ -179,9 +179,9 @@ export default function ElementHighlights() {
       >
         <TextField
           select
-          label="highlighted"
-          value={highlighted}
-          onChange={(event) => setHighlighted(event.target.value)}
+          label="highlight"
+          value={highlight}
+          onChange={(event) => setHighlight(event.target.value)}
           sx={{ minWidth: 150 }}
         >
           <MenuItem value={'none'}>none</MenuItem>
@@ -190,9 +190,9 @@ export default function ElementHighlights() {
         </TextField>
         <TextField
           select
-          label="faded"
-          value={faded}
-          onChange={(event) => setFaded(event.target.value)}
+          label="fade"
+          value={fade}
+          onChange={(event) => setFade(event.target.value)}
           sx={{ minWidth: 150 }}
         >
           <MenuItem value={'none'}>none</MenuItem>

docs/data/charts/highlighting/ElementHighlights.tsx

@@ -89,8 +89,8 @@ const pieChartsParams = {
 export default function ElementHighlights() {
   const [chartType, setChartType] = React.useState('bar');
   const [withArea, setWithArea] = React.useState(false);
-  const [highlighted, setHighlighted] = React.useState('item');
-  const [faded, setFaded] = React.useState('global');
+  const [highlight, setHighlight] = React.useState('item');
+  const [fade, setFade] = React.useState('global');
 
   const handleChartType = (event: any, newChartType: string) => {
     if (newChartType !== null) {
@@ -124,8 +124,8 @@ export default function ElementHighlights() {
             series={barChartsParams.series.map((series) => ({
               ...series,
               highlightScope: {
-                highlighted,
-                faded,
+                highlight,
+                fade,
               } as HighlightScope,
             }))}
           />
@@ -138,8 +138,8 @@ export default function ElementHighlights() {
               ...series,
               area: withArea,
               highlightScope: {
-                highlighted,
-                faded,
+                highlight,
+                fade,
               } as HighlightScope,
             }))}
           />
@@ -151,8 +151,8 @@ export default function ElementHighlights() {
             series={scatterChartsParams.series.map((series) => ({
               ...series,
               highlightScope: {
-                highlighted,
-                faded,
+                highlight,
+                fade,
               } as HighlightScope,
             }))}
           />
@@ -164,8 +164,8 @@ export default function ElementHighlights() {
             series={pieChartsParams.series.map((series) => ({
               ...series,
               highlightScope: {
-                highlighted,
-                faded,
+                highlight,
+                fade,
               } as HighlightScope,
             }))}
           />
@@ -180,9 +180,9 @@ export default function ElementHighlights() {
       >
         <TextField
           select
-          label="highlighted"
-          value={highlighted}
-          onChange={(event) => setHighlighted(event.target.value)}
+          label="highlight"
+          value={highlight}
+          onChange={(event) => setHighlight(event.target.value)}
           sx={{ minWidth: 150 }}
         >
           <MenuItem value={'none'}>none</MenuItem>
@@ -191,9 +191,9 @@ export default function ElementHighlights() {
         </TextField>
         <TextField
           select
-          label="faded"
-          value={faded}
-          onChange={(event) => setFaded(event.target.value)}
+          label="fade"
+          value={fade}
+          onChange={(event) => setFade(event.target.value)}
           sx={{ minWidth: 150 }}
         >
           <MenuItem value={'none'}>none</MenuItem>

packages/x-charts/src/PieChart/PieArc.tsx

@@ -9,7 +9,6 @@ import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { PieItemId } from '../models';
-import { HighlightScope } from '../context';
 
 export interface PieArcClasses {
   /** Styles applied to the root element. */
@@ -64,10 +63,6 @@ export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> &
   PieArcOwnerState & {
     cornerRadius: SpringValue<number>;
     endAngle: SpringValue<number>;
-    /**
-     * @deprecated Use the `isFaded` or `isHighlighted` props instead.
-     */
-    highlightScope?: Partial<HighlightScope>;
     innerRadius: SpringValue<number>;
     onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
     outerRadius: SpringValue<number>;
@@ -90,7 +85,6 @@ function PieArc(props: PieArcProps) {
     outerRadius,
     paddingAngle,
     startAngle,
-    highlightScope,
     ...other
   } = props;
 
@@ -137,15 +131,6 @@ PieArc.propTypes = {
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   dataIndex: PropTypes.number.isRequired,
-  /**
-   * @deprecated Use the `isFaded` or `isHighlighted` props instead.
-   */
-  highlightScope: PropTypes.shape({
-    fade: PropTypes.oneOf(['global', 'none', 'series']),
-    faded: PropTypes.oneOf(['global', 'none', 'series']),
-    highlight: PropTypes.oneOf(['item', 'none', 'series']),
-    highlighted: PropTypes.oneOf(['item', 'none', 'series']),
-  }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   isFaded: PropTypes.bool.isRequired,
   isHighlighted: PropTypes.bool.isRequired,

packages/x-charts/src/PieChart/PieArcPlot.tsx

@@ -15,7 +15,6 @@ import {
   ValueWithHighlight,
   useTransformData,
 } from './dataTransform/useTransformData';
-import { useHighlighted } from '../context';
 
 export interface PieArcPlotSlots {
   pieArc?: React.JSXElementConstructor<PieArcProps>;
@@ -95,7 +94,6 @@ function PieArcPlot(props: PieArcPlotProps) {
     ...defaultTransitionConfig,
     immediate: skipAnimation,
   });
-  const { highlightScope } = useHighlighted();
 
   if (data.length === 0) {
     return null;
@@ -133,7 +131,6 @@ function PieArcPlot(props: PieArcPlotProps) {
               id={id}
               color={item.color}
               dataIndex={index}
-              highlightScope={highlightScope}
               isFaded={item.isFaded}
               isHighlighted={item.isHighlighted}
               onClick={

packages/x-charts/src/context/HighlightedProvider/HighlightedContext.ts

@@ -34,10 +34,6 @@ export type HighlightOptions = 'none' | 'item' | 'series';
 export type FadeOptions = 'none' | 'series' | 'global';
 
 export type HighlightScope = {
-  /**
-   * @deprecated Use `highlight` instead.
-   */
-  highlighted?: HighlightOptions;
   /**
    * The scope of highlighted elements.
    * - 'none': no highlight.
@@ -46,10 +42,6 @@ export type HighlightScope = {
    * @default 'none'
    */
   highlight?: HighlightOptions;
-  /**
-   * @deprecated Use `fade` instead.
-   */
-  faded?: FadeOptions;
   /**
    * The scope of faded elements.
    * - 'none': no fading.

packages/x-charts/src/context/HighlightedProvider/HighlightedProvider.tsx

@@ -29,15 +29,6 @@ export type HighlightedProviderProps = {
   onHighlightChange?: (highlightedItem: HighlightItemData | null) => void;
 };
 
-const mergeDeprecatedOptions = (options?: Partial<HighlightScope>): HighlightScope => {
-  const { highlighted, faded, ...other } = options ?? {};
-  return {
-    highlight: highlighted,
-    fade: faded,
-    ...other,
-  };
-};
-
 function HighlightedProvider({
   children,
   highlightedItem: highlightedItemProps,
@@ -58,7 +49,7 @@ function HighlightedProvider({
       const seriesData = series[seriesType as ChartSeriesType];
       Object.keys(seriesData?.series ?? {}).forEach((seriesId) => {
         const seriesItem = seriesData?.series[seriesId];
-        map.set(seriesId, mergeDeprecatedOptions(seriesItem?.highlightScope));
+        map.set(seriesId, seriesItem?.highlightScope);
       });
     });
     return map;