@mui/x-charts 8.5.3 → 8.6.0

package/ChartsXAxis/getVisibleLabels.js

@@ -0,0 +1,71 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVisibleLabels = getVisibleLabels;
+var _geometry = require("../internals/geometry");
+var _getWordsByLines = require("../internals/getWordsByLines");
+/* Returns a set of indices of the tick labels that should be visible.  */
+function getVisibleLabels(xTicks, {
+  tickLabelStyle: style,
+  tickLabelInterval,
+  tickLabelMinGap,
+  reverse,
+  isMounted,
+  isXInside
+}) {
+  const getTickLabelSize = tick => {
+    if (!isMounted || tick.formattedValue === undefined) {
+      return {
+        width: 0,
+        height: 0
+      };
+    }
+    const tickSizes = (0, _getWordsByLines.getWordsByLines)({
+      style,
+      needsComputation: true,
+      text: tick.formattedValue
+    });
+    return {
+      width: Math.max(...tickSizes.map(size => size.width)),
+      height: Math.max(tickSizes.length * tickSizes[0].height)
+    };
+  };
+  if (typeof tickLabelInterval === 'function') {
+    return new Set(xTicks.filter((item, index) => tickLabelInterval(item.value, index)));
+  }
+
+  // Filter label to avoid overlap
+  let previousTextLimit = 0;
+  const direction = reverse ? -1 : 1;
+  return new Set(xTicks.filter((item, labelIndex) => {
+    const {
+      offset,
+      labelOffset
+    } = item;
+    const textPosition = offset + labelOffset;
+    if (labelIndex > 0 && direction * textPosition < direction * (previousTextLimit + tickLabelMinGap)) {
+      return false;
+    }
+    if (!isXInside(textPosition)) {
+      return false;
+    }
+
+    /* Measuring text width is expensive, so we need to delay it as much as possible to improve performance. */
+    const {
+      width,
+      height
+    } = getTickLabelSize(item);
+    const distance = (0, _geometry.getMinXTranslation)(width, height, style?.angle);
+    const currentTextLimit = textPosition - direction * distance / 2;
+    if (labelIndex > 0 && direction * currentTextLimit < direction * (previousTextLimit + tickLabelMinGap)) {
+      // Except for the first label, we skip all label that overlap with the last accepted.
+      // Notice that the early return prevents `previousTextLimit` from being updated.
+      return false;
+    }
+    previousTextLimit = textPosition + direction * distance / 2;
+    return true;
+  }));
+}

package/ChartsXAxis/shortenLabels.d.ts

@@ -0,0 +1,4 @@
+import { TickItemType } from "../hooks/useTicks.js";
+import { ChartsXAxisProps } from "../models/axis.js";
+import { ChartDrawingArea } from "../hooks/useDrawingArea.js";
+export declare function shortenLabels(visibleLabels: Set<TickItemType>, drawingArea: Pick<ChartDrawingArea, 'left' | 'width' | 'right'>, maxHeight: number, isRtl: boolean, tickLabelStyle: ChartsXAxisProps['tickLabelStyle']): Map<TickItemType, string>;

package/ChartsXAxis/shortenLabels.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shortenLabels = shortenLabels;
+var _clampAngle = require("../internals/clampAngle");
+var _ellipsize = require("../internals/ellipsize");
+var _domUtils = require("../internals/domUtils");
+function shortenLabels(visibleLabels, drawingArea, maxHeight, isRtl, tickLabelStyle) {
+  const shortenedLabels = new Map();
+  const angle = (0, _clampAngle.clampAngle)(tickLabelStyle?.angle ?? 0);
+
+  // Multiplying the space available to the left of the text position by leftBoundFactor returns the max width of the text.
+  // Same for rightBoundFactor
+  let leftBoundFactor = 1;
+  let rightBoundFactor = 1;
+  if (tickLabelStyle?.textAnchor === 'start') {
+    leftBoundFactor = Infinity;
+    rightBoundFactor = 1;
+  } else if (tickLabelStyle?.textAnchor === 'end') {
+    leftBoundFactor = 1;
+    rightBoundFactor = Infinity;
+  } else {
+    leftBoundFactor = 2;
+    rightBoundFactor = 2;
+  }
+  if (angle > 90 && angle < 270) {
+    [leftBoundFactor, rightBoundFactor] = [rightBoundFactor, leftBoundFactor];
+  }
+  if (isRtl) {
+    [leftBoundFactor, rightBoundFactor] = [rightBoundFactor, leftBoundFactor];
+  }
+  for (const item of visibleLabels) {
+    if (item.formattedValue) {
+      // That maximum width of the tick depends on its proximity to the axis bounds.
+      const width = Math.min((item.offset + item.labelOffset) * leftBoundFactor, (drawingArea.left + drawingArea.width + drawingArea.right - item.offset - item.labelOffset) * rightBoundFactor);
+      const doesTextFit = text => (0, _ellipsize.doesTextFitInRect)(text, {
+        width,
+        height: maxHeight,
+        angle,
+        measureText: string => (0, _domUtils.getStringSize)(string, tickLabelStyle)
+      });
+      shortenedLabels.set(item, (0, _ellipsize.ellipsize)(item.formattedValue.toString(), doesTextFit));
+    }
+  }
+  return shortenedLabels;
+}

package/ChartsYAxis/ChartsYAxis.js

@@ -17,7 +17,6 @@ var _styles = require("@mui/material/styles");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _useIsHydrated = require("../hooks/useIsHydrated");
 var _defaultTextPlacement = require("../ChartsText/defaultTextPlacement");
-var _ellipsize = require("../internals/ellipsize");
 var _domUtils = require("../internals/domUtils");
 var _useTicks = require("../hooks/useTicks");
 var _useDrawingArea = require("../hooks/useDrawingArea");
@@ -28,8 +27,8 @@ var _isInfinity = require("../internals/isInfinity");
 var _isBandScale = require("../internals/isBandScale");
 var _ChartProvider = require("../context/ChartProvider");
 var _hooks = require("../hooks");
-var _clampAngle = require("../internals/clampAngle");
 var _invertTextAnchor = require("../internals/invertTextAnchor");
+var _shortenLabels = require("./shortenLabels");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["scale", "tickNumber"];
 const useUtilityClasses = ownerState => {
@@ -53,42 +52,6 @@ const useUtilityClasses = ownerState => {
 const TICK_LABEL_GAP = 2;
 /* Gap between the axis label and tick labels. */
 const AXIS_LABEL_TICK_LABEL_GAP = 2;
-function shortenLabels(visibleLabels, drawingArea, maxWidth, isRtl, tickLabelStyle) {
-  const shortenedLabels = new Map();
-  const angle = (0, _clampAngle.clampAngle)(tickLabelStyle?.angle ?? 0);
-  let topBoundFactor = 1;
-  let bottomBoundFactor = 1;
-  if (tickLabelStyle?.textAnchor === 'start') {
-    topBoundFactor = Infinity;
-    bottomBoundFactor = 1;
-  } else if (tickLabelStyle?.textAnchor === 'end') {
-    topBoundFactor = 1;
-    bottomBoundFactor = Infinity;
-  } else {
-    topBoundFactor = 2;
-    bottomBoundFactor = 2;
-  }
-  if (angle > 180) {
-    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
-  }
-  if (isRtl) {
-    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
-  }
-  for (const item of visibleLabels) {
-    if (item.formattedValue) {
-      // That maximum height of the tick depends on its proximity to the axis bounds.
-      const height = Math.min((item.offset + item.labelOffset) * topBoundFactor, (drawingArea.top + drawingArea.height + drawingArea.bottom - item.offset - item.labelOffset) * bottomBoundFactor);
-      const doesTextFit = text => (0, _ellipsize.doesTextFitInRect)(text, {
-        width: maxWidth,
-        height,
-        angle,
-        measureText: string => (0, _domUtils.getStringSize)(string, tickLabelStyle)
-      });
-      shortenedLabels.set(item, (0, _ellipsize.ellipsize)(item.formattedValue.toString(), doesTextFit));
-    }
-  }
-  return shortenedLabels;
-}
 const YAxisRoot = (0, _styles.styled)(_AxisSharedComponents.AxisRoot, {
   name: 'MuiChartsYAxis',
   slot: 'Root'
@@ -226,7 +189,7 @@ function ChartsYAxis(inProps) {
   };
   /* If there's an axis title, the tick labels have less space to render  */
   const tickLabelsMaxWidth = Math.max(0, axisWidth - (label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP);
-  const tickLabels = isHydrated ? shortenLabels(yTicks, drawingArea, tickLabelsMaxWidth, isRtl, axisTickLabelProps.style) : new Map(Array.from(yTicks).map(item => [item, item.formattedValue]));
+  const tickLabels = isHydrated ? (0, _shortenLabels.shortenLabels)(yTicks, drawingArea, tickLabelsMaxWidth, isRtl, axisTickLabelProps.style) : new Map(Array.from(yTicks).map(item => [item, item.formattedValue]));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(YAxisRoot, {
     transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
     className: classes.root,

package/ChartsYAxis/shortenLabels.d.ts

@@ -0,0 +1,4 @@
+import { ChartDrawingArea } from "../hooks/index.js";
+import { TickItemType } from "../hooks/useTicks.js";
+import { ChartsYAxisProps } from "../models/index.js";
+export declare function shortenLabels(visibleLabels: TickItemType[], drawingArea: Pick<ChartDrawingArea, 'top' | 'height' | 'bottom'>, maxWidth: number, isRtl: boolean, tickLabelStyle: ChartsYAxisProps['tickLabelStyle']): Map<TickItemType, string>;

package/ChartsYAxis/shortenLabels.js

@@ -0,0 +1,46 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shortenLabels = shortenLabels;
+var _clampAngle = require("../internals/clampAngle");
+var _ellipsize = require("../internals/ellipsize");
+var _domUtils = require("../internals/domUtils");
+function shortenLabels(visibleLabels, drawingArea, maxWidth, isRtl, tickLabelStyle) {
+  const shortenedLabels = new Map();
+  const angle = (0, _clampAngle.clampAngle)(tickLabelStyle?.angle ?? 0);
+  let topBoundFactor = 1;
+  let bottomBoundFactor = 1;
+  if (tickLabelStyle?.textAnchor === 'start') {
+    topBoundFactor = Infinity;
+    bottomBoundFactor = 1;
+  } else if (tickLabelStyle?.textAnchor === 'end') {
+    topBoundFactor = 1;
+    bottomBoundFactor = Infinity;
+  } else {
+    topBoundFactor = 2;
+    bottomBoundFactor = 2;
+  }
+  if (angle > 180) {
+    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
+  }
+  if (isRtl) {
+    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
+  }
+  for (const item of visibleLabels) {
+    if (item.formattedValue) {
+      // That maximum height of the tick depends on its proximity to the axis bounds.
+      const height = Math.min((item.offset + item.labelOffset) * topBoundFactor, (drawingArea.top + drawingArea.height + drawingArea.bottom - item.offset - item.labelOffset) * bottomBoundFactor);
+      const doesTextFit = text => (0, _ellipsize.doesTextFitInRect)(text, {
+        width: maxWidth,
+        height,
+        angle,
+        measureText: string => (0, _domUtils.getStringSize)(string, tickLabelStyle)
+      });
+      shortenedLabels.set(item, (0, _ellipsize.ellipsize)(item.formattedValue.toString(), doesTextFit));
+    }
+  }
+  return shortenedLabels;
+}

package/LineChart/AnimatedArea.js

@@ -41,7 +41,10 @@ function AnimatedArea(props) {
       // eslint-disable-next-line no-nested-ternary
       ownerState.isHighlighted ? 'brightness(140%)' : ownerState.gradientId ? undefined : 'brightness(120%)',
       opacity: ownerState.isFaded ? 0.3 : 1,
-      stroke: "none"
+      stroke: "none",
+      "data-series": ownerState.id,
+      "data-highlighted": ownerState.isHighlighted || undefined,
+      "data-faded": ownerState.isFaded || undefined
     }, other, animatedProps))
   });
 }

package/LineChart/AnimatedLine.js

@@ -43,7 +43,10 @@ const AnimatedLine = exports.AnimatedLine = /*#__PURE__*/React.forwardRef(functi
       strokeLinejoin: "round",
       fill: "none",
       filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
-      opacity: ownerState.isFaded ? 0.3 : 1
+      opacity: ownerState.isFaded ? 0.3 : 1,
+      "data-series": ownerState.id,
+      "data-highlighted": ownerState.isHighlighted || undefined,
+      "data-faded": ownerState.isFaded || undefined
     }, other, animateProps))
   });
 });

package/LineChart/CircleMarkElement.js

@@ -76,7 +76,10 @@ function CircleMarkElement(props) {
     className: classes.root,
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset'
-  }, interactionProps));
+  }, interactionProps, {
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined
+  }));
 }
 process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
   // ----------------------------- Warning --------------------------------

package/LineChart/MarkElement.js

@@ -84,7 +84,10 @@ function MarkElement(props) {
     d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _getSymbol.getSymbol)(shape)])(),
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset'
-  }, interactionProps));
+  }, interactionProps, {
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined
+  }));
 }
 process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
   // ----------------------------- Warning --------------------------------

package/LineChart/MarkPlot.js

@@ -109,6 +109,7 @@ function MarkPlot(props) {
         });
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           clipPath: `url(#${clipId})`,
+          "data-series": seriesId,
           children: xData?.map((x, index) => {
             const value = data[index] == null ? null : stackedData[index][1];
             return {

package/PieChart/PieArc.js

@@ -103,7 +103,9 @@ const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(pr
     opacity: ownerState.isFaded ? 0.3 : 1,
     filter: ownerState.isHighlighted ? 'brightness(120%)' : 'none',
     strokeWidth: 1,
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    "data-highlighted": ownerState.isHighlighted || undefined,
+    "data-faded": ownerState.isFaded || undefined
   }, other, interactionProps, animatedProps));
 });
 if (process.env.NODE_ENV !== "production") PieArc.displayName = "PieArc";

package/PieChart/PiePlot.js

@@ -16,6 +16,7 @@ var _getPieCoordinates = require("./getPieCoordinates");
 var _usePieSeries = require("../hooks/usePieSeries");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _hooks = require("../hooks");
+var _pieClasses = require("./pieClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -42,6 +43,7 @@ function PiePlot(props) {
     height
   } = (0, _hooks.useDrawingArea)();
   const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(inSkipAnimation);
+  const classes = (0, _pieClasses.useUtilityClasses)();
   if (seriesData === undefined) {
     return null;
   }
@@ -76,7 +78,9 @@ function PiePlot(props) {
       const outerRadius = (0, _getPercentageValue.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
       const innerRadius = (0, _getPercentageValue.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        className: classes.series,
         transform: `translate(${left + cx}, ${top + cy})`,
+        "data-series": seriesId,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcPlot.PieArcPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius,
@@ -120,7 +124,9 @@ function PiePlot(props) {
       const innerRadius = (0, _getPercentageValue.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
       const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : (0, _getPercentageValue.getPercentageValue)(arcLabelRadiusParam, availableRadius);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        className: classes.seriesLabels,
         transform: `translate(${left + cx}, ${top + cy})`,
+        "data-series": seriesId,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcLabelPlot.PieArcLabelPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius ?? availableRadius,

package/PieChart/index.d.ts

@@ -4,4 +4,6 @@ export * from "./PieArcPlot.js";
 export * from "./PieArcLabelPlot.js";
 export * from "./PieArc.js";
 export * from "./PieArcLabel.js";
-export * from "./getPieCoordinates.js";
+export * from "./getPieCoordinates.js";
+export { pieClasses } from "./pieClasses.js";
+export type { PieClasses, PieClassKey } from "./pieClasses.js";

package/PieChart/index.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  pieClasses: true
+};
+Object.defineProperty(exports, "pieClasses", {
+  enumerable: true,
+  get: function () {
+    return _pieClasses.pieClasses;
+  }
+});
 var _PieChart = require("./PieChart");
 Object.keys(_PieChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PieChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +27,7 @@ Object.keys(_PieChart).forEach(function (key) {
 var _PiePlot = require("./PiePlot");
 Object.keys(_PiePlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PiePlot[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +39,7 @@ Object.keys(_PiePlot).forEach(function (key) {
 var _PieArcPlot = require("./PieArcPlot");
 Object.keys(_PieArcPlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PieArcPlot[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +51,7 @@ Object.keys(_PieArcPlot).forEach(function (key) {
 var _PieArcLabelPlot = require("./PieArcLabelPlot");
 Object.keys(_PieArcLabelPlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PieArcLabelPlot[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -50,6 +63,7 @@ Object.keys(_PieArcLabelPlot).forEach(function (key) {
 var _PieArc = require("./PieArc");
 Object.keys(_PieArc).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PieArc[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -61,6 +75,7 @@ Object.keys(_PieArc).forEach(function (key) {
 var _PieArcLabel = require("./PieArcLabel");
 Object.keys(_PieArcLabel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PieArcLabel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -72,6 +87,7 @@ Object.keys(_PieArcLabel).forEach(function (key) {
 var _getPieCoordinates = require("./getPieCoordinates");
 Object.keys(_getPieCoordinates).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _getPieCoordinates[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -79,4 +95,5 @@ Object.keys(_getPieCoordinates).forEach(function (key) {
       return _getPieCoordinates[key];
     }
   });
-});
+});
+var _pieClasses = require("./pieClasses");

package/PieChart/pieClasses.d.ts

@@ -0,0 +1,12 @@
+export interface PieClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the `g` element that contains all pie arcs of a series. */
+  series: string;
+  /** Styles applied to the `g` element that contains all pie arc labels of a series. */
+  seriesLabels: string;
+}
+export type PieClassKey = keyof PieClasses;
+export declare function getPieUtilityClass(slot: string): string;
+export declare const pieClasses: PieClasses;
+export declare const useUtilityClasses: (classes?: Partial<PieClasses>) => Record<"root" | "series" | "seriesLabels", string>;

package/PieChart/pieClasses.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPieUtilityClass = getPieUtilityClass;
+exports.useUtilityClasses = exports.pieClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getPieUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiPieChart', slot);
+}
+const pieClasses = exports.pieClasses = (0, _generateUtilityClasses.default)('MuiPieChart', ['root', 'series', 'seriesLabels']);
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    series: ['series'],
+    seriesLabels: ['seriesLabels']
+  };
+  return (0, _composeClasses.default)(slots, getPieUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/Toolbar/ToolbarButton.js

@@ -51,10 +51,12 @@ process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
   // ----------------------------------------------------------------------
   className: _propTypes.default.string,
   disabled: _propTypes.default.bool,
+  id: _propTypes.default.string,
   /**
    * A function to customize the rendering of the component.
    */
   render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
   style: _propTypes.default.object,
   tabIndex: _propTypes.default.number
 } : void 0;

package/esm/BarChart/AnimatedBarElement.js

@@ -14,6 +14,8 @@ export function AnimatedBarElement(props) {
   const animatedProps = useAnimateBar(props);
   return /*#__PURE__*/_jsx("rect", _extends({}, other, {
     filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
-    opacity: ownerState.isFaded ? 0.3 : 1
+    opacity: ownerState.isFaded ? 0.3 : 1,
+    "data-highlighted": ownerState.isHighlighted || undefined,
+    "data-faded": ownerState.isFaded || undefined
   }, animatedProps));
 }

package/esm/BarChart/BarLabel/BarLabelPlot.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { CompletedBarData } from "../types.js";
+import type { ProcessedBarSeriesData } from "../types.js";
 import { BarLabelItemProps } from "./BarLabelItem.js";
 type BarLabelPlotProps = {
-  bars: CompletedBarData[];
+  bars: ProcessedBarSeriesData[];
   skipAnimation?: boolean;
   barLabel?: BarLabelItemProps['barLabel'];
 };

package/esm/BarChart/BarLabel/BarLabelPlot.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["bars", "skipAnimation"];
 import * as React from 'react';
 import { BarLabelItem } from "./BarLabelItem.js";
+import { useUtilityClasses } from "../barClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -13,33 +14,40 @@ function BarLabelPlot(props) {
       skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const classes = useUtilityClasses();
   return /*#__PURE__*/_jsx(React.Fragment, {
-    children: bars.map(({
-      xOrigin,
-      yOrigin,
-      x,
-      y,
+    children: bars.flatMap(({
       seriesId,
-      dataIndex,
-      color,
-      value,
-      width,
-      height,
-      layout
-    }) => /*#__PURE__*/_jsx(BarLabelItem, _extends({
-      seriesId: seriesId,
-      dataIndex: dataIndex,
-      value: value,
-      color: color,
-      xOrigin: xOrigin,
-      yOrigin: yOrigin,
-      x: x,
-      y: y,
-      width: width,
-      height: height,
-      skipAnimation: skipAnimation ?? false,
-      layout: layout ?? 'vertical'
-    }, other), `${seriesId}-${dataIndex}`))
+      data
+    }) => /*#__PURE__*/_jsx("g", {
+      className: classes.seriesLabels,
+      "data-series": seriesId,
+      children: data.map(({
+        xOrigin,
+        yOrigin,
+        x,
+        y,
+        dataIndex,
+        color,
+        value,
+        width,
+        height,
+        layout
+      }) => /*#__PURE__*/_jsx(BarLabelItem, _extends({
+        seriesId: seriesId,
+        dataIndex: dataIndex,
+        value: value,
+        color: color,
+        xOrigin: xOrigin,
+        yOrigin: yOrigin,
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        skipAnimation: skipAnimation ?? false,
+        layout: layout ?? 'vertical'
+      }, other), dataIndex))
+    }, seriesId))
   });
 }
 export { BarLabelPlot };