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

package/internals/components/AxisSharedComponents.js

@@ -4,90 +4,30 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartsTickLabel = exports.ChartsTick = exports.ChartsLine = exports.ChartsLabel = exports.AxisRoot = void 0;
+exports.AxisRoot = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _styles = require("@mui/material/styles");
 var _axisClasses = require("../../ChartsAxis/axisClasses");
-const AxisRoot = (0, _styles.styled)('g', {
+const AxisRoot = exports.AxisRoot = (0, _styles.styled)('g', {
   name: 'MuiChartsAxis',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})({
-  [`&.${_axisClasses.axisClasses.directionY}`]: {
-    [`.${_axisClasses.axisClasses.tickLabel}`]: {
-      dominantBaseline: 'middle'
-    },
-    [`.${_axisClasses.axisClasses.label}`]: {
-      dominantBaseline: 'auto',
-      textAnchor: 'middle'
-    }
-  },
-  [`&.${_axisClasses.axisClasses.left}`]: {
-    [`.${_axisClasses.axisClasses.tickLabel}`]: {
-      dominantBaseline: 'central',
-      textAnchor: 'end'
-    }
-  },
-  [`&.${_axisClasses.axisClasses.right}`]: {
-    [`.${_axisClasses.axisClasses.tickLabel}`]: {
-      dominantBaseline: 'central',
-      textAnchor: 'start'
-    }
-  },
-  [`&.${_axisClasses.axisClasses.bottom}`]: {
-    [`.${_axisClasses.axisClasses.tickLabel}, .${_axisClasses.axisClasses.label}`]: {
-      dominantBaseline: 'hanging',
-      textAnchor: 'middle'
-    }
-  },
-  [`&.${_axisClasses.axisClasses.top}`]: {
-    [`.${_axisClasses.axisClasses.tickLabel}, .${_axisClasses.axisClasses.label}`]: {
-      dominantBaseline: 'baseline',
-      textAnchor: 'middle'
-    }
-  }
-});
-exports.AxisRoot = AxisRoot;
-const ChartsLine = (0, _styles.styled)('line', {
-  name: 'MuiChartsAxis',
-  slot: 'Line',
-  overridesResolver: (props, styles) => styles.line
 })(({
   theme
 }) => ({
-  stroke: theme.palette.text.primary,
-  shapeRendering: 'crispEdges',
-  strokeWidth: 1
-}));
-exports.ChartsLine = ChartsLine;
-const ChartsTick = (0, _styles.styled)('line', {
-  name: 'MuiChartsAxis',
-  slot: 'Tick',
-  overridesResolver: (props, styles) => styles.tick
-})(({
-  theme
-}) => ({
-  stroke: theme.palette.text.primary,
-  shapeRendering: 'crispEdges'
-}));
-exports.ChartsTick = ChartsTick;
-const ChartsTickLabel = (0, _styles.styled)('text', {
-  name: 'MuiChartsAxis',
-  slot: 'TickLabel',
-  overridesResolver: (props, styles) => styles.tickLabel
-})(({
-  theme
-}) => (0, _extends2.default)({}, theme.typography.caption, {
-  fill: theme.palette.text.primary
-}));
-exports.ChartsTickLabel = ChartsTickLabel;
-const ChartsLabel = (0, _styles.styled)('text', {
-  name: 'MuiChartsAxis',
-  slot: 'Label',
-  overridesResolver: (props, styles) => styles.label
-})(({
-  theme
-}) => (0, _extends2.default)({}, theme.typography.body1, {
-  fill: theme.palette.text.primary
-}));
-exports.ChartsLabel = ChartsLabel;
+  [`& .${_axisClasses.axisClasses.tickLabel}`]: (0, _extends2.default)({}, theme.typography.caption, {
+    fill: (theme.vars || theme).palette.text.primary
+  }),
+  [`& .${_axisClasses.axisClasses.label}`]: (0, _extends2.default)({}, theme.typography.body1, {
+    fill: (theme.vars || theme).palette.text.primary
+  }),
+  [`& .${_axisClasses.axisClasses.line}`]: {
+    stroke: (theme.vars || theme).palette.text.primary,
+    shapeRendering: 'crispEdges',
+    strokeWidth: 1
+  },
+  [`& .${_axisClasses.axisClasses.tick}`]: {
+    stroke: (theme.vars || theme).palette.text.primary,
+    shapeRendering: 'crispEdges'
+  }
+}));

package/internals/components/ChartsText.d.ts

@@ -0,0 +1,35 @@
+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.
+     */
+    text: string;
+    /**
+     * Style applied to text elements.
+     */
+    style?: ChartsTextStyle;
+    /**
+     * If true, the line width is computed.
+     * @default false
+     */
+    needsComputation?: boolean;
+}
+export interface ChartsTextProps extends Omit<React.SVGTextElementAttributes<SVGTextElement>, 'width' | 'ref' | 'style' | 'dominantBaseline'>, GetWordsByLinesParams {
+    /**
+     * Height of a text line (in `em`).
+     */
+    lineHeight?: number;
+    ownerState?: any;
+}
+export declare function getWordsByLines({ style, needsComputation, text }: GetWordsByLinesParams): any[];
+export declare function ChartsText(props: ChartsTextProps): React.JSX.Element;
+export {};

package/internals/components/ChartsText.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsText = ChartsText;
+exports.getWordsByLines = getWordsByLines;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+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", "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,
+  text
+}) {
+  return text.split('\n').map(subText => (0, _extends2.default)({
+    text: subText
+  }, needsComputation ? (0, _domUtils.getStringSize)(subText, style) : {
+    width: 0,
+    height: 0
+  }));
+}
+function ChartsText(props) {
+  const {
+      x,
+      y,
+      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'),
+    text
+  }), [style, text]);
+  let startDy;
+  switch (dominantBaseline) {
+    case 'hanging':
+      startDy = 0;
+      break;
+    case 'central':
+      startDy = (wordsByLines.length - 1) / 2 * -wordsByLines[0].height;
+      break;
+    default:
+      startDy = (wordsByLines.length - 1) * -wordsByLines[0].height;
+      break;
+  }
+  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(' ');
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", (0, _extends2.default)({}, textProps, {
+    x: x,
+    y: y,
+    textAnchor: textAnchor,
+    dominantBaseline: dominantBaseline,
+    style: style,
+    children: wordsByLines.map((line, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("tspan", {
+      x: x,
+      dy: `${index === 0 ? startDy : wordsByLines[0].height}px`,
+      dominantBaseline: dominantBaseline // Propagated to fix Safari issue: https://github.com/mui/mui-x/issues/10808
+      ,
+      children: line.text
+    }, index))
+  }));
+}

package/internals/defaultizeColor.d.ts

@@ -23,12 +23,16 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
         innerRadius?: number | undefined;
         outerRadius?: number | undefined;
         cornerRadius?: number | undefined;
+        paddingAngle?: number | undefined;
+        color?: string | undefined;
     } | undefined;
     faded?: {
         additionalRadius?: number | undefined;
         innerRadius?: number | undefined;
         outerRadius?: number | undefined;
         cornerRadius?: number | undefined;
+        paddingAngle?: number | undefined;
+        color?: string | undefined;
     } | undefined;
     id?: string | undefined;
     color?: string | undefined;
@@ -51,12 +55,15 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     stackOrder?: "reverse" | "none" | "appearance" | "ascending" | "descending" | "insideOut" | undefined;
 } | {
     type: "line";
-    data?: number[] | undefined;
+    data?: (number | null)[] | undefined;
     dataKey?: string | undefined;
     stack?: string | undefined;
     area?: boolean | undefined;
     label?: string | undefined;
     curve?: import("../models/seriesType").CurveType | undefined;
+    showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams<number | Date>) => boolean) | undefined;
+    disableHighlight?: boolean | undefined;
+    connectNulls?: boolean | undefined;
     id?: string | undefined;
     color: string;
     valueFormatter?: ((value: number) => string) | undefined;

package/internals/defaultizeValueFormatter.js

@@ -15,5 +15,4 @@ function defaultizeValueFormatter(series, defaultValueFormatter) {
   });
   return defaultizedSeries;
 }
-var _default = defaultizeValueFormatter;
-exports.default = _default;
+var _default = exports.default = defaultizeValueFormatter;

package/internals/domUtils.d.ts

@@ -0,0 +1,13 @@
+/**
+ *
+ * @param style React style object
+ * @returns CSS styling string
+ */
+export declare const getStyleString: (style: React.CSSProperties) => string;
+/**
+ *
+ * @param text The string to estimate
+ * @param style The style applied
+ * @returns width and height of the text
+ */
+export declare const getStringSize: (text: string | number, style?: React.CSSProperties) => any;

package/internals/domUtils.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStyleString = exports.getStringSize = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+// DOM utils taken from
+// https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
+
+const isSsr = () => !(typeof window !== 'undefined' && window.document && window.setTimeout);
+const stringCache = {
+  widthCache: {},
+  cacheCount: 0
+};
+const MAX_CACHE_NUM = 2000;
+const SPAN_STYLE = {
+  position: 'absolute',
+  top: '-20000px',
+  left: 0,
+  padding: 0,
+  margin: 0,
+  border: 'none',
+  whiteSpace: 'pre'
+};
+const STYLE_LIST = ['minWidth', 'maxWidth', 'width', 'minHeight', 'maxHeight', 'height', 'top', 'left', 'fontSize', 'padding', 'margin', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom'];
+const 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 `${value}px`;
+  }
+  return value;
+}
+
+/**
+ *
+ * @param text camelcase css property
+ * @returns css property
+ */
+function camelToMiddleLine(text) {
+  const strs = text.split('');
+  const formatStrs = strs.reduce((result, entry) => {
+    if (entry === entry.toUpperCase()) {
+      return [...result, '-', entry.toLowerCase()];
+    }
+    return [...result, entry];
+  }, []);
+  return formatStrs.join('');
+}
+
+/**
+ *
+ * @param style React style object
+ * @returns CSS styling string
+ */
+const getStyleString = style => Object.keys(style).sort().reduce((result, s) => `${result}${camelToMiddleLine(s)}:${autoCompleteStyle(s, style[s])};`, '');
+
+/**
+ *
+ * @param text The string to estimate
+ * @param style The style applied
+ * @returns width and height of the text
+ */
+exports.getStyleString = getStyleString;
+const getStringSize = (text, style = {}) => {
+  if (text === undefined || text === null || isSsr()) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+  const str = `${text}`;
+  const styleString = getStyleString(style);
+  const cacheKey = `${str}-${styleString}`;
+  if (stringCache.widthCache[cacheKey]) {
+    return stringCache.widthCache[cacheKey];
+  }
+  try {
+    let 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
+    const measurementSpanStyle = (0, _extends2.default)({}, SPAN_STYLE, style);
+    Object.keys(measurementSpanStyle).map(styleKey => {
+      measurementSpan.style[camelToMiddleLine(styleKey)] = autoCompleteStyle(styleKey, measurementSpanStyle[styleKey]);
+      return styleKey;
+    });
+    measurementSpan.textContent = str;
+    const rect = measurementSpan.getBoundingClientRect();
+    const 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
+    };
+  }
+};
+exports.getStringSize = getStringSize;

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/internals/stackSeries.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getStackingGroups = exports.StackOrder = exports.StackOffset = void 0;
 var _d3Shape = require("d3-shape");
-const StackOrder = {
+const StackOrder = exports.StackOrder = {
   /**
    * Series order such that the earliest series (according to the maximum value) is at the bottom.
    * */
@@ -31,8 +31,7 @@ const StackOrder = {
    */
   reverse: _d3Shape.stackOrderReverse
 };
-exports.StackOrder = StackOrder;
-const StackOffset = {
+const StackOffset = exports.StackOffset = {
   /**
    * Applies a zero baseline and normalizes the values for each point such that the topline is always one.
    * */
@@ -60,7 +59,6 @@ const StackOffset = {
  * @param series the object of all bars series
  * @returns an array of groups, including the ids, the stacking order, and the stacking offset.
  */
-exports.StackOffset = StackOffset;
 const getStackingGroups = params => {
   const {
     series,

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,33 +174,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,
@@ -204,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,
@@ -233,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 {}
@@ -249,6 +275,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'])
   }),
   /**
@@ -264,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,
@@ -293,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']),
@@ -301,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,
@@ -319,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']),
@@ -327,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,