@mui/x-charts 7.5.0 → 7.6.0

package/modern/PieChart/dataTransform/useTransformData.js

@@ -1,11 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { InteractionContext } from '../../context/InteractionProvider';
-import { getIsHighlighted, getIsFaded } from '../../hooks/useInteractionItemProps';
+import { useHighlighted } from '../../context';
 export function useTransformData(series) {
   const {
     id: seriesId,
-    highlightScope,
     data,
     faded,
     highlighted,
@@ -16,29 +14,16 @@ export function useTransformData(series) {
     cornerRadius: baseCornerRadius = 0
   } = series;
   const {
-    item: highlightedItem
-  } = React.useContext(InteractionContext);
-  const getHighlightStatus = React.useCallback(dataIndex => {
-    const isHighlighted = getIsHighlighted(highlightedItem, {
-      type: 'pie',
-      seriesId,
-      dataIndex
-    }, highlightScope);
-    const isFaded = !isHighlighted && getIsFaded(highlightedItem, {
-      type: 'pie',
+    isFaded: isItemFaded,
+    isHighlighted: isItemHighlighted
+  } = useHighlighted();
+  const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
+    const currentItem = {
       seriesId,
-      dataIndex
-    }, highlightScope);
-    return {
-      isHighlighted,
-      isFaded
+      dataIndex: itemIndex
     };
-  }, [highlightScope, highlightedItem, seriesId]);
-  const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
-    const {
-      isHighlighted,
-      isFaded
-    } = getHighlightStatus(itemIndex);
+    const isHighlighted = isItemHighlighted(currentItem);
+    const isFaded = !isHighlighted && isItemFaded(currentItem);
     const attributesOverride = _extends({
       additionalRadius: 0
     }, isFaded && faded || isHighlighted && highlighted || {});
@@ -56,6 +41,6 @@ export function useTransformData(series) {
       cornerRadius,
       arcLabelRadius
     });
-  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, getHighlightStatus, highlighted]);
+  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, highlighted, isItemFaded, isItemHighlighted, seriesId]);
   return dataWithHighlight;
 }

package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -50,7 +50,7 @@ const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function Responsi
 process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
   className: PropTypes.string,
@@ -74,6 +74,13 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }),
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
@@ -86,6 +93,12 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.

package/modern/ScatterChart/Scatter.js

@@ -2,8 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { getValueToPositionMapper } from '../hooks/useScale';
-import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
+import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { InteractionContext } from '../context/InteractionProvider';
+import { useHighlighted } from '../context';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -25,16 +26,15 @@ function Scatter(props) {
     markerSize,
     onItemClick
   } = props;
-  const highlightScope = React.useMemo(() => _extends({
-    highlighted: 'item',
-    faded: 'global'
-  }, series.highlightScope), [series.highlightScope]);
   const {
-    item,
     useVoronoiInteraction
   } = React.useContext(InteractionContext);
   const skipInteractionHandlers = useVoronoiInteraction || series.disableHover;
-  const getInteractionItemProps = useInteractionItemProps(highlightScope, skipInteractionHandlers);
+  const getInteractionItemProps = useInteractionItemProps(skipInteractionHandlers);
+  const {
+    isFaded,
+    isHighlighted
+  } = useHighlighted();
   const cleanData = React.useMemo(() => {
     const getXPosition = getValueToPositionMapper(xScale);
     const getYPosition = getValueToPositionMapper(yScale);
@@ -56,12 +56,16 @@ function Scatter(props) {
         dataIndex: i
       };
       if (isInRange) {
-        const isHighlighted = getIsHighlighted(item, pointCtx, highlightScope);
+        const currentItem = {
+          seriesId: pointCtx.seriesId,
+          dataIndex: pointCtx.dataIndex
+        };
+        const isItemHighlighted = isHighlighted(currentItem);
         temp.push({
           x,
           y,
-          isHighlighted,
-          isFaded: !isHighlighted && getIsFaded(item, pointCtx, highlightScope),
+          isHighlighted: isItemHighlighted,
+          isFaded: !isItemHighlighted && isFaded(currentItem),
           interactionProps: getInteractionItemProps(pointCtx),
           id: scatterPoint.id,
           dataIndex: i,
@@ -70,7 +74,7 @@ function Scatter(props) {
       }
     }
     return temp;
-  }, [xScale, yScale, series.data, series.id, item, highlightScope, getInteractionItemProps, color, colorGetter]);
+  }, [xScale, yScale, series.data, series.id, getInteractionItemProps, color, colorGetter, isFaded, isHighlighted]);
   return /*#__PURE__*/_jsx("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/_jsx("circle", _extends({
       cx: 0,
@@ -91,7 +95,7 @@ function Scatter(props) {
 process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   color: PropTypes.string.isRequired,
   colorGetter: PropTypes.func,

package/modern/ScatterChart/ScatterChart.js

@@ -47,7 +47,9 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
     children,
     slots,
     slotProps,
-    loading
+    loading,
+    highlightedItem,
+    onHighlightChange
   } = props;
   return /*#__PURE__*/_jsx(ResponsiveChartContainer, {
     ref: ref,
@@ -61,6 +63,8 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
     xAxis: xAxis,
     yAxis: yAxis,
     sx: sx,
+    highlightedItem: highlightedItem,
+    onHighlightChange: onHighlightChange,
     children: /*#__PURE__*/_jsxs(ZAxisContextProvider, {
       zAxis: zAxis,
       children: [!disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, {
@@ -99,7 +103,7 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
 process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
@@ -150,6 +154,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }),
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -187,6 +198,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
   /**
    * Callback fired when clicking on a scatter item.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`.

package/modern/ScatterChart/ScatterPlot.js

@@ -74,7 +74,7 @@ function ScatterPlot(props) {
 process.env.NODE_ENV !== "production" ? ScatterPlot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Callback fired when clicking on a scatter item.

package/modern/SparkLineChart/SparkLineChart.js

@@ -105,7 +105,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
 process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Set to `true` to fill spark line area.
@@ -147,6 +147,13 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }),
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
@@ -164,6 +171,12 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
   /**
    * Type of plot used.
    * @default 'line'

package/modern/context/HighlightedProvider/HighlightedContext.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+/**
+ * The data of the highlighted item.
+ * To highlight an item, you need to provide the series id and the item id.
+ * If targeting the whole series, you can omit the item id.
+ * To clear the highlight, set the value to an empty object.
+ *
+ * @example
+ * // Highlight the item with the series id 'london' and the item id 0.
+ * { seriesId: 'london', dataIndex: 0 }
+ *
+ * // Highlight the whole series with the series id 'london'.
+ * { seriesId: 'london' }
+ *
+ * // Clear the highlight.
+ * {}
+ */
+
+export const HighlightedContext = /*#__PURE__*/React.createContext({
+  highlightedItem: null,
+  setHighlighted: () => {},
+  clearHighlighted: () => {},
+  isHighlighted: () => false,
+  isFaded: () => false
+});
+if (process.env.NODE_ENV !== 'production') {
+  HighlightedContext.displayName = 'HighlightedContext';
+}

package/modern/context/HighlightedProvider/HighlightedProvider.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["highlighted", "faded"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import useControlled from '@mui/utils/useControlled';
+import { HighlightedContext } from './HighlightedContext';
+import { createIsFaded } from './createIsFaded';
+import { createIsHighlighted } from './createIsHighlighted';
+import { useSeries } from '../../hooks/useSeries';
+import { jsx as _jsx } from "react/jsx-runtime";
+const mergeDeprecatedOptions = options => {
+  const _ref = options ?? {},
+    {
+      highlighted,
+      faded
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return _extends({
+    highlight: highlighted,
+    fade: faded
+  }, rest);
+};
+function HighlightedProvider({
+  children,
+  highlightedItem: highlightedItemProps,
+  onHighlightChange
+}) {
+  const [highlightedItem, setHighlightedItem] = useControlled({
+    controlled: highlightedItemProps,
+    default: null,
+    name: 'HighlightedProvider',
+    state: 'highlightedItem'
+  });
+  const series = useSeries();
+  const seriesById = React.useMemo(() => {
+    const map = new Map();
+    Object.keys(series).forEach(seriesType => {
+      const seriesData = series[seriesType];
+      Object.keys(seriesData?.series ?? {}).forEach(seriesId => {
+        const seriesItem = seriesData?.series[seriesId];
+        map.set(seriesId, mergeDeprecatedOptions(seriesItem?.highlightScope));
+      });
+    });
+    return map;
+  }, [series]);
+  const highlightScope = highlightedItem && highlightedItem.seriesId ? seriesById.get(highlightedItem.seriesId) ?? undefined : undefined;
+  const providerValue = React.useMemo(() => {
+    return {
+      highlightScope,
+      highlightedItem,
+      setHighlighted: itemData => {
+        setHighlightedItem(itemData);
+        onHighlightChange?.(itemData);
+      },
+      clearHighlighted: () => {
+        setHighlightedItem(null);
+        onHighlightChange?.(null);
+      },
+      isHighlighted: createIsHighlighted(highlightScope, highlightedItem),
+      isFaded: createIsFaded(highlightScope, highlightedItem)
+    };
+  }, [highlightedItem, highlightScope, setHighlightedItem, onHighlightChange]);
+  return /*#__PURE__*/_jsx(HighlightedContext.Provider, {
+    value: providerValue,
+    children: children
+  });
+}
+process.env.NODE_ENV !== "production" ? HighlightedProvider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func
+} : void 0;
+export { HighlightedProvider };

package/modern/context/HighlightedProvider/createIsFaded.js

@@ -0,0 +1,12 @@
+export const createIsFaded = (highlightScope, highlightedItem) => input => {
+  if (!highlightScope) {
+    return false;
+  }
+  if (highlightScope.fade === 'series') {
+    return input.seriesId === highlightedItem?.seriesId && input.dataIndex !== highlightedItem?.dataIndex;
+  }
+  if (highlightScope.fade === 'global') {
+    return input.seriesId !== highlightedItem?.seriesId || input.dataIndex !== highlightedItem?.dataIndex;
+  }
+  return false;
+};

package/modern/context/HighlightedProvider/createIsHighlighted.js

@@ -0,0 +1,12 @@
+export const createIsHighlighted = (highlightScope, highlightedItem) => input => {
+  if (!highlightScope) {
+    return false;
+  }
+  if (highlightScope.highlight === 'series') {
+    return input.seriesId === highlightedItem?.seriesId;
+  }
+  if (highlightScope.highlight === 'item') {
+    return input.dataIndex === highlightedItem?.dataIndex && input.seriesId === highlightedItem?.seriesId;
+  }
+  return false;
+};

package/modern/context/HighlightedProvider/index.js

@@ -0,0 +1,4 @@
+export * from './HighlightedProvider';
+export * from './HighlightedContext';
+export * from './useHighlighted';
+export * from './useItemHighlighted';

package/modern/context/HighlightedProvider/useHighlighted.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { HighlightedContext } from './HighlightedContext';
+
+/**
+ * A hook to get the highlighted state of the chart.
+ *
+ * Please consider using the `useItemHighlighted` hook if you need to check the state of a specific item.
+ *
+ * @returns {HighlightedState} the state of the chart
+ */
+export function useHighlighted() {
+  const highlighted = React.useContext(HighlightedContext);
+  if (highlighted === undefined) {
+    throw new Error(['MUI X: Could not find the highlighted ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  return highlighted;
+}

package/modern/context/HighlightedProvider/useItemHighlighted.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { HighlightedContext } from './HighlightedContext';
+/**
+ * A hook to check the highlighted state of the item.
+ * This function already calculates that an item is not faded if it is highlighted.
+ *
+ * If you need fine control over the state, use the `useHighlighted` hook instead.
+ *
+ * @param {HighlightItemData} item is the item to check
+ * @returns {ItemHighlightedState} the state of the item
+ */
+export function useItemHighlighted(item) {
+  const highlighted = React.useContext(HighlightedContext);
+  if (highlighted === undefined) {
+    throw new Error(['MUI X: Could not find the highlighted ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  if (!item) {
+    return {
+      isHighlighted: false,
+      isFaded: false
+    };
+  }
+  const isHighlighted = highlighted.isHighlighted(item);
+  const isFaded = !isHighlighted && highlighted.isFaded(item);
+  return {
+    isHighlighted,
+    isFaded
+  };
+}

package/modern/context/ZAxisContextProvider.js

@@ -55,7 +55,7 @@ function ZAxisContextProvider(props) {
 process.env.NODE_ENV !== "production" ? ZAxisContextProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
   /**

package/modern/context/index.js

@@ -1 +1,2 @@
+export * from './HighlightedProvider';
 export { ZAxisContextProvider } from './ZAxisContextProvider';

package/modern/hooks/useInteractionItemProps.js

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
-import { HighlighContext } from '../context/HighlightProvider';
-export const useInteractionItemProps = (scope, skip) => {
+import { HighlightedContext } from '../context';
+export const useInteractionItemProps = skip => {
   const {
     dispatch: dispatchInteraction
   } = React.useContext(InteractionContext);
   const {
-    dispatch: dispatchHighlight
-  } = React.useContext(HighlighContext);
+    setHighlighted,
+    clearHighlighted
+  } = React.useContext(HighlightedContext);
   if (skip) {
     return () => ({});
   }
@@ -17,10 +18,9 @@ export const useInteractionItemProps = (scope, skip) => {
         type: 'enterItem',
         data
       });
-      dispatchHighlight({
-        type: 'enterItem',
-        item: data,
-        scope
+      setHighlighted({
+        seriesId: data.seriesId,
+        dataIndex: data.dataIndex
       });
     };
     const onMouseLeave = () => {
@@ -28,10 +28,7 @@ export const useInteractionItemProps = (scope, skip) => {
         type: 'leaveItem',
         data
       });
-      dispatchHighlight({
-        type: 'leaveItem',
-        item: data
-      });
+      clearHighlighted();
     };
     return {
       onMouseEnter,
@@ -39,33 +36,4 @@ export const useInteractionItemProps = (scope, skip) => {
     };
   };
   return getInteractionItemProps;
-};
-export const getIsHighlighted = (selectedItem, currentItem, highlightScope) => {
-  if (!highlightScope?.highlighted || highlightScope.highlighted === 'none' || selectedItem === null) {
-    return false;
-  }
-  const isSeriesSelected = selectedItem.type === currentItem.type && selectedItem.seriesId === currentItem.seriesId;
-  if (!isSeriesSelected) {
-    return false;
-  }
-  if (highlightScope.highlighted === 'series') {
-    return isSeriesSelected;
-  }
-  return selectedItem.dataIndex !== undefined && selectedItem.dataIndex === currentItem.dataIndex;
-};
-export const getIsFaded = (selectedItem, currentItem, highlightScope) => {
-  if (!highlightScope?.faded || highlightScope.faded === 'none' || selectedItem === null) {
-    return false;
-  }
-  const isSeriesSelected = selectedItem.type === currentItem.type && selectedItem.seriesId === currentItem.seriesId;
-  if (highlightScope.faded === 'series') {
-    return isSeriesSelected && selectedItem.dataIndex !== currentItem.dataIndex;
-  }
-  if (highlightScope.faded === 'global') {
-    if (!isSeriesSelected) {
-      return true;
-    }
-    return selectedItem.dataIndex !== undefined && selectedItem.dataIndex !== currentItem.dataIndex;
-  }
-  return false;
 };

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.5.0
+ * @mui/x-charts v7.6.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "7.5.0",
+  "version": "7.6.0",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -29,9 +29,9 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.6",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.15.14",
+    "@mui/system": "^5.15.15",
     "@mui/utils": "^5.15.14",
     "@react-spring/rafz": "^9.7.3",
     "@react-spring/web": "^9.7.3",

package/themeAugmentation/components.d.ts

@@ -40,6 +40,10 @@ export interface ChartsComponents {
     defaultProps?: ComponentsProps['MuiBarElement'];
     styleOverrides?: ComponentsOverrides['MuiBarElement'];
   };
+  MuiBarLabel?: {
+    defaultProps?: ComponentsProps['MuiBarLabel'];
+    styleOverrides?: ComponentsOverrides['MuiBarLabel'];
+  };
   MuiLineChart?: {
     defaultProps?: ComponentsProps['MuiLineChart'];
   };

package/themeAugmentation/overrides.d.ts

@@ -1,3 +1,4 @@
+import { BarLabelClassKey } from '../BarChart';
 import { BarElementClassKey } from '../BarChart/BarElement';
 import { ChartsAxisClassKey } from '../ChartsAxis';
 import { ChartsAxisHighlightClassKey } from '../ChartsAxisHighlight';
@@ -16,6 +17,8 @@ export interface PickersComponentNameToClassKey {
 
   // BarChart components
   MuiBarElement: BarElementClassKey;
+  MuiBarLabel: BarLabelClassKey;
+
   // LineChart components
   
   MuiAreaElement: AreaElementClassKey;

package/themeAugmentation/props.d.ts

@@ -1,3 +1,4 @@
+import { BarLabelProps } from '../BarChart/BarLabel';
 import { BarChartProps } from '../BarChart/BarChart';
 import { BarElementProps } from '../BarChart/BarElement';
 import { ChartsAxisProps } from '../ChartsAxis';
@@ -27,6 +28,7 @@ export interface ChartsComponentsPropsList {
   // BarChart components
   MuiBarChart: BarChartProps;
   MuiBarElement: BarElementProps;
+  MuiBarLabel: BarLabelProps;
   // LineChart components
   MuiLineChart: LineChartProps;
   MuiAreaElement: AreaElementProps;