@mui/x-charts 8.5.3 → 8.6.0

package/esm/BarChart/BarPlot.js

@@ -16,6 +16,7 @@ import { checkScaleErrors } from "./checkScaleErrors.js";
 import { useBarSeriesContext } from "../hooks/useBarSeries.js";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
+import { useUtilityClasses } from "./barClasses.js";
 
 /**
  * Solution of the equations
@@ -69,13 +70,13 @@ const useAggregatedData = () => {
   const defaultYAxisId = yAxisIds[0];
   const masks = {};
   const data = stackingGroups.flatMap(({
-    ids: groupIds
+    ids: seriesIds
   }, groupIndex) => {
     const xMin = drawingArea.left;
     const xMax = drawingArea.left + drawingArea.width;
     const yMin = drawingArea.top;
     const yMax = drawingArea.top + drawingArea.height;
-    return groupIds.flatMap(seriesId => {
+    return seriesIds.map(seriesId => {
       const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
       const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
       const xAxisConfig = xAxis[xAxisId];
@@ -101,7 +102,7 @@ const useAggregatedData = () => {
         data: currentSeriesData,
         layout
       } = series[seriesId];
-      return baseScaleConfig.data.map((baseValue, dataIndex) => {
+      const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
         if (currentSeriesData[dataIndex] == null) {
           return null;
         }
@@ -150,6 +151,10 @@ const useAggregatedData = () => {
         mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
         return result;
       }).filter(rectangle => rectangle !== null);
+      return {
+        seriesId,
+        data: seriesDataPoints
+      };
     });
   });
   return {
@@ -192,7 +197,9 @@ function BarPlot(props) {
   const isZoomInteracting = useInternalIsZoomInteracting();
   const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
   const withoutBorderRadius = !borderRadius || borderRadius <= 0;
+  const classes = useUtilityClasses();
   return /*#__PURE__*/_jsxs(BarPlotRoot, {
+    className: classes.root,
     children: [!withoutBorderRadius && masksData.map(({
       id,
       x,
@@ -217,45 +224,53 @@ function BarPlot(props) {
       }, id);
     }), completedData.map(({
       seriesId,
-      dataIndex,
-      color,
-      maskId,
-      layout,
-      x,
-      xOrigin,
-      y,
-      yOrigin,
-      width,
-      height
+      data
     }) => {
-      const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
-        id: seriesId,
-        dataIndex: dataIndex,
-        color: color,
-        skipAnimation: skipAnimation ?? false,
-        layout: layout ?? 'vertical',
-        x: x,
-        xOrigin: xOrigin,
-        y: y,
-        yOrigin: yOrigin,
-        width: width,
-        height: height
-      }, other, {
-        onClick: onItemClick && (event => {
-          onItemClick(event, {
-            type: 'bar',
-            seriesId,
-            dataIndex
-          });
-        })
-      }), `${seriesId}-${dataIndex}`);
-      if (withoutBorderRadius) {
-        return barElement;
-      }
       return /*#__PURE__*/_jsx("g", {
-        clipPath: `url(#${maskId})`,
-        children: barElement
-      }, `${seriesId}-${dataIndex}`);
+        "data-series": seriesId,
+        className: classes.series,
+        children: data.map(({
+          dataIndex,
+          color,
+          maskId,
+          layout,
+          x,
+          xOrigin,
+          y,
+          yOrigin,
+          width,
+          height
+        }) => {
+          const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
+            id: seriesId,
+            dataIndex: dataIndex,
+            color: color,
+            skipAnimation: skipAnimation ?? false,
+            layout: layout ?? 'vertical',
+            x: x,
+            xOrigin: xOrigin,
+            y: y,
+            yOrigin: yOrigin,
+            width: width,
+            height: height
+          }, other, {
+            onClick: onItemClick && (event => {
+              onItemClick(event, {
+                type: 'bar',
+                seriesId,
+                dataIndex
+              });
+            })
+          }), dataIndex);
+          if (withoutBorderRadius) {
+            return barElement;
+          }
+          return /*#__PURE__*/_jsx("g", {
+            clipPath: `url(#${maskId})`,
+            children: barElement
+          }, dataIndex);
+        })
+      }, seriesId);
     }), barLabel && /*#__PURE__*/_jsx(BarLabelPlot, _extends({
       bars: completedData,
       skipAnimation: skipAnimation,

package/esm/BarChart/barClasses.d.ts

@@ -0,0 +1,12 @@
+export interface BarClasses {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+}
+export type BarClassKey = keyof BarClasses;
+export declare function getBarUtilityClass(slot: string): string;
+export declare const barClasses: BarClasses;
+export declare const useUtilityClasses: (classes?: Partial<BarClasses>) => Record<"root" | "series" | "seriesLabels", string>;

package/esm/BarChart/barClasses.js

@@ -0,0 +1,15 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getBarUtilityClass(slot) {
+  return generateUtilityClass('MuiBar', slot);
+}
+export const barClasses = generateUtilityClasses('MuiBar', ['root', 'series', 'seriesLabels']);
+export const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    series: ['series'],
+    seriesLabels: ['seriesLabels']
+  };
+  return composeClasses(slots, getBarUtilityClass, classes);
+};

package/esm/BarChart/index.d.ts

@@ -2,4 +2,6 @@ export * from "./BarChart.js";
 export * from "./BarPlot.js";
 export * from "./BarElement.js";
 export * from "./BarLabel/index.js";
-export * from "./barElementClasses.js";
+export * from "./barElementClasses.js";
+export { barClasses, getBarUtilityClass } from "./barClasses.js";
+export type { BarClassKey, BarClasses } from "./barClasses.js";

package/esm/BarChart/index.js

@@ -2,4 +2,5 @@ export * from "./BarChart.js";
 export * from "./BarPlot.js";
 export * from "./BarElement.js";
 export * from "./BarLabel/index.js";
-export * from "./barElementClasses.js";
+export * from "./barElementClasses.js";
+export { barClasses, getBarUtilityClass } from "./barClasses.js";

package/esm/BarChart/types.d.ts

@@ -9,7 +9,11 @@ export type AnimationData = {
   xOrigin: number;
   layout: BarSeriesType['layout'];
 };
-export interface CompletedBarData extends AnimationData {
+export interface ProcessedBarSeriesData {
+  seriesId: SeriesId;
+  data: ProcessedBarData[];
+}
+export interface ProcessedBarData extends AnimationData {
   seriesId: SeriesId;
   dataIndex: number;
   color: string;

package/esm/ChartsLegend/ChartsLegend.js

@@ -81,6 +81,7 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
     children: data.items.map((item, i) => {
       return /*#__PURE__*/_jsx("li", {
         className: classes?.item,
+        "data-series": item.id,
         children: /*#__PURE__*/_jsxs(Element, {
           className: classes?.series,
           role: onItemClick ? 'button' : undefined,

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -9,24 +9,22 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme, styled } from '@mui/material/styles';
 import { useRtl } from '@mui/system/RtlProvider';
-import { clampAngle } from "../internals/clampAngle.js";
 import { useIsHydrated } from "../hooks/useIsHydrated.js";
-import { doesTextFitInRect, ellipsize } from "../internals/ellipsize.js";
 import { getStringSize } from "../internals/domUtils.js";
 import { useTicks } from "../hooks/useTicks.js";
 import { getAxisUtilityClass } from "../ChartsAxis/axisClasses.js";
 import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
 import { ChartsText } from "../ChartsText/index.js";
-import { getMinXTranslation } from "../internals/geometry.js";
 import { useMounted } from "../hooks/useMounted.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
-import { getWordsByLines } from "../internals/getWordsByLines.js";
 import { isInfinity } from "../internals/isInfinity.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { useChartContext } from "../context/ChartProvider/useChartContext.js";
 import { useXAxes } from "../hooks/useAxis.js";
 import { getDefaultBaseline, getDefaultTextAnchor } from "../ChartsText/defaultTextPlacement.js";
 import { invertTextAnchor } from "../internals/invertTextAnchor.js";
+import { shortenLabels } from "./shortenLabels.js";
+import { getVisibleLabels } from "./getVisibleLabels.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -49,108 +47,6 @@ const useUtilityClasses = ownerState => {
 const TICK_LABEL_GAP = 3;
 /* Gap between the axis label and tick labels. */
 const AXIS_LABEL_TICK_LABEL_GAP = 4;
-
-/* 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 = 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 = 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;
-  }));
-}
-function shortenLabels(visibleLabels, drawingArea, maxHeight, isRtl, tickLabelStyle) {
-  const shortenedLabels = new Map();
-  const angle = 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 => doesTextFitInRect(text, {
-        width,
-        height: maxHeight,
-        angle,
-        measureText: string => getStringSize(string, tickLabelStyle)
-      });
-      shortenedLabels.set(item, ellipsize(item.formattedValue.toString(), doesTextFit));
-    }
-  }
-  return shortenedLabels;
-}
 const XAxisRoot = styled(AxisRoot, {
   name: 'MuiChartsXAxis',
   slot: 'Root'

package/esm/ChartsXAxis/getVisibleLabels.d.ts

@@ -0,0 +1,14 @@
+import { TickItemType } from "../hooks/useTicks.js";
+import { ChartsXAxisProps, ComputedXAxis } from "../models/axis.js";
+export declare function getVisibleLabels(xTicks: TickItemType[], {
+  tickLabelStyle: style,
+  tickLabelInterval,
+  tickLabelMinGap,
+  reverse,
+  isMounted,
+  isXInside
+}: Pick<ChartsXAxisProps, 'tickLabelInterval' | 'tickLabelStyle'> & Pick<ComputedXAxis, 'reverse'> & {
+  isMounted: boolean;
+  tickLabelMinGap: NonNullable<ChartsXAxisProps['tickLabelMinGap']>;
+  isXInside: (x: number) => boolean;
+}): Set<TickItemType>;

package/esm/ChartsXAxis/getVisibleLabels.js

@@ -0,0 +1,67 @@
+'use client';
+
+import { getMinXTranslation } from "../internals/geometry.js";
+import { getWordsByLines } from "../internals/getWordsByLines.js";
+
+/* Returns a set of indices of the tick labels that should be visible.  */
+export 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 = 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 = 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/esm/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/esm/ChartsXAxis/shortenLabels.js

@@ -0,0 +1,42 @@
+import { clampAngle } from "../internals/clampAngle.js";
+import { doesTextFitInRect, ellipsize } from "../internals/ellipsize.js";
+import { getStringSize } from "../internals/domUtils.js";
+export function shortenLabels(visibleLabels, drawingArea, maxHeight, isRtl, tickLabelStyle) {
+  const shortenedLabels = new Map();
+  const angle = 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 => doesTextFitInRect(text, {
+        width,
+        height: maxHeight,
+        angle,
+        measureText: string => getStringSize(string, tickLabelStyle)
+      });
+      shortenedLabels.set(item, ellipsize(item.formattedValue.toString(), doesTextFit));
+    }
+  }
+  return shortenedLabels;
+}

package/esm/ChartsYAxis/ChartsYAxis.js

@@ -11,7 +11,6 @@ import { useThemeProps, styled, useTheme } from '@mui/material/styles';
 import { useRtl } from '@mui/system/RtlProvider';
 import { useIsHydrated } from "../hooks/useIsHydrated.js";
 import { getDefaultBaseline, getDefaultTextAnchor } from "../ChartsText/defaultTextPlacement.js";
-import { doesTextFitInRect, ellipsize } from "../internals/ellipsize.js";
 import { getStringSize } from "../internals/domUtils.js";
 import { useTicks } from "../hooks/useTicks.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
@@ -22,8 +21,8 @@ import { isInfinity } from "../internals/isInfinity.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { useYAxes } from "../hooks/index.js";
-import { clampAngle } from "../internals/clampAngle.js";
 import { invertTextAnchor } from "../internals/invertTextAnchor.js";
+import { shortenLabels } from "./shortenLabels.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -46,42 +45,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 = 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 => doesTextFitInRect(text, {
-        width: maxWidth,
-        height,
-        angle,
-        measureText: string => getStringSize(string, tickLabelStyle)
-      });
-      shortenedLabels.set(item, ellipsize(item.formattedValue.toString(), doesTextFit));
-    }
-  }
-  return shortenedLabels;
-}
 const YAxisRoot = styled(AxisRoot, {
   name: 'MuiChartsYAxis',
   slot: 'Root'

package/esm/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/esm/ChartsYAxis/shortenLabels.js

@@ -0,0 +1,41 @@
+'use client';
+
+import { clampAngle } from "../internals/clampAngle.js";
+import { doesTextFitInRect, ellipsize } from "../internals/ellipsize.js";
+import { getStringSize } from "../internals/domUtils.js";
+export function shortenLabels(visibleLabels, drawingArea, maxWidth, isRtl, tickLabelStyle) {
+  const shortenedLabels = new Map();
+  const angle = 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 => doesTextFitInRect(text, {
+        width: maxWidth,
+        height,
+        angle,
+        measureText: string => getStringSize(string, tickLabelStyle)
+      });
+      shortenedLabels.set(item, ellipsize(item.formattedValue.toString(), doesTextFit));
+    }
+  }
+  return shortenedLabels;
+}

package/esm/LineChart/AnimatedArea.js

@@ -34,7 +34,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/esm/LineChart/AnimatedLine.js

@@ -36,7 +36,10 @@ const AnimatedLine = /*#__PURE__*/React.forwardRef(function AnimatedLine(props,
       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/esm/LineChart/CircleMarkElement.js

@@ -69,7 +69,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/esm/LineChart/MarkElement.js

@@ -77,7 +77,10 @@ function MarkElement(props) {
     d: d3Symbol(d3SymbolsFill[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/esm/LineChart/MarkPlot.js

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

package/esm/PieChart/PieArc.js

@@ -94,7 +94,9 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
     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";