@mui/x-charts 8.22.1 → 8.24.0

package/esm/BarChart/BarPlot.js

@@ -2,20 +2,20 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
+const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel", "renderer"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { barElementClasses } from "./barElementClasses.js";
-import { BarElement } from "./BarElement.js";
 import { useDrawingArea, useXAxes, useYAxes } from "../hooks/index.js";
-import { BarClipPath } from "./BarClipPath.js";
 import { BarLabelPlot } from "./BarLabel/BarLabelPlot.js";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
 import { useBarPlotData } from "./useBarPlotData.js";
 import { useUtilityClasses } from "./barClasses.js";
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
+import { IndividualBarPlot } from "./IndividualBarPlot.js";
+import { BatchBarPlot } from "./BatchBarPlot/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BarPlotRoot = styled('g', {
   name: 'MuiBarPlot',
@@ -44,11 +44,13 @@ function BarPlot(props) {
       skipAnimation: inSkipAnimation,
       onItemClick,
       borderRadius,
-      barLabel
+      barLabel,
+      renderer
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isZoomInteracting = useInternalIsZoomInteracting();
   const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
+  const batchSkipAnimation = useSkipAnimation(inSkipAnimation);
   const {
     xAxis: xAxes
   } = useXAxes();
@@ -59,86 +61,22 @@ function BarPlot(props) {
     completedData,
     masksData
   } = useBarPlotData(useDrawingArea(), xAxes, yAxes);
-  const withoutBorderRadius = !borderRadius || borderRadius <= 0;
   const classes = useUtilityClasses();
+  const BarElementPlot = renderer === 'svg-batch' ? BatchBarPlot : IndividualBarPlot;
   return /*#__PURE__*/_jsxs(BarPlotRoot, {
     className: classes.root,
-    children: [!withoutBorderRadius && masksData.map(({
-      id,
-      x,
-      y,
-      xOrigin,
-      yOrigin,
-      width,
-      height,
-      hasPositive,
-      hasNegative,
-      layout
-    }) => {
-      return /*#__PURE__*/_jsx(BarClipPath, {
-        maskId: id,
-        borderRadius: borderRadius,
-        hasNegative: hasNegative,
-        hasPositive: hasPositive,
-        layout: layout,
-        x: x,
-        y: y,
-        xOrigin: xOrigin,
-        yOrigin: yOrigin,
-        width: width,
-        height: height,
-        skipAnimation: skipAnimation ?? false
-      }, id);
-    }), completedData.map(({
-      seriesId,
-      layout,
-      xOrigin,
-      yOrigin,
-      data
-    }) => {
-      return /*#__PURE__*/_jsx("g", {
-        "data-series": seriesId,
-        className: classes.series,
-        children: data.map(({
-          dataIndex,
-          color,
-          maskId,
-          x,
-          y,
-          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);
-    }), completedData.map(processedSeries => /*#__PURE__*/_jsx(BarLabelPlot, _extends({
+    children: [/*#__PURE__*/_jsx(BarElementPlot, _extends({
+      completedData: completedData,
+      masksData: masksData
+      /* The batch renderer doesn't animate bars after the initial mount. Providing skipAnimation was causing an issue
+       * where bars would animate again after a zoom interaction because skipAnimation would change from true to false. */,
+      skipAnimation: renderer === 'svg-batch' ? batchSkipAnimation : skipAnimation,
+      onItemClick:
+      /* `onItemClick` accepts a `MouseEvent` when the renderer is "svg-batch" and a `React.MouseEvent` otherwise,
+       * so we need this cast to prevent TypeScript from complaining. */
+      onItemClick,
+      borderRadius: borderRadius
+    }, other)), completedData.map(processedSeries => /*#__PURE__*/_jsx(BarLabelPlot, _extends({
       className: classes.seriesLabels,
       processedSeries: processedSeries,
       skipAnimation: skipAnimation,
@@ -152,6 +90,7 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
+   * @deprecated Use `barLabel` in the chart series instead.
    * If provided, the function will be used to format the label of the bar.
    * It can be set to 'value' to display the current value.
    * @param {BarItem} item The item to format.
@@ -159,11 +98,6 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
    * @returns {string} The formatted label.
    */
   barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
-  /**
-   * The placement of the bar label.
-   * It controls whether the label is rendered inside or outside the bar.
-   */
-  barLabelPlacement: PropTypes.oneOf(['outside', 'inside']),
   /**
    * Defines the border radius of the bar element.
    */
@@ -174,6 +108,15 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer: PropTypes.oneOf(['svg-batch', 'svg-single']),
   /**
    * If `true`, animations are skipped.
    * @default undefined

package/esm/BarChart/BatchBarPlot/BarGroup.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface BarGroupProps extends React.HTMLAttributes<SVGGElement> {
+  skipAnimation: boolean;
+  layout: 'horizontal' | 'vertical' | undefined;
+  xOrigin: number;
+  yOrigin: number;
+}
+export declare function BarGroup({
+  skipAnimation,
+  layout,
+  xOrigin,
+  yOrigin,
+  ...props
+}: BarGroupProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/BarChart/BatchBarPlot/BarGroup.js

@@ -0,0 +1,134 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["skipAnimation", "layout", "xOrigin", "yOrigin"],
+  _excluded2 = ["children", "layout", "xOrigin", "yOrigin"];
+import { styled } from '@mui/material/styles';
+import * as React from 'react';
+import useId from '@mui/utils/useId';
+import { useStore } from "../../internals/store/useStore.js";
+import { selectorChartDrawingArea } from "../../internals/plugins/corePlugins/useChartDimensions/index.js";
+import { ANIMATION_DURATION_MS } from "../../internals/animation/animation.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PathGroup = styled('g')({
+  '&[data-faded="true"]': {
+    opacity: 0.3
+  },
+  '& path': {
+    /* The browser must do hit testing to know which element a pointer is interacting with.
+     * With many data points, we create many paths causing significant time to be spent in the hit test phase.
+     * To fix this issue, we disable pointer events for the descendant paths.
+     *
+     * Ideally, users should be able to override this in case they need pointer events to be enabled,
+     * but it can affect performance negatively, especially with many data points. */
+    pointerEvents: 'none'
+  }
+});
+export function BarGroup(_ref) {
+  let {
+      skipAnimation,
+      layout,
+      xOrigin,
+      yOrigin
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  if (skipAnimation) {
+    return /*#__PURE__*/_jsx(PathGroup, _extends({}, props));
+  }
+  return /*#__PURE__*/_jsx(AnimatedGroup, _extends({}, props, {
+    layout: layout,
+    xOrigin: xOrigin,
+    yOrigin: yOrigin
+  }));
+}
+const AnimatedRect = styled('rect')({
+  '@keyframes scaleInX': {
+    from: {
+      transform: 'scaleX(0)'
+    },
+    to: {
+      transform: 'scaleX(1)'
+    }
+  },
+  '@keyframes scaleInY': {
+    from: {
+      transform: 'scaleY(0)'
+    },
+    to: {
+      transform: 'scaleY(1)'
+    }
+  },
+  animationDuration: `${ANIMATION_DURATION_MS}ms`,
+  animationFillMode: 'forwards',
+  '&[data-orientation="horizontal"]': {
+    animationName: 'scaleInX'
+  },
+  '&[data-orientation="vertical"]': {
+    animationName: 'scaleInY'
+  }
+});
+function AnimatedGroup(_ref2) {
+  let {
+      children,
+      layout,
+      xOrigin,
+      yOrigin
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const store = useStore();
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const clipPathId = useId();
+  const animateChildren = [];
+  if (layout === 'horizontal') {
+    animateChildren.push(/*#__PURE__*/_jsx(AnimatedRect, {
+      "data-orientation": "horizontal",
+      x: drawingArea.left,
+      width: xOrigin - drawingArea.left,
+      y: drawingArea.top,
+      height: drawingArea.height,
+      style: {
+        transformOrigin: `${xOrigin}px ${drawingArea.top + drawingArea.height / 2}px`
+      }
+    }, "left"));
+    animateChildren.push(/*#__PURE__*/_jsx(AnimatedRect, {
+      "data-orientation": "horizontal",
+      x: xOrigin,
+      width: drawingArea.left + drawingArea.width - xOrigin,
+      y: drawingArea.top,
+      height: drawingArea.height,
+      style: {
+        transformOrigin: `${xOrigin}px ${drawingArea.top + drawingArea.height / 2}px`
+      }
+    }, "right"));
+  } else {
+    animateChildren.push(/*#__PURE__*/_jsx(AnimatedRect, {
+      "data-orientation": "vertical",
+      x: drawingArea.left,
+      width: drawingArea.width,
+      y: drawingArea.top,
+      height: yOrigin - drawingArea.top,
+      style: {
+        transformOrigin: `${drawingArea.left + drawingArea.width / 2}px ${yOrigin}px`
+      }
+    }, "top"));
+    animateChildren.push(/*#__PURE__*/_jsx(AnimatedRect, {
+      "data-orientation": "vertical",
+      x: drawingArea.left,
+      width: drawingArea.width,
+      y: yOrigin,
+      height: drawingArea.top + drawingArea.height - yOrigin,
+      style: {
+        transformOrigin: `${drawingArea.left + drawingArea.width / 2}px ${yOrigin}px`
+      }
+    }, "bottom"));
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx("clipPath", {
+      id: clipPathId,
+      children: animateChildren
+    }), /*#__PURE__*/_jsx(PathGroup, _extends({
+      clipPath: `url(#${clipPathId})`
+    }, props, {
+      children: children
+    }))]
+  });
+}

package/esm/BarChart/BatchBarPlot/BatchBarPlot.d.ts

@@ -0,0 +1,12 @@
+import type { BarItemIdentifier } from "../../models/index.js";
+import { type IndividualBarPlotProps } from "../IndividualBarPlot.js";
+interface BatchBarPlotProps extends Omit<IndividualBarPlotProps, 'onItemClick'> {
+  onItemClick?: (event: MouseEvent, barItemIdentifier: BarItemIdentifier) => void;
+}
+export declare function BatchBarPlot({
+  completedData,
+  borderRadius,
+  onItemClick,
+  skipAnimation
+}: BatchBarPlotProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/BarChart/BatchBarPlot/BatchBarPlot.js

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { useSvgRef } from "../../hooks/index.js";
+import { useUtilityClasses } from "../barClasses.js";
+import { useChartContext } from "../../context/ChartProvider/useChartContext.js";
+import { selectorChartIsSeriesFaded, selectorChartIsSeriesHighlighted, selectorChartSeriesHighlightedItem, selectorChartSeriesUnfadedItem } from "../../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { useRegisterItemClickHandlers } from "../useRegisterItemClickHandlers.js";
+import { createPath, useCreateBarPaths } from "./useCreateBarPaths.js";
+import { BarGroup } from "./BarGroup.js";
+import { useRegisterPointerInteractions } from "../../internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.js";
+import { selectorBarItemAtPosition } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function BatchBarPlot({
+  completedData,
+  borderRadius = 0,
+  onItemClick,
+  skipAnimation = false
+}) {
+  const prevCursorRef = React.useRef(null);
+  const svgRef = useSvgRef();
+  const onItemEnter = onItemClick ? () => {
+    const svg = svgRef.current;
+    if (!svg) {
+      return;
+    }
+    if (prevCursorRef.current == null) {
+      prevCursorRef.current = svg.style.cursor;
+      // eslint-disable-next-line react-compiler/react-compiler
+      svg.style.cursor = 'pointer';
+    }
+  } : undefined;
+  const onItemLeave = onItemClick ? () => {
+    const svg = svgRef.current;
+    if (!svg) {
+      return;
+    }
+    if (prevCursorRef.current != null) {
+      svg.style.cursor = prevCursorRef.current;
+      prevCursorRef.current = null;
+    }
+  } : undefined;
+  useRegisterPointerInteractions(selectorBarItemAtPosition, onItemEnter, onItemLeave);
+  useRegisterItemClickHandlers(onItemClick);
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: completedData.map(series => /*#__PURE__*/_jsx(SeriesBatchPlot, {
+      series: series,
+      borderRadius: borderRadius,
+      skipAnimation: skipAnimation
+    }, series.seriesId))
+  });
+}
+const MemoFadedHighlightedBars = /*#__PURE__*/React.memo(FadedHighlightedBars);
+if (process.env.NODE_ENV !== "production") MemoFadedHighlightedBars.displayName = "MemoFadedHighlightedBars";
+function SeriesBatchPlot({
+  series,
+  borderRadius,
+  skipAnimation
+}) {
+  const classes = useUtilityClasses();
+  const {
+    store
+  } = useChartContext();
+  const isSeriesHighlighted = store.use(selectorChartIsSeriesHighlighted, series.seriesId);
+  const isSeriesFaded = store.use(selectorChartIsSeriesFaded, series.seriesId);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(BarGroup, {
+      className: classes.series,
+      "data-series": series.seriesId,
+      layout: series.layout,
+      xOrigin: series.xOrigin,
+      yOrigin: series.yOrigin,
+      skipAnimation: skipAnimation,
+      "data-faded": isSeriesFaded || undefined,
+      "data-highlighted": isSeriesHighlighted || undefined,
+      children: /*#__PURE__*/_jsx(BatchBarSeriesPlot, {
+        processedSeries: series,
+        borderRadius: borderRadius
+      })
+    }), /*#__PURE__*/_jsx(MemoFadedHighlightedBars, {
+      processedSeries: series,
+      borderRadius: borderRadius
+    })]
+  });
+}
+function BatchBarSeriesPlot({
+  processedSeries,
+  borderRadius
+}) {
+  const paths = useCreateBarPaths(processedSeries, borderRadius);
+  const children = [];
+  let i = 0;
+  for (const [fill, dArray] of paths.entries()) {
+    for (const d of dArray) {
+      children.push(/*#__PURE__*/_jsx("path", {
+        fill: fill,
+        d: d
+      }, i));
+      i += 1;
+    }
+  }
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: children
+  });
+}
+function FadedHighlightedBars({
+  processedSeries,
+  borderRadius
+}) {
+  const {
+    store
+  } = useChartContext();
+  const seriesHighlightedDataIndex = store.use(selectorChartSeriesHighlightedItem, processedSeries.seriesId);
+  const seriesUnfadedDataIndex = store.use(selectorChartSeriesUnfadedItem, processedSeries.seriesId);
+  const seriesHighlightedItem = seriesHighlightedDataIndex != null ? processedSeries.data.find(v => v.dataIndex === seriesHighlightedDataIndex) || null : null;
+  const seriesUnfadedItem = seriesUnfadedDataIndex != null ? processedSeries.data.find(v => v.dataIndex === seriesUnfadedDataIndex) || null : null;
+  const siblings = [];
+  if (seriesHighlightedItem != null) {
+    siblings.push(/*#__PURE__*/_jsx("path", {
+      fill: seriesHighlightedItem.color,
+      filter: "brightness(120%)",
+      "data-highlighted": true,
+      d: createPath(seriesHighlightedItem, borderRadius)
+    }, `highlighted-${processedSeries.seriesId}`));
+  }
+  if (seriesUnfadedItem != null) {
+    siblings.push(/*#__PURE__*/_jsx("path", {
+      fill: seriesUnfadedItem.color,
+      d: createPath(seriesUnfadedItem, borderRadius)
+    }, `unfaded-${seriesUnfadedItem.seriesId}`));
+  }
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: siblings
+  });
+}

package/esm/BarChart/BatchBarPlot/index.d.ts

@@ -0,0 +1 @@
+export { BatchBarPlot } from "./BatchBarPlot.js";

package/esm/BarChart/BatchBarPlot/index.js

@@ -0,0 +1 @@
+export { BatchBarPlot } from "./BatchBarPlot.js";

package/esm/BarChart/BatchBarPlot/useCreateBarPaths.d.ts

@@ -0,0 +1,8 @@
+import type { ProcessedBarData, ProcessedBarSeriesData } from "../types.js";
+export declare function createPath(barData: ProcessedBarData, borderRadius: number): string;
+/**
+ * Hook that creates bar paths for a given series data. Used by the batch bar renderer.
+ * @param seriesData
+ * @param borderRadius
+ */
+export declare function useCreateBarPaths(seriesData: ProcessedBarSeriesData, borderRadius: number): Map<string, string[]>;

package/esm/BarChart/BatchBarPlot/useCreateBarPaths.js

@@ -0,0 +1,46 @@
+import { appendAtKey } from "../../internals/appendAtKey.js";
+const MAX_POINTS_PER_PATH = 1000;
+function generateBarPath(x, y, width, height, topLeftBorderRadius, topRightBorderRadius, bottomRightBorderRadius, bottomLeftBorderRadius) {
+  const tLBR = Math.min(topLeftBorderRadius, width / 2, height / 2);
+  const tRBR = Math.min(topRightBorderRadius, width / 2, height / 2);
+  const bRBR = Math.min(bottomRightBorderRadius, width / 2, height / 2);
+  const bLBR = Math.min(bottomLeftBorderRadius, width / 2, height / 2);
+  return `M${x + tLBR},${y}
+   h${width - tLBR - tRBR}
+   a${tRBR},${tRBR} 0 0 1 ${tRBR},${tRBR}
+   v${height - tRBR - bRBR}
+   a${bRBR},${bRBR} 0 0 1 -${bRBR},${bRBR}
+   h-${width - bRBR - bLBR}
+   a${bLBR},${bLBR} 0 0 1 -${bLBR},-${bLBR}
+   v-${height - bLBR - tLBR}
+   a${tLBR},${tLBR} 0 0 1 ${tLBR},-${tLBR}
+   Z`;
+}
+export function createPath(barData, borderRadius) {
+  return generateBarPath(barData.x, barData.y, barData.width, barData.height, barData.borderRadiusSide === 'left' || barData.borderRadiusSide === 'top' ? borderRadius : 0, barData.borderRadiusSide === 'right' || barData.borderRadiusSide === 'top' ? borderRadius : 0, barData.borderRadiusSide === 'right' || barData.borderRadiusSide === 'bottom' ? borderRadius : 0, barData.borderRadiusSide === 'left' || barData.borderRadiusSide === 'bottom' ? borderRadius : 0);
+}
+
+/**
+ * Hook that creates bar paths for a given series data. Used by the batch bar renderer.
+ * @param seriesData
+ * @param borderRadius
+ */
+export function useCreateBarPaths(seriesData, borderRadius) {
+  const paths = new Map();
+  const temporaryPaths = new Map();
+  for (let j = 0; j < seriesData.data.length; j += 1) {
+    const barData = seriesData.data[j];
+    const pathString = createPath(barData, borderRadius);
+    const tempPath = appendAtKey(temporaryPaths, barData.color, pathString);
+    if (tempPath.length >= MAX_POINTS_PER_PATH) {
+      appendAtKey(paths, barData.color, tempPath.join(''));
+      temporaryPaths.delete(barData.color);
+    }
+  }
+  for (const [fill, tempPath] of temporaryPaths.entries()) {
+    if (tempPath.length > 0) {
+      appendAtKey(paths, fill, tempPath.join(''));
+    }
+  }
+  return paths;
+}

package/esm/BarChart/FocusedBar.js

@@ -19,10 +19,14 @@ export function FocusedBar(props) {
     yAxis,
     yAxisIds
   } = useYAxes();
-  if (focusedItem === null || focusedItem.seriesType !== 'bar' || !barSeries) {
+  if (focusedItem === null || focusedItem.type !== 'bar' || !barSeries) {
+    return null;
+  }
+  const series = barSeries.series[focusedItem.seriesId];
+  if (series.data[focusedItem.dataIndex] == null) {
+    // Handle missing data
     return null;
   }
-  const series = barSeries?.series[focusedItem.seriesId];
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
   const xAxisConfig = xAxis[xAxisId];

package/esm/BarChart/IndividualBarPlot.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { type BarPlotSlotProps, type BarPlotSlots } from "./BarPlot.js";
+import { type BarItemIdentifier } from "../models/index.js";
+import { type MaskData, type ProcessedBarSeriesData } from "./types.js";
+export interface IndividualBarPlotProps {
+  completedData: ProcessedBarSeriesData[];
+  masksData: MaskData[];
+  borderRadius?: number;
+  skipAnimation?: boolean;
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void;
+  slotProps?: BarPlotSlotProps;
+  slots?: BarPlotSlots;
+}
+export declare function IndividualBarPlot({
+  completedData,
+  masksData,
+  borderRadius,
+  onItemClick,
+  skipAnimation,
+  ...other
+}: IndividualBarPlotProps): import("react/jsx-runtime").JSX.Element;

package/esm/BarChart/IndividualBarPlot.js

@@ -0,0 +1,98 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["completedData", "masksData", "borderRadius", "onItemClick", "skipAnimation"];
+import * as React from 'react';
+import { BarElement } from "./BarElement.js";
+import { useUtilityClasses } from "./barClasses.js";
+import { BarClipPath } from "./BarClipPath.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function IndividualBarPlot(_ref) {
+  let {
+      completedData,
+      masksData,
+      borderRadius,
+      onItemClick,
+      skipAnimation
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const classes = useUtilityClasses();
+  const withoutBorderRadius = !borderRadius || borderRadius <= 0;
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [!withoutBorderRadius && masksData.map(({
+      id,
+      x,
+      y,
+      xOrigin,
+      yOrigin,
+      width,
+      height,
+      hasPositive,
+      hasNegative,
+      layout
+    }) => {
+      return /*#__PURE__*/_jsx(BarClipPath, {
+        maskId: id,
+        borderRadius: borderRadius,
+        hasNegative: hasNegative,
+        hasPositive: hasPositive,
+        layout: layout,
+        x: x,
+        y: y,
+        xOrigin: xOrigin,
+        yOrigin: yOrigin,
+        width: width,
+        height: height,
+        skipAnimation: skipAnimation ?? false
+      }, id);
+    }), completedData.map(({
+      seriesId,
+      layout,
+      xOrigin,
+      yOrigin,
+      data
+    }) => {
+      return /*#__PURE__*/_jsx("g", {
+        "data-series": seriesId,
+        className: classes.series,
+        children: data.map(({
+          dataIndex,
+          color,
+          maskId,
+          x,
+          y,
+          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);
+    })]
+  });
+}

package/esm/BarChart/seriesConfig/bar/getSeriesWithDefaultValues.d.ts

@@ -9,7 +9,7 @@ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'ba
   layout?: "horizontal" | "vertical";
   stackOffset?: import("../../../index.js").StackOffsetType;
   minBarSize?: number;
-  barLabel?: "value" | ((item: import("../../index.js").BarItem, context: import("../../index.js").BarLabelContext) => string | null | undefined);
+  barLabel?: "value" | ((item: import("@mui/x-charts/BarChart").BarItem, context: import("@mui/x-charts/BarChart").BarLabelContext) => string | null | undefined);
   barLabelPlacement?: "center" | "outside";
   valueFormatter?: import("../../../internals/index.js").SeriesValueFormatter<number | null> | undefined;
   highlightScope?: import("../../../index.js").HighlightScope;