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

package/models/seriesType/line.d.ts

@@ -1,7 +1,7 @@
 import { DefaultizedProps } from '../helpers';
 import { CartesianSeriesType, CommonDefaultizedProps, CommonSeriesType, StackableSeriesType } from './common';
 export type CurveType = 'catmullRom' | 'linear' | 'monotoneX' | 'monotoneY' | 'natural' | 'step' | 'stepBefore' | 'stepAfter';
-export interface ShowMarkParams {
+export interface ShowMarkParams<AxisValue = number | Date> {
     /**
      * The item index.
      */
@@ -17,7 +17,7 @@ export interface ShowMarkParams {
     /**
      * The item position value. It likely comes from the axis `data` property.
      */
-    position: number | Date;
+    position: AxisValue;
     /**
      * The item value. It comes from the series `data` property.
      */
@@ -28,7 +28,7 @@ export interface LineSeriesType extends CommonSeriesType<number>, CartesianSerie
     /**
      * Data associated to the line.
      */
-    data?: number[];
+    data?: (number | null)[];
     /**
      * The key used to retrive data from the dataset.
      */
@@ -48,6 +48,11 @@ export interface LineSeriesType extends CommonSeriesType<number>, CartesianSerie
      * @default false
      */
     disableHighlight?: boolean;
+    /**
+     * If `true`, line and area connect points separated by `null` values.
+     * @default false
+     */
+    connectNulls?: boolean;
 }
 /**
  * An object that allows to identify a single line.

package/models/seriesType/pie.d.ts

@@ -7,7 +7,7 @@ export type PieValueType = {
     label?: string;
     color?: string;
 };
-export type DefaultizedPieValueType = PieValueType & D3PieArcDatum<any> & {
+export type DefaultizedPieValueType = PieValueType & Omit<D3PieArcDatum<any>, 'data'> & {
     color: string;
     formattedValue: string;
 };
@@ -76,6 +76,8 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
         innerRadius?: number;
         outerRadius?: number;
         cornerRadius?: number;
+        paddingAngle?: number;
+        color?: string;
     };
     /**
      * Override the arc attibutes when it is faded.
@@ -89,6 +91,8 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
         innerRadius?: number;
         outerRadius?: number;
         cornerRadius?: number;
+        paddingAngle?: number;
+        color?: string;
     };
 }
 /**

package/modern/BarChart/BarChart.js

@@ -12,6 +12,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/)
+ */
 const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
   const {
     xAxis,
@@ -31,6 +42,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     leftAxis,
     rightAxis,
     bottomAxis,
+    skipAnimation,
     children,
     slots,
     slotProps
@@ -73,7 +85,8 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
       clipPath: `url(#${clipPathId})`,
       children: /*#__PURE__*/_jsx(BarPlot, {
         slots: slots,
-        slotProps: slotProps
+        slotProps: slotProps,
+        skipAnimation: skipAnimation
       })
     }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
@@ -98,6 +111,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'])
@@ -108,18 +128,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,
@@ -131,9 +155,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']),
   /**
@@ -142,41 +178,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,
@@ -189,18 +231,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,
@@ -225,6 +271,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 {}
@@ -241,6 +292,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'])
   }),
   /**
@@ -249,18 +302,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,
@@ -272,7 +329,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,
@@ -285,6 +350,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']),
@@ -293,12 +359,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,
@@ -311,6 +384,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']),
@@ -319,6 +393,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/modern/BarChart/BarElement.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps"];
+const _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 const lineElementClasses = generateUtilityClasses('MuiBarElement', ['root']);
+export const barElementClasses = generateUtilityClasses('MuiBarElement', ['root']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -25,7 +26,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getBarElementUtilityClass, classes);
 };
-export const BarElementPath = styled('rect', {
+export const BarElementPath = styled(animated.rect, {
   name: 'MuiBarElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -46,7 +47,8 @@ export function BarElement(props) {
       color,
       highlightScope,
       slots,
-      slotProps
+      slotProps,
+      style
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const getInteractionItemProps = useInteractionItemProps(highlightScope);
@@ -81,6 +83,7 @@ export function BarElement(props) {
       seriesId: id,
       dataIndex
     }), {
+      style,
       className: classes.root
     }),
     ownerState

package/modern/BarChart/BarPlot.js

@@ -1,11 +1,14 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _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)
@@ -15,7 +18,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({
   bandWidth: W,
   numberOfGroups: N,
@@ -34,12 +36,13 @@ function getBandSize({
     offset
   };
 }
-function BarPlot(props) {
-  const seriesData = React.useContext(SeriesContext).bar;
+const useCompletedData = () => {
+  const seriesData = React.useContext(SeriesContext).bar ?? {
+    series: {},
+    stackingGroups: [],
+    seriesOrder: []
+  };
   const axisData = React.useContext(CartesianContext);
-  if (seriesData === undefined) {
-    return null;
-  }
   const {
     series,
     stackingGroups
@@ -52,66 +55,142 @@ function BarPlot(props) {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: stackingGroups.flatMap(({
-      ids: groupIds
-    }, groupIndex) => {
-      return groupIds.flatMap(seriesId => {
-        const xAxisKey = series[seriesId].xAxisKey ?? defaultXAxisId;
-        const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId;
-        const xAxisConfig = xAxis[xAxisKey];
-        const yAxisConfig = yAxis[yAxisKey];
-        const verticalLayout = series[seriesId].layout === 'vertical';
-        let baseScaleConfig;
-        if (verticalLayout) {
-          if (!isBandScaleConfig(xAxisConfig)) {
-            throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
-          }
-          if (xAxis[xAxisKey].data === undefined) {
-            throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
-          }
-          baseScaleConfig = xAxisConfig;
-        } else {
-          if (!isBandScaleConfig(yAxisConfig)) {
-            throw new Error(`Axis with id "${yAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
-          }
-          if (yAxis[yAxisKey].data === undefined) {
-            throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
-          }
-          baseScaleConfig = yAxisConfig;
+  const data = stackingGroups.flatMap(({
+    ids: groupIds
+  }, groupIndex) => {
+    return groupIds.flatMap(seriesId => {
+      const xAxisKey = series[seriesId].xAxisKey ?? defaultXAxisId;
+      const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId;
+      const xAxisConfig = xAxis[xAxisKey];
+      const yAxisConfig = yAxis[yAxisKey];
+      const verticalLayout = series[seriesId].layout === 'vertical';
+      let baseScaleConfig;
+      if (verticalLayout) {
+        if (!isBandScaleConfig(xAxisConfig)) {
+          throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
+        }
+        if (xAxis[xAxisKey].data === undefined) {
+          throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+        }
+        baseScaleConfig = xAxisConfig;
+      } else {
+        if (!isBandScaleConfig(yAxisConfig)) {
+          throw new Error(`Axis with id "${yAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
         }
-        const xScale = xAxisConfig.scale;
-        const yScale = yAxisConfig.scale;
-        const bandWidth = baseScaleConfig.scale.bandwidth();
-        const {
-          barWidth,
-          offset
-        } = getBandSize({
-          bandWidth,
-          numberOfGroups: stackingGroups.length,
-          gapRatio: baseScaleConfig.barGapRatio
-        });
-        const barOffset = groupIndex * (barWidth + offset);
-        const {
-          stackedData,
-          color
-        } = series[seriesId];
-        return stackedData.map((values, dataIndex) => {
-          const baseline = Math.min(...values);
-          const value = Math.max(...values);
-          return /*#__PURE__*/_jsx(BarElement, _extends({
-            id: seriesId,
-            dataIndex: dataIndex,
-            x: verticalLayout ? xScale(xAxis[xAxisKey].data?.[dataIndex]) + barOffset : xScale(baseline),
-            y: verticalLayout ? yScale(value) : yScale(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), `${seriesId}-${dataIndex}`);
-        });
+        if (yAxis[yAxisKey].data === undefined) {
+          throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+        }
+        baseScaleConfig = yAxisConfig;
+      }
+      const xScale = xAxisConfig.scale;
+      const yScale = yAxisConfig.scale;
+      const bandWidth = baseScaleConfig.scale.bandwidth();
+      const {
+        barWidth,
+        offset
+      } = getBandSize({
+        bandWidth,
+        numberOfGroups: stackingGroups.length,
+        gapRatio: baseScaleConfig.barGapRatio
+      });
+      const barOffset = groupIndex * (barWidth + offset);
+      const {
+        stackedData,
+        color
+      } = series[seriesId];
+      return stackedData.map((values, dataIndex) => {
+        const bottom = Math.min(...values);
+        const top = Math.max(...values);
+        return {
+          bottom,
+          top,
+          seriesId,
+          dataIndex,
+          layout: series[seriesId].layout,
+          x: verticalLayout ? xScale(xAxis[xAxisKey].data?.[dataIndex]) + barOffset : xScale(bottom),
+          y: verticalLayout ? yScale(top) : yScale(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,
+          highlightScope: series[seriesId].highlightScope
+        };
       });
-    })
+    });
+  });
+  return data;
+};
+const getOutStyle = ({
+  layout,
+  yOrigin,
+  x,
+  width,
+  y,
+  xOrigin,
+  height
+}) => _extends({}, layout === 'vertical' ? {
+  y: yOrigin,
+  x,
+  height: 0,
+  width
+} : {
+  y,
+  x: xOrigin,
+  height,
+  width: 0
+});
+const getInStyle = ({
+  x,
+  width,
+  y,
+  height
+}) => ({
+  y,
+  x,
+  height,
+  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) {
+  const completedData = useCompletedData();
+  const {
+      skipAnimation
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const transition = useTransition(completedData, {
+    keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
+    from: getOutStyle,
+    leave: getOutStyle,
+    enter: getInStyle,
+    update: getInStyle,
+    immediate: skipAnimation
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: transition((style, {
+      seriesId,
+      dataIndex,
+      color,
+      highlightScope
+    }) => /*#__PURE__*/_jsx(BarElement, _extends({
+      id: seriesId,
+      dataIndex: dataIndex,
+      highlightScope: highlightScope,
+      color: color
+    }, other, {
+      style: style
+    })))
   });
 }
 process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
@@ -119,6 +198,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/modern/BarChart/formatter.js

@@ -53,7 +53,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, v => v.toLocaleString())
+    series: defaultizeValueFormatter(completedSeries, v => v?.toLocaleString())
   };
 };
 export default formatter;

package/modern/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';
@@ -25,6 +26,8 @@ export const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContai
   } = props;
   const svgRef = React.useRef(null);
   const 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,