@mui/x-charts 6.0.0-alpha.15 → 6.0.0-alpha.16

package/legacy/SparkLineChart/SparkLineChart.js

@@ -15,6 +15,16 @@ var SPARKLINE_DEFAULT_MARGIN = {
   left: 5,
   right: 5
 };
+
+/**
+ * Demos:
+ *
+ * - [SparkLine](https://mui.com/x/react-charts/sparkline/)
+ *
+ * API:
+ *
+ * - [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
+ */
 var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props, ref) {
   var xAxis = props.xAxis,
     width = props.width,
@@ -201,6 +211,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.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']),
@@ -209,6 +220,9 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.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/context/CartesianContextProvider.js

@@ -256,6 +256,7 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.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']),
@@ -264,6 +265,9 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.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,
@@ -282,6 +286,7 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.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']),
@@ -290,6 +295,9 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.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/hooks/useMounted.js

@@ -0,0 +1,21 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+export function useMounted() {
+  var defer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    mountedState = _React$useState2[0],
+    setMountedState = _React$useState2[1];
+  useEnhancedEffect(function () {
+    if (!defer) {
+      setMountedState(true);
+    }
+  }, [defer]);
+  React.useEffect(function () {
+    if (defer) {
+      setMountedState(true);
+    }
+  }, [defer]);
+  return mountedState;
+}

package/legacy/hooks/useReducedMotion.js

@@ -0,0 +1,27 @@
+import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
+
+/**
+ * Returns `boolean` or `null`, used to automatically
+ * set skipAnimations to the value of the user's
+ * `prefers-reduced-motion` query.
+ *
+ * The return value, post-effect, is the value of their prefered setting
+ */
+export var useReducedMotion = function useReducedMotion() {
+  // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13
+
+  useIsomorphicLayoutEffect(function () {
+    var mql = window.matchMedia('(prefers-reduced-motion)');
+    var handleMediaChange = function handleMediaChange(e) {
+      Globals.assign({
+        // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
+        skipAnimation: e.matches || undefined
+      });
+    };
+    handleMediaChange(mql);
+    mql.addEventListener('change', handleMediaChange);
+    return function () {
+      mql.removeEventListener('change', handleMediaChange);
+    };
+  }, []);
+};

package/legacy/hooks/useTicks.js

@@ -1,3 +1,4 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import { isBandScale } from '../internals/isBandScale';
@@ -15,7 +16,8 @@ export function getTickNumber(params) {
 function useTicks(options) {
   var scale = options.scale,
     tickNumber = options.tickNumber,
-    valueFormatter = options.valueFormatter;
+    valueFormatter = options.valueFormatter,
+    tickInterval = options.tickInterval;
   return React.useMemo(function () {
     // band scale
     if (isBandScale(scale)) {
@@ -25,7 +27,8 @@ function useTicks(options) {
         return [].concat(_toConsumableArray(domain.map(function (value) {
           var _valueFormatter;
           return {
-            formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter : value,
+            value: value,
+            formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter : "".concat(value),
             offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
             labelOffset: scale.step() / 2
           };
@@ -37,23 +40,27 @@ function useTicks(options) {
       }
 
       // scale type = 'point'
-      return domain.map(function (value) {
+      var filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || _typeof(tickInterval) === 'object' && tickInterval || domain;
+      return filteredDomain.map(function (value) {
         var _valueFormatter2;
         return {
-          formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter2 : value,
+          value: value,
+          formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter2 : "".concat(value),
           offset: scale(value),
           labelOffset: 0
         };
       });
     }
-    return scale.ticks(tickNumber).map(function (value) {
+    var ticks = _typeof(tickInterval) === 'object' ? tickInterval : scale.ticks(tickNumber);
+    return ticks.map(function (value) {
       var _valueFormatter3;
       return {
+        value: value,
         formattedValue: (_valueFormatter3 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter3 : scale.tickFormat(tickNumber)(value),
         offset: scale(value),
         labelOffset: 0
       };
     });
-  }, [tickNumber, scale, valueFormatter]);
+  }, [tickNumber, scale, valueFormatter, tickInterval]);
 }
 export default useTicks;

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.15
+ * @mui/x-charts v6.0.0-alpha.16
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/components/ChartsText.js

@@ -1,6 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["x", "y", "textAnchor", "dominantBaseline", "style", "text", "ownerState"];
+var _excluded = ["x", "y", "style", "text", "ownerState"],
+  _excluded2 = ["angle", "textAnchor", "dominantBaseline"];
 import * as React from 'react';
 import { getStringSize } from '../domUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,14 +21,15 @@ export function getWordsByLines(_ref) {
 export function ChartsText(props) {
   var x = props.x,
     y = props.y,
-    _props$textAnchor = props.textAnchor,
-    textAnchor = _props$textAnchor === void 0 ? 'start' : _props$textAnchor,
-    _props$dominantBaseli = props.dominantBaseline,
-    dominantBaseline = _props$dominantBaseli === void 0 ? 'central' : _props$dominantBaseli,
-    style = props.style,
+    styleProps = props.style,
     text = props.text,
     ownerState = props.ownerState,
     textProps = _objectWithoutProperties(props, _excluded);
+  var _ref2 = styleProps != null ? styleProps : {},
+    angle = _ref2.angle,
+    textAnchor = _ref2.textAnchor,
+    dominantBaseline = _ref2.dominantBaseline,
+    style = _objectWithoutProperties(_ref2, _excluded2);
   var wordsByLines = React.useMemo(function () {
     return getWordsByLines({
       style: style,
@@ -47,19 +49,17 @@ export function ChartsText(props) {
       startDy = (wordsByLines.length - 1) * -wordsByLines[0].height;
       break;
   }
-
-  // const transforms = [];
+  var transforms = [];
   // if (scaleToFit) {
   //   const lineWidth = wordsByLines[0].width;
   //   transforms.push(`scale(${(isNumber(width as number) ? (width as number) / lineWidth : 1) / lineWidth})`);
   // }
-  // if (angle) {
-  //   transforms.push(`rotate(${angle}, ${x}, ${y})`);
-  // }
-  // if (transforms.length) {
-  //   textProps.transform = transforms.join(' ');
-  // }
-
+  if (angle) {
+    transforms.push("rotate(".concat(angle, ", ").concat(x, ", ").concat(y, ")"));
+  }
+  if (transforms.length) {
+    textProps.transform = transforms.join(' ');
+  }
   return /*#__PURE__*/_jsx("text", _extends({}, textProps, {
     x: x,
     y: y,

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

@@ -3,8 +3,8 @@ import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, S
 import { ChartsAxisClasses } from '../ChartsAxis/axisClasses';
 import type { TickParams } from '../hooks/useTicks';
 import { ChartsTextProps } from '../internals/components/ChartsText';
-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>;
+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>>;
@@ -40,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.
      */
@@ -49,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;
     /**

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.
      */

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,11 +166,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,
@@ -192,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,
@@ -221,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 {}
@@ -254,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,
@@ -283,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']),
@@ -291,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,
@@ -309,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']),
@@ -317,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