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

package/hooks/useMounted.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMounted = useMounted;
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function useMounted(defer = false) {
+  const [mountedState, setMountedState] = React.useState(false);
+  (0, _useEnhancedEffect.default)(() => {
+    if (!defer) {
+      setMountedState(true);
+    }
+  }, [defer]);
+  React.useEffect(() => {
+    if (defer) {
+      setMountedState(true);
+    }
+  }, [defer]);
+  return mountedState;
+}

package/hooks/useReducedMotion.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 declare const useReducedMotion: () => void;

package/hooks/useReducedMotion.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReducedMotion = void 0;
+var _web = require("@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
+ */
+const useReducedMotion = () => {
+  // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13
+
+  (0, _web.useIsomorphicLayoutEffect)(() => {
+    const mql = window.matchMedia('(prefers-reduced-motion)');
+    const handleMediaChange = e => {
+      _web.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 () => {
+      mql.removeEventListener('change', handleMediaChange);
+    };
+  }, []);
+};
+exports.useReducedMotion = useReducedMotion;

package/hooks/useScale.d.ts

@@ -6,5 +6,5 @@ import { D3Scale } from '../models/axis';
  * @returns (value: any) => number
  */
 export declare function getValueToPositionMapper(scale: D3Scale): (value: any) => number;
-export declare function useXScale(identifier?: number | string): import("d3-scale").ScaleBand<any> | import("d3-scale").ScalePoint<any> | import("d3-scale").ScaleLogarithmic<any, any, never> | import("d3-scale").ScalePower<any, any, never> | import("d3-scale").ScaleTime<any, any, never> | import("d3-scale").ScaleLinear<any, any, never>;
-export declare function useYScale(identifier?: number | string): import("d3-scale").ScaleBand<any> | import("d3-scale").ScalePoint<any> | import("d3-scale").ScaleLogarithmic<any, any, never> | import("d3-scale").ScalePower<any, any, never> | import("d3-scale").ScaleTime<any, any, never> | import("d3-scale").ScaleLinear<any, any, never>;
+export declare function useXScale(identifier?: number | string): import("d3-scale").ScaleBand<any> | import("d3-scale").ScalePoint<any> | import("d3-scale").ScaleLinear<any, any, never> | import("d3-scale").ScaleTime<any, any, never> | import("d3-scale").ScaleLogarithmic<any, any, never> | import("d3-scale").ScalePower<any, any, never>;
+export declare function useYScale(identifier?: number | string): import("d3-scale").ScaleBand<any> | import("d3-scale").ScalePoint<any> | import("d3-scale").ScaleLinear<any, any, never> | import("d3-scale").ScaleTime<any, any, never> | import("d3-scale").ScaleLogarithmic<any, any, never> | import("d3-scale").ScalePower<any, any, never>;

package/hooks/useScale.js

@@ -9,8 +9,8 @@ exports.useYScale = useYScale;
 var React = _interopRequireWildcard(require("react"));
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _isBandScale = require("../internals/isBandScale");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * For a given scale return a function that map value to their position.
  * Usefull when dealing with specific scale such as band.

package/hooks/useTicks.d.ts

@@ -17,21 +17,30 @@ export interface TickParams {
      * Not supported by categorical axis (band, points).
      */
     tickNumber?: number;
+    /**
+     * Defines which ticks are displayed. Its value can be:
+     * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+     * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property.
+     * - an array containing the values where ticks should be displayed.
+     * @default 'auto'
+     */
+    tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
 }
 export declare function getTickNumber(params: TickParams & {
     range: any[];
     domain: any[];
 }): number;
+export type TickItemType = {
+    /**
+     * This property is undefined only if it's the tick closing the last band
+     */
+    value?: any;
+    formattedValue?: string;
+    offset: number;
+    labelOffset: number;
+};
 declare function useTicks(options: {
     scale: D3Scale;
     valueFormatter?: (value: any) => string;
-} & Pick<TickParams, 'tickNumber'>): {
-    formattedValue: any;
-    offset: number;
-    labelOffset: number;
-}[] | {
-    formattedValue: string;
-    offset: any;
-    labelOffset: number;
-}[];
+} & Pick<TickParams, 'tickNumber' | 'tickInterval'>): TickItemType[];
 export default useTicks;

package/hooks/useTicks.js

@@ -7,8 +7,8 @@ exports.default = void 0;
 exports.getTickNumber = getTickNumber;
 var React = _interopRequireWildcard(require("react"));
 var _isBandScale = require("../internals/isBandScale");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getTickNumber(params) {
   const {
     tickMaxStep,
@@ -26,7 +26,8 @@ function useTicks(options) {
   const {
     scale,
     tickNumber,
-    valueFormatter
+    valueFormatter,
+    tickInterval
   } = options;
   return React.useMemo(() => {
     // band scale
@@ -35,7 +36,8 @@ function useTicks(options) {
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
         return [...domain.map(value => ({
-          formattedValue: valueFormatter?.(value) ?? value,
+          value,
+          formattedValue: valueFormatter?.(value) ?? `${value}`,
           offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
           labelOffset: scale.step() / 2
         })), {
@@ -46,17 +48,21 @@ function useTicks(options) {
       }
 
       // scale type = 'point'
-      return domain.map(value => ({
-        formattedValue: valueFormatter?.(value) ?? value,
+      const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+      return filteredDomain.map(value => ({
+        value,
+        formattedValue: valueFormatter?.(value) ?? `${value}`,
         offset: scale(value),
         labelOffset: 0
       }));
     }
-    return scale.ticks(tickNumber).map(value => ({
+    const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
+    return ticks.map(value => ({
+      value,
       formattedValue: valueFormatter?.(value) ?? scale.tickFormat(tickNumber)(value),
       offset: scale(value),
       labelOffset: 0
     }));
-  }, [tickNumber, scale, valueFormatter]);
+  }, [tickNumber, scale, valueFormatter, tickInterval]);
 }
 var _default = exports.default = useTicks;

package/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/internals/components/ChartsText.d.ts

@@ -1,4 +1,13 @@
 import * as React from 'react';
+export type ChartsTextBaseline = 'hanging' | 'central' | 'auto';
+export interface ChartsTextStyle extends React.CSSProperties {
+    angle?: number;
+    /**
+     * The text baseline
+     * @default 'central'
+     */
+    dominantBaseline?: ChartsTextBaseline;
+}
 interface GetWordsByLinesParams {
     /**
      * Text displayed.
@@ -7,24 +16,18 @@ interface GetWordsByLinesParams {
     /**
      * Style applied to text elements.
      */
-    style?: React.SVGAttributes<'text'>['style'];
+    style?: ChartsTextStyle;
     /**
      * If true, the line width is computed.
      * @default false
      */
     needsComputation?: boolean;
 }
-export type ChartsTextBaseline = 'hanging' | 'central' | 'auto';
-export interface ChartsTextProps extends Omit<React.SVGTextElementAttributes<SVGTextElement>, 'width' | 'ref'>, GetWordsByLinesParams {
+export interface ChartsTextProps extends Omit<React.SVGTextElementAttributes<SVGTextElement>, 'width' | 'ref' | 'style' | 'dominantBaseline'>, GetWordsByLinesParams {
     /**
      * Height of a text line (in `em`).
      */
     lineHeight?: number;
-    /**
-     * The text baseline
-     * @default 'central'
-     */
-    dominantBaseline?: ChartsTextBaseline;
     ownerState?: any;
 }
 export declare function getWordsByLines({ style, needsComputation, text }: GetWordsByLinesParams): any[];

package/internals/components/ChartsText.js

@@ -11,9 +11,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _domUtils = require("../domUtils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["x", "y", "textAnchor", "dominantBaseline", "style", "text", "ownerState"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const _excluded = ["x", "y", "style", "text", "ownerState"],
+  _excluded2 = ["angle", "textAnchor", "dominantBaseline"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getWordsByLines({
   style,
   needsComputation,
@@ -30,12 +31,17 @@ function ChartsText(props) {
   const {
       x,
       y,
-      textAnchor = 'start',
-      dominantBaseline = 'central',
-      style,
+      style: styleProps,
       text
     } = props,
     textProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const _ref = styleProps ?? {},
+    {
+      angle,
+      textAnchor,
+      dominantBaseline
+    } = _ref,
+    style = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
   const wordsByLines = React.useMemo(() => getWordsByLines({
     style,
     needsComputation: text.includes('\n'),
@@ -53,19 +59,17 @@ function ChartsText(props) {
       startDy = (wordsByLines.length - 1) * -wordsByLines[0].height;
       break;
   }
-
-  // const transforms = [];
+  const 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(${angle}, ${x}, ${y})`);
+  }
+  if (transforms.length) {
+    textProps.transform = transforms.join(' ');
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", (0, _extends2.default)({}, textProps, {
     x: x,
     y: y,

package/internals/defaultizeColor.d.ts

@@ -57,7 +57,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     area?: boolean | undefined;
     label?: string | undefined;
     curve?: import("../models/seriesType").CurveType | undefined;
-    showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams) => boolean) | undefined;
+    showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams<number | Date>) => boolean) | undefined;
     disableHighlight?: boolean | undefined;
     id?: string | undefined;
     color: string;

package/internals/domUtils.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 /**
  *
  * @param style React style object

package/internals/geometry.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 declare function getMinXTranslation(width: number, height: number, angle?: number): number;

package/internals/geometry.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMinXTranslation = getMinXTranslation;
+const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle as perfectly horizontal/vertical
+
+let 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.
+ */
+function getMinXTranslation(width, height, angle = 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° or smaller than -90° 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'));
+    }
+  }
+  const 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;
+  }
+  const radAngle = standardAngle * Math.PI / 180;
+  const angleSwich = Math.atan2(height, width);
+  if (radAngle < angleSwich) {
+    return width / Math.cos(radAngle);
+  }
+  return height / Math.sin(radAngle);
+}

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,
@@ -123,11 +136,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,
@@ -157,11 +174,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,
@@ -200,11 +221,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,
@@ -229,6 +254,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 {}
@@ -262,11 +292,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,
@@ -291,6 +325,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']),
@@ -299,6 +334,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,
@@ -317,6 +355,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']),
@@ -325,6 +364,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