@mui/x-charts 6.0.0-alpha.9 → 6.18.1

package/legacy/BarChart/BarChart.js

@@ -13,6 +13,17 @@ import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Bars](https://mui.com/x/react-charts/bars/)
+ * - [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+ * - [Stacking](https://mui.com/x/react-charts/stacking/)
+ *
+ * API:
+ *
+ * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+ */
 var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
   var xAxis = props.xAxis,
     yAxis = props.yAxis,
@@ -31,6 +42,7 @@ var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     leftAxis = props.leftAxis,
     rightAxis = props.rightAxis,
     bottomAxis = props.bottomAxis,
+    skipAnimation = props.skipAnimation,
     children = props.children,
     slots = props.slots,
     slotProps = props.slotProps;
@@ -81,7 +93,8 @@ var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
       clipPath: "url(#".concat(clipPathId, ")"),
       children: /*#__PURE__*/_jsx(BarPlot, {
         slots: slots,
-        slotProps: slotProps
+        slotProps: slotProps,
+        skipAnimation: skipAnimation
       })
     }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
@@ -106,6 +119,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Object `{ x, y }` that defines how the charts highlight the mouse position along the x- and y-axes.
+   * The two properties accept the following values:
+   * - 'none': display nothing.
+   * - 'line': display a line at the current mouse position.
+   * - 'band': display a band at the current mouse position. Only available with band scale.
+   */
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
@@ -116,18 +136,22 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -139,9 +163,21 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
   dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
   disableAxisListener: PropTypes.bool,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   * @default undefined
+   */
   height: PropTypes.number,
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
@@ -150,41 +186,47 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
-    itemWidth: PropTypes.number,
-    markSize: PropTypes.number,
-    offset: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number
-    }),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    spacing: PropTypes.number
+    slots: PropTypes.object
   }),
+  /**
+   * 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.
+   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default object Depends on the charts type.
+   */
   margin: PropTypes.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,
@@ -197,18 +239,22 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -233,6 +279,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     xAxisKey: PropTypes.string,
     yAxisKey: PropTypes.string
   })).isRequired,
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -249,6 +300,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**
@@ -257,18 +310,22 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -280,7 +337,15 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     x: PropTypes.number,
     y: PropTypes.number
   }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   * @default undefined
+   */
   width: PropTypes.number,
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,
@@ -293,6 +358,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -301,12 +367,19 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,
@@ -319,6 +392,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -327,6 +401,9 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,

package/legacy/BarChart/BarElement.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps"];
+var _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps", "style"];
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import { useSlotProps } from '@mui/base/utils';
@@ -8,13 +8,14 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import { color as d3Color } from 'd3-color';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { animated } from '@react-spring/web';
 import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { InteractionContext } from '../context/InteractionProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getBarElementUtilityClass(slot) {
   return generateUtilityClass('MuiBarElement', slot);
 }
-export var lineElementClasses = generateUtilityClasses('MuiBarElement', ['root']);
+export var barElementClasses = generateUtilityClasses('MuiBarElement', ['root']);
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     id = ownerState.id;
@@ -23,7 +24,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getBarElementUtilityClass, classes);
 };
-export var BarElementPath = styled('rect', {
+export var BarElementPath = styled(animated.rect, {
   name: 'MuiBarElement',
   slot: 'Root',
   overridesResolver: function overridesResolver(_, styles) {
@@ -48,6 +49,7 @@ export function BarElement(props) {
     highlightScope = props.highlightScope,
     slots = props.slots,
     slotProps = props.slotProps,
+    style = props.style,
     other = _objectWithoutProperties(props, _excluded);
   var getInteractionItemProps = useInteractionItemProps(highlightScope);
   var _React$useContext = React.useContext(InteractionContext),
@@ -80,6 +82,7 @@ export function BarElement(props) {
       seriesId: id,
       dataIndex: dataIndex
     }), {
+      style: style,
       className: classes.root
     }),
     ownerState: ownerState

package/legacy/BarChart/BarPlot.js

@@ -1,12 +1,15 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+var _excluded = ["skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useTransition } from '@react-spring/web';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
 import { isBandScaleConfig } from '../models/axis';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -16,7 +19,6 @@ import { isBandScaleConfig } from '../models/axis';
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 function getBandSize(_ref) {
   var W = _ref.bandWidth,
     N = _ref.numberOfGroups,
@@ -34,12 +36,14 @@ function getBandSize(_ref) {
     offset: offset
   };
 }
-function BarPlot(props) {
-  var seriesData = React.useContext(SeriesContext).bar;
+var useCompletedData = function useCompletedData() {
+  var _React$useContext$bar;
+  var seriesData = (_React$useContext$bar = React.useContext(SeriesContext).bar) != null ? _React$useContext$bar : {
+    series: {},
+    stackingGroups: [],
+    seriesOrder: []
+  };
   var axisData = React.useContext(CartesianContext);
-  if (seriesData === undefined) {
-    return null;
-  }
   var series = seriesData.series,
     stackingGroups = seriesData.stackingGroups;
   var xAxis = axisData.xAxis,
@@ -48,64 +52,143 @@ function BarPlot(props) {
     yAxisIds = axisData.yAxisIds;
   var defaultXAxisId = xAxisIds[0];
   var defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: stackingGroups.flatMap(function (_ref2, groupIndex) {
-      var groupIds = _ref2.ids;
-      return groupIds.flatMap(function (seriesId) {
-        var _series$seriesId$xAxi, _series$seriesId$yAxi;
-        var xAxisKey = (_series$seriesId$xAxi = series[seriesId].xAxisKey) != null ? _series$seriesId$xAxi : defaultXAxisId;
-        var yAxisKey = (_series$seriesId$yAxi = series[seriesId].yAxisKey) != null ? _series$seriesId$yAxi : defaultYAxisId;
-        var xAxisConfig = xAxis[xAxisKey];
-        var yAxisConfig = yAxis[yAxisKey];
-        var verticalLayout = series[seriesId].layout === 'vertical';
-        var baseScaleConfig;
-        if (verticalLayout) {
-          if (!isBandScaleConfig(xAxisConfig)) {
-            throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
-          }
-          if (xAxis[xAxisKey].data === undefined) {
-            throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
-          }
-          baseScaleConfig = xAxisConfig;
-        } else {
-          if (!isBandScaleConfig(yAxisConfig)) {
-            throw new Error("Axis with id \"".concat(yAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
-          }
-          if (yAxis[yAxisKey].data === undefined) {
-            throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
-          }
-          baseScaleConfig = yAxisConfig;
+  var data = stackingGroups.flatMap(function (_ref2, groupIndex) {
+    var groupIds = _ref2.ids;
+    return groupIds.flatMap(function (seriesId) {
+      var _series$seriesId$xAxi, _series$seriesId$yAxi;
+      var xAxisKey = (_series$seriesId$xAxi = series[seriesId].xAxisKey) != null ? _series$seriesId$xAxi : defaultXAxisId;
+      var yAxisKey = (_series$seriesId$yAxi = series[seriesId].yAxisKey) != null ? _series$seriesId$yAxi : defaultYAxisId;
+      var xAxisConfig = xAxis[xAxisKey];
+      var yAxisConfig = yAxis[yAxisKey];
+      var verticalLayout = series[seriesId].layout === 'vertical';
+      var baseScaleConfig;
+      if (verticalLayout) {
+        if (!isBandScaleConfig(xAxisConfig)) {
+          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
+        }
+        if (xAxis[xAxisKey].data === undefined) {
+          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
+        }
+        baseScaleConfig = xAxisConfig;
+      } else {
+        if (!isBandScaleConfig(yAxisConfig)) {
+          throw new Error("Axis with id \"".concat(yAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
         }
-        var xScale = xAxisConfig.scale;
-        var yScale = yAxisConfig.scale;
-        var bandWidth = baseScaleConfig.scale.bandwidth();
-        var _getBandSize = getBandSize({
-            bandWidth: bandWidth,
-            numberOfGroups: stackingGroups.length,
-            gapRatio: baseScaleConfig.barGapRatio
-          }),
-          barWidth = _getBandSize.barWidth,
-          offset = _getBandSize.offset;
-        var barOffset = groupIndex * (barWidth + offset);
-        var _series$seriesId = series[seriesId],
-          stackedData = _series$seriesId.stackedData,
-          color = _series$seriesId.color;
-        return stackedData.map(function (values, dataIndex) {
-          var _xAxis$xAxisKey$data, _yAxis$yAxisKey$data;
-          var baseline = Math.min.apply(Math, _toConsumableArray(values));
-          var value = Math.max.apply(Math, _toConsumableArray(values));
-          return /*#__PURE__*/_jsx(BarElement, _extends({
-            id: seriesId,
-            dataIndex: dataIndex,
-            x: verticalLayout ? xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + barOffset : xScale(baseline),
-            y: verticalLayout ? yScale(value) : yScale((_yAxis$yAxisKey$data = yAxis[yAxisKey].data) == null ? void 0 : _yAxis$yAxisKey$data[dataIndex]) + barOffset,
-            height: verticalLayout ? Math.abs(yScale(baseline) - yScale(value)) : barWidth,
-            width: verticalLayout ? barWidth : Math.abs(xScale(baseline) - xScale(value)),
-            color: color,
-            highlightScope: series[seriesId].highlightScope
-          }, props), "".concat(seriesId, "-").concat(dataIndex));
-        });
+        if (yAxis[yAxisKey].data === undefined) {
+          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
+        }
+        baseScaleConfig = yAxisConfig;
+      }
+      var xScale = xAxisConfig.scale;
+      var yScale = yAxisConfig.scale;
+      var bandWidth = baseScaleConfig.scale.bandwidth();
+      var _getBandSize = getBandSize({
+          bandWidth: bandWidth,
+          numberOfGroups: stackingGroups.length,
+          gapRatio: baseScaleConfig.barGapRatio
+        }),
+        barWidth = _getBandSize.barWidth,
+        offset = _getBandSize.offset;
+      var barOffset = groupIndex * (barWidth + offset);
+      var _series$seriesId = series[seriesId],
+        stackedData = _series$seriesId.stackedData,
+        color = _series$seriesId.color;
+      return stackedData.map(function (values, dataIndex) {
+        var _xAxis$xAxisKey$data, _yAxis$yAxisKey$data;
+        var bottom = Math.min.apply(Math, _toConsumableArray(values));
+        var top = Math.max.apply(Math, _toConsumableArray(values));
+        return {
+          bottom: bottom,
+          top: top,
+          seriesId: seriesId,
+          dataIndex: dataIndex,
+          layout: series[seriesId].layout,
+          x: verticalLayout ? xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + barOffset : xScale(bottom),
+          y: verticalLayout ? yScale(top) : yScale((_yAxis$yAxisKey$data = yAxis[yAxisKey].data) == null ? void 0 : _yAxis$yAxisKey$data[dataIndex]) + barOffset,
+          xOrigin: xScale(0),
+          yOrigin: yScale(0),
+          height: verticalLayout ? Math.abs(yScale(bottom) - yScale(top)) : barWidth,
+          width: verticalLayout ? barWidth : Math.abs(xScale(bottom) - xScale(top)),
+          color: color,
+          highlightScope: series[seriesId].highlightScope
+        };
       });
+    });
+  });
+  return data;
+};
+var getOutStyle = function getOutStyle(_ref3) {
+  var layout = _ref3.layout,
+    yOrigin = _ref3.yOrigin,
+    x = _ref3.x,
+    width = _ref3.width,
+    y = _ref3.y,
+    xOrigin = _ref3.xOrigin,
+    height = _ref3.height;
+  return _extends({}, layout === 'vertical' ? {
+    y: yOrigin,
+    x: x,
+    height: 0,
+    width: width
+  } : {
+    y: y,
+    x: xOrigin,
+    height: height,
+    width: 0
+  });
+};
+var getInStyle = function getInStyle(_ref4) {
+  var x = _ref4.x,
+    width = _ref4.width,
+    y = _ref4.y,
+    height = _ref4.height;
+  return {
+    y: y,
+    x: x,
+    height: height,
+    width: width
+  };
+};
+
+/**
+ * Demos:
+ *
+ * - [Bars](https://mui.com/x/react-charts/bars/)
+ * - [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+ * - [Stacking](https://mui.com/x/react-charts/stacking/)
+ *
+ * API:
+ *
+ * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
+ */
+function BarPlot(props) {
+  var completedData = useCompletedData();
+  var skipAnimation = props.skipAnimation,
+    other = _objectWithoutProperties(props, _excluded);
+  var transition = useTransition(completedData, {
+    keys: function keys(bar) {
+      return "".concat(bar.seriesId, "-").concat(bar.dataIndex);
+    },
+    from: getOutStyle,
+    leave: getOutStyle,
+    enter: getInStyle,
+    update: getInStyle,
+    immediate: skipAnimation
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: transition(function (style, _ref5) {
+      var seriesId = _ref5.seriesId,
+        dataIndex = _ref5.dataIndex,
+        color = _ref5.color,
+        highlightScope = _ref5.highlightScope;
+      return /*#__PURE__*/_jsx(BarElement, _extends({
+        id: seriesId,
+        dataIndex: dataIndex,
+        highlightScope: highlightScope,
+        color: color
+      }, other, {
+        style: style
+      }));
     })
   });
 }
@@ -114,6 +197,11 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/legacy/BarChart/formatter.js

@@ -57,7 +57,7 @@ var formatter = function formatter(params, dataset) {
     seriesOrder: seriesOrder,
     stackingGroups: stackingGroups,
     series: defaultizeValueFormatter(completedSeries, function (v) {
-      return v.toLocaleString();
+      return v == null ? void 0 : v.toLocaleString();
     })
   };
 };

package/legacy/ChartContainer/index.js

@@ -3,6 +3,7 @@ import useForkRef from '@mui/utils/useForkRef';
 import { DrawingProvider } from '../context/DrawingProvider';
 import { SeriesContextProvider } from '../context/SeriesContextProvider';
 import { InteractionProvider } from '../context/InteractionProvider';
+import { useReducedMotion } from '../hooks/useReducedMotion';
 import { ChartsSurface } from '../ChartsSurface';
 import { CartesianContextProvider } from '../context/CartesianContextProvider';
 import { HighlightProvider } from '../context/HighlightProvider';
@@ -23,6 +24,8 @@ export var ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContaine
     children = props.children;
   var svgRef = React.useRef(null);
   var handleRef = useForkRef(ref, svgRef);
+  useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
+
   return /*#__PURE__*/_jsx(DrawingProvider, {
     width: width,
     height: height,