@mui/x-charts 6.0.0-alpha.8 → 6.18.0

package/legacy/internals/domUtils.js

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+// DOM utils taken from
+// https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
+
+var isSsr = function isSsr() {
+  return !(typeof window !== 'undefined' && window.document && window.setTimeout);
+};
+var stringCache = {
+  widthCache: {},
+  cacheCount: 0
+};
+var MAX_CACHE_NUM = 2000;
+var SPAN_STYLE = {
+  position: 'absolute',
+  top: '-20000px',
+  left: 0,
+  padding: 0,
+  margin: 0,
+  border: 'none',
+  whiteSpace: 'pre'
+};
+var STYLE_LIST = ['minWidth', 'maxWidth', 'width', 'minHeight', 'maxHeight', 'height', 'top', 'left', 'fontSize', 'padding', 'margin', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom'];
+var MEASUREMENT_SPAN_ID = 'mui_measurement_span';
+
+/**
+ *
+ * @param name CSS property name
+ * @param value
+ * @returns add 'px' for distance properties
+ */
+function autoCompleteStyle(name, value) {
+  if (STYLE_LIST.indexOf(name) >= 0 && value === +value) {
+    return "".concat(value, "px");
+  }
+  return value;
+}
+
+/**
+ *
+ * @param text camelcase css property
+ * @returns css property
+ */
+function camelToMiddleLine(text) {
+  var strs = text.split('');
+  var formatStrs = strs.reduce(function (result, entry) {
+    if (entry === entry.toUpperCase()) {
+      return [].concat(_toConsumableArray(result), ['-', entry.toLowerCase()]);
+    }
+    return [].concat(_toConsumableArray(result), [entry]);
+  }, []);
+  return formatStrs.join('');
+}
+
+/**
+ *
+ * @param style React style object
+ * @returns CSS styling string
+ */
+export var getStyleString = function getStyleString(style) {
+  return Object.keys(style).sort().reduce(function (result, s) {
+    return "".concat(result).concat(camelToMiddleLine(s), ":").concat(autoCompleteStyle(s, style[s]), ";");
+  }, '');
+};
+
+/**
+ *
+ * @param text The string to estimate
+ * @param style The style applied
+ * @returns width and height of the text
+ */
+export var getStringSize = function getStringSize(text) {
+  var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (text === undefined || text === null || isSsr()) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+  var str = "".concat(text);
+  var styleString = getStyleString(style);
+  var cacheKey = "".concat(str, "-").concat(styleString);
+  if (stringCache.widthCache[cacheKey]) {
+    return stringCache.widthCache[cacheKey];
+  }
+  try {
+    var measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
+    if (measurementSpan === null) {
+      measurementSpan = document.createElement('span');
+      measurementSpan.setAttribute('id', MEASUREMENT_SPAN_ID);
+      measurementSpan.setAttribute('aria-hidden', 'true');
+      document.body.appendChild(measurementSpan);
+    }
+    // Need to use CSS Object Model (CSSOM) to be able to comply with Content Security Policy (CSP)
+    // https://en.wikipedia.org/wiki/Content_Security_Policy
+    var measurementSpanStyle = _extends({}, SPAN_STYLE, style);
+    Object.keys(measurementSpanStyle).map(function (styleKey) {
+      measurementSpan.style[camelToMiddleLine(styleKey)] = autoCompleteStyle(styleKey, measurementSpanStyle[styleKey]);
+      return styleKey;
+    });
+    measurementSpan.textContent = str;
+    var rect = measurementSpan.getBoundingClientRect();
+    var result = {
+      width: rect.width,
+      height: rect.height
+    };
+    stringCache.widthCache[cacheKey] = result;
+    if (stringCache.cacheCount + 1 > MAX_CACHE_NUM) {
+      stringCache.cacheCount = 0;
+      stringCache.widthCache = {};
+    } else {
+      stringCache.cacheCount += 1;
+    }
+    return result;
+  } catch (e) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+};

package/legacy/internals/geometry.js

@@ -0,0 +1,37 @@
+var ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle as perfectly horizontal/vertical
+
+var warnedOnce = false;
+
+/**
+ * Return the minimal translation along the x-axis to avoid overflow of a rectangle of a given width, height, and rotation.
+ * This assumes that all rectangles have the same height and angle between -90 and 90.
+ * Otherwise it would be problematic because you need the height/width of the next rectangle to do the correct computation.
+ * @param width the side along the x axis.
+ * @param height the side along the y axis.
+ * @param angle the rotation in degrees.
+ */
+export function getMinXTranslation(width, height) {
+  var angle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  if (process.env.NODE_ENV !== 'production') {
+    if (!warnedOnce && angle > 90 && angle < -90) {
+      warnedOnce = true;
+      console.warn(["MUI X: It seems you applied an angle larger than 90\xB0 or smaller than -90\xB0 to an axis text.", "This could cause some text overlapping.", "If you encounter a use case where it's needed, please open an issue."].join('\n'));
+    }
+  }
+  var standardAngle = Math.min(Math.abs(angle) % 180, Math.abs(Math.abs(angle) % 180 - 180) % 180); // Map from R to [0, 90]
+
+  if (standardAngle < ANGLE_APPROX) {
+    // It's nearly horizontal
+    return width;
+  }
+  if (standardAngle > 90 - ANGLE_APPROX) {
+    // It's nearly vertical
+    return height;
+  }
+  var radAngle = standardAngle * Math.PI / 180;
+  var angleSwich = Math.atan2(height, width);
+  if (radAngle < angleSwich) {
+    return width / Math.cos(radAngle);
+  }
+  return height / Math.sin(radAngle);
+}

package/models/axis.d.ts

@@ -2,19 +2,20 @@
 import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint } from 'd3-scale';
 import { ChartsAxisClasses } from '../ChartsAxis/axisClasses';
 import type { TickParams } from '../hooks/useTicks';
-export type D3Scale = ScaleBand<any> | ScaleLogarithmic<any, any> | ScalePoint<any> | ScalePower<any, any> | ScaleTime<any, any> | ScaleLinear<any, any>;
-export type D3ContinuouseScale = ScaleLogarithmic<any, any> | ScalePower<any, any> | ScaleTime<any, any> | ScaleLinear<any, any>;
+import { ChartsTextProps } from '../internals/components/ChartsText';
+export type D3Scale = ScaleBand<any> | ScaleLogarithmic<any, number> | ScalePoint<any> | ScalePower<any, number> | ScaleTime<any, number> | ScaleLinear<any, number>;
+export type D3ContinuouseScale = ScaleLogarithmic<any, number> | ScalePower<any, number> | ScaleTime<any, number> | ScaleLinear<any, number>;
 export interface ChartsAxisSlotsComponent {
     axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
     axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
-    axisTickLabel?: React.JSXElementConstructor<React.SVGAttributes<SVGTextElement>>;
-    axisLabel?: React.JSXElementConstructor<React.SVGAttributes<SVGTextElement>>;
+    axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+    axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
 }
 export interface ChartsAxisSlotComponentProps {
     axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
     axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
-    axisTickLabel?: Partial<React.SVGAttributes<SVGTextElement>>;
-    axisLabel?: Partial<React.SVGAttributes<SVGTextElement>>;
+    axisTickLabel?: Partial<ChartsTextProps>;
+    axisLabel?: Partial<ChartsTextProps>;
 }
 export interface ChartsAxisProps extends TickParams {
     /**
@@ -39,8 +40,24 @@ export interface ChartsAxisProps extends TickParams {
     /**
      * The font size of the axis ticks text.
      * @default 12
+     * @deprecated Consider using `tickLabelStyle.fontSize` instead.
      */
     tickFontSize?: number;
+    /**
+     * The style applied to ticks text.
+     */
+    tickLabelStyle?: ChartsTextProps['style'];
+    /**
+     * The style applied to the axis label.
+     */
+    labelStyle?: ChartsTextProps['style'];
+    /**
+     * Defines which ticks get its label displayed. Its value can be:
+     * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+     * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+     * @default 'auto'
+     */
+    tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
     /**
      * The label of the axis.
      */
@@ -48,6 +65,7 @@ export interface ChartsAxisProps extends TickParams {
     /**
      * The font size of the axis label.
      * @default 14
+     * @deprecated Consider using `labelStyle.fontSize` instead.
      */
     labelFontSize?: number;
     /**
@@ -96,13 +114,13 @@ interface AxisScaleConfig {
         /**
          * The ratio between the space allocated for padding between two categories and the category width.
          * 0 means no gap, and 1 no data.
-         * @default 0.1
+         * @default 0.2
          */
         categoryGapRatio: number;
         /**
          * The ratio between the width of a bar, and the gap between two bars.
          * 0 means no gap, and 1 no bar.
-         * @default 0
+         * @default 0.1
          */
         barGapRatio: number;
     };
@@ -151,7 +169,7 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any> = {
     hideTooltip?: boolean;
 } & Partial<ChartsXAxisProps | ChartsYAxisProps> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & TickParams;
 export type AxisDefaultized<S extends ScaleName = ScaleName, V = any> = Omit<AxisConfig<S, V>, 'scaleType'> & AxisScaleConfig[S] & {
-    ticksNumber: number;
+    tickNumber: number;
 };
 export declare function isBandScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<'band'> & {
     scaleType: 'band';

package/models/layout.d.ts

@@ -1,10 +1,11 @@
+export interface CardinalDirections<T> {
+    top?: T;
+    bottom?: T;
+    left?: T;
+    right?: T;
+}
 export type LayoutConfig = {
     width: number;
     height: number;
-    margin?: {
-        top?: number;
-        bottom?: number;
-        left?: number;
-        right?: number;
-    };
+    margin?: Partial<CardinalDirections<number>>;
 };

package/models/seriesType/line.d.ts

@@ -1,12 +1,34 @@
 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<AxisValue = number | Date> {
+    /**
+     * The item index.
+     */
+    index: number;
+    /**
+     * The x coordinate in the SVG.
+     */
+    x: number;
+    /**
+     * The y coordinate in the SVG.
+     */
+    y: number;
+    /**
+     * The item position value. It likely comes from the axis `data` property.
+     */
+    position: AxisValue;
+    /**
+     * The item value. It comes from the series `data` property.
+     */
+    value: number;
+}
 export interface LineSeriesType extends CommonSeriesType<number>, CartesianSeriesType, StackableSeriesType {
     type: 'line';
     /**
      * Data associated to the line.
      */
-    data?: number[];
+    data?: (number | null)[];
     /**
      * The key used to retrive data from the dataset.
      */
@@ -15,6 +37,22 @@ export interface LineSeriesType extends CommonSeriesType<number>, CartesianSerie
     area?: boolean;
     label?: string;
     curve?: CurveType;
+    /**
+     * Define which items of the series should display a mark.
+     * If can be a boolean that applies to all items.
+     * Or a callback that gets some item properties and returns true if the item should be displayed.
+     */
+    showMark?: boolean | ((params: ShowMarkParams) => boolean);
+    /**
+     * Do not render the line highlight item if set to `true`.
+     * @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,
@@ -115,11 +128,15 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     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,
@@ -149,33 +166,33 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     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
   }),
   margin: PropTypes.shape({
     bottom: PropTypes.number,
@@ -196,11 +213,15 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     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 +246,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 +267,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'])
   }),
   /**
@@ -256,11 +284,15 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     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,
@@ -285,6 +317,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,6 +326,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,
@@ -311,6 +347,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 +356,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