@mui/x-charts 7.3.0 → 7.3.2

package/ScatterChart/getColor.d.ts

@@ -1,3 +1,4 @@
 import { AxisDefaultized } from '../models/axis';
+import { ZAxisDefaultized } from '../models/z-axis';
 import { DefaultizedScatterSeriesType } from '../models/seriesType/scatter';
-export default function getColor(series: DefaultizedScatterSeriesType, xAxis: AxisDefaultized, yAxis: AxisDefaultized): (dataIndex: number) => string;
+export default function getColor(series: DefaultizedScatterSeriesType, xAxis: AxisDefaultized, yAxis: AxisDefaultized, zAxis?: ZAxisDefaultized): (dataIndex: number) => string;

package/ScatterChart/getColor.js

@@ -4,9 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getColor;
-function getColor(series, xAxis, yAxis) {
+function getColor(series, xAxis, yAxis, zAxis) {
+  const zColorScale = zAxis?.colorScale;
   const yColorScale = yAxis.colorScale;
   const xColorScale = xAxis.colorScale;
+  if (zColorScale) {
+    return dataIndex => {
+      if (zAxis?.data?.[dataIndex] !== undefined) {
+        const color = zColorScale(zAxis?.data?.[dataIndex]);
+        if (color !== null) {
+          return color;
+        }
+      }
+      const value = series.data[dataIndex];
+      const color = value === null ? series.color : zColorScale(value.z);
+      if (color === null) {
+        return series.color;
+      }
+      return color;
+    };
+  }
   if (yColorScale) {
     return dataIndex => {
       const value = series.data[dataIndex];

package/SparkLineChart/SparkLineChart.js

@@ -16,7 +16,7 @@ var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _jsxRuntime = require("react/jsx-runtime");
 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 _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 && {}.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; }
 const SPARKLINE_DEFAULT_MARGIN = {
   top: 5,
   bottom: 5,

package/context/CartesianContextProvider.d.ts

@@ -1,17 +1,18 @@
 import * as React from 'react';
 import { AxisConfig, AxisDefaultized } from '../models/axis';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { DatasetType } from '../models/seriesType/config';
 import { MakeOptional } from '../models/helpers';
 export type CartesianContextProviderProps = {
     /**
      * The configuration of the x-axes.
      * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
      */
     xAxis?: MakeOptional<AxisConfig, 'id'>[];
     /**
      * The configuration of the y-axes.
      * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
      */
     yAxis?: MakeOptional<AxisConfig, 'id'>[];
     /**

package/context/CartesianContextProvider.js

@@ -21,7 +21,7 @@ var _useDrawingArea = require("../hooks/useDrawingArea");
 var _colorScale = require("../internals/colorScale");
 var _jsxRuntime = require("react/jsx-runtime");
 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 _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 && {}.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; }
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
 

package/context/DrawingProvider.js

@@ -13,7 +13,7 @@ var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useChartDimensions = _interopRequireDefault(require("../hooks/useChartDimensions"));
 var _jsxRuntime = require("react/jsx-runtime");
 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 _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 && {}.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; }
 /**
  * Defines the area in which it is possible to draw the charts.
  */

package/context/HighlightProvider.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 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 _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 && {}.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; }
 const defaultScope = {
   highlighted: 'none',
   faded: 'none'

package/context/InteractionProvider.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 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 _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 && {}.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; }
 const InteractionContext = exports.InteractionContext = /*#__PURE__*/React.createContext({
   item: null,
   axis: {

package/context/SeriesContextProvider.js

@@ -17,7 +17,7 @@ var _defaultizeColor = require("../internals/defaultizeColor");
 var _colorPalettes = require("../colorPalettes");
 var _jsxRuntime = require("react/jsx-runtime");
 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 _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 && {}.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; }
 const SeriesContext = exports.SeriesContext = /*#__PURE__*/React.createContext({});
 if (process.env.NODE_ENV !== 'production') {
   SeriesContext.displayName = 'SeriesContext';
@@ -60,7 +60,7 @@ const formatSeries = (series, colors, dataset) => {
     seriesGroups[type].seriesOrder.push(id);
   });
   const formattedSeries = {};
-  // Apply formater on a type group
+  // Apply formatter on a type group
   Object.keys(seriesTypeFormatter).forEach(type => {
     if (seriesGroups[type] !== undefined) {
       formattedSeries[type] = seriesTypeFormatter[type]?.(seriesGroups[type], dataset) ?? seriesGroups[type];

package/context/ZAxisContextProvider.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { DatasetType } from '../models/seriesType/config';
+import { MakeOptional } from '../models/helpers';
+import { ZAxisConfig, ZAxisDefaultized } from '../models/z-axis';
+export type ZAxisContextProviderProps = {
+    /**
+     * The configuration of the z-axes.
+     */
+    zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+    /**
+     * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+     */
+    dataset?: DatasetType;
+    children: React.ReactNode;
+};
+type DefaultizedZAxisConfig = {
+    [axisKey: string]: ZAxisDefaultized;
+};
+export declare const ZAxisContext: React.Context<{
+    /**
+     * Mapping from z-axis key to scaling configuration.
+     */
+    zAxis: DefaultizedZAxisConfig;
+    /**
+     * The z-axes IDs sorted by order they got provided.
+     */
+    zAxisIds: string[];
+}>;
+declare function ZAxisContextProvider(props: ZAxisContextProviderProps): React.JSX.Element;
+declare namespace ZAxisContextProvider {
+    var propTypes: any;
+}
+export { ZAxisContextProvider };

package/context/ZAxisContextProvider.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZAxisContext = void 0;
+exports.ZAxisContextProvider = ZAxisContextProvider;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _colorScale = require("../internals/colorScale");
+var _jsxRuntime = require("react/jsx-runtime");
+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 && {}.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; }
+const ZAxisContext = exports.ZAxisContext = /*#__PURE__*/React.createContext({
+  zAxis: {},
+  zAxisIds: []
+});
+if (process.env.NODE_ENV !== 'production') {
+  ZAxisContext.displayName = 'ZAxisContext';
+}
+function ZAxisContextProvider(props) {
+  const {
+    zAxis: inZAxis,
+    dataset,
+    children
+  } = props;
+  const zAxis = React.useMemo(() => inZAxis?.map(axisConfig => {
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return axisConfig;
+    }
+    if (dataset === undefined) {
+      throw Error('MUI X Charts: z-axis uses `dataKey` but no `dataset` is provided.');
+    }
+    return (0, _extends2.default)({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  }), [inZAxis, dataset]);
+  const value = React.useMemo(() => {
+    const allZAxis = zAxis?.map((axis, index) => (0, _extends2.default)({
+      id: `defaultized-z-axis-${index}`
+    }, axis)) ?? [];
+    const completedZAxis = {};
+    allZAxis.forEach(axis => {
+      completedZAxis[axis.id] = (0, _extends2.default)({}, axis, {
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' && axis.data ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
+          values: axis.data
+        }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
+      });
+    });
+    return {
+      zAxis: completedZAxis,
+      zAxisIds: allZAxis.map(({
+        id
+      }) => id)
+    };
+  }, [zAxis]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ZAxisContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+process.env.NODE_ENV !== "production" ? ZAxisContextProvider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: _propTypes.default.node,
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset: _propTypes.default.arrayOf(_propTypes.default.object),
+  /**
+   * The configuration of the z-axes.
+   */
+  zAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    id: _propTypes.default.string
+  }))
+} : void 0;

package/context/index.d.ts

@@ -1 +1,3 @@
 export type { HighlightOptions, FadeOptions, HighlightScope } from './HighlightProvider';
+export { ZAxisContextProvider } from './ZAxisContextProvider';
+export type { ZAxisContextProviderProps } from './ZAxisContextProvider';

package/context/index.js

@@ -2,4 +2,11 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+Object.defineProperty(exports, "ZAxisContextProvider", {
+  enumerable: true,
+  get: function () {
+    return _ZAxisContextProvider.ZAxisContextProvider;
+  }
+});
+var _ZAxisContextProvider = require("./ZAxisContextProvider");

package/esm/BarChart/BarChart.js

@@ -12,8 +12,8 @@ import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
 import { ChartsGrid } from '../ChartsGrid';
 import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
  *
@@ -50,7 +50,8 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     onAxisClick,
     children,
     slots,
-    slotProps
+    slotProps,
+    loading
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -91,14 +92,18 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
       vertical: grid.vertical,
       horizontal: grid.horizontal
-    }), /*#__PURE__*/_jsx("g", {
+    }), /*#__PURE__*/_jsxs("g", {
       clipPath: `url(#${clipPathId})`,
-      children: /*#__PURE__*/_jsx(BarPlot, {
+      children: [/*#__PURE__*/_jsx(BarPlot, {
         slots: slots,
         slotProps: slotProps,
         skipAnimation: skipAnimation,
         onItemClick: onItemClick
-      })
+      }), /*#__PURE__*/_jsx(ChartsOverlay, {
+        loading: loading,
+        slots: slots,
+        slotProps: slotProps
+      })]
     }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
@@ -109,7 +114,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, defaultizedAxisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, defaultizedAxisHighlight)), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
       slots: slots,
       slotProps: slotProps
     })), /*#__PURE__*/_jsx(ChartsClipPath, {
@@ -137,30 +142,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default xAxisIds[0] The id of the first provided axis
    */
-  bottomAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    classes: PropTypes.object,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    fill: PropTypes.string,
-    label: PropTypes.string,
-    labelFontSize: PropTypes.number,
-    labelStyle: PropTypes.object,
-    position: PropTypes.oneOf(['bottom', 'top']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    tickFontSize: PropTypes.number,
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number
-  }), PropTypes.string]),
+  bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   children: PropTypes.node,
   className: PropTypes.string,
   /**
@@ -200,30 +182,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default yAxisIds[0] The id of the first provided axis
    */
-  leftAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    classes: PropTypes.object,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    fill: PropTypes.string,
-    label: PropTypes.string,
-    labelFontSize: PropTypes.number,
-    labelStyle: PropTypes.object,
-    position: PropTypes.oneOf(['left', 'right']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    tickFontSize: PropTypes.number,
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number
-  }), PropTypes.string]),
+  leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * @deprecated Consider using `slotProps.legend` instead.
    */
@@ -238,6 +197,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object
   }),
+  /**
+   * If `true`, a loading overlay is displayed.
+   */
+  loading: PropTypes.bool,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
@@ -268,32 +231,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
-  rightAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    classes: PropTypes.object,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    fill: PropTypes.string,
-    label: PropTypes.string,
-    labelFontSize: PropTypes.number,
-    labelStyle: PropTypes.object,
-    position: PropTypes.oneOf(['left', 'right']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    tickFontSize: PropTypes.number,
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number
-  }), PropTypes.string]),
+  rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * The series to display in the bar chart.
+   * An array of [[BarSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
@@ -330,30 +271,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
-  topAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    classes: PropTypes.object,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    fill: PropTypes.string,
-    label: PropTypes.string,
-    labelFontSize: PropTypes.number,
-    labelStyle: PropTypes.object,
-    position: PropTypes.oneOf(['bottom', 'top']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    tickFontSize: PropTypes.number,
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number
-  }), PropTypes.string]),
+  topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   viewBox: PropTypes.shape({
     height: PropTypes.number,
     width: PropTypes.number,
@@ -367,6 +285,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -419,6 +338,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   /**
    * The configuration of the y-axes.
    * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/esm/BarChart/BarElement.js

@@ -35,7 +35,6 @@ export const BarElementPath = styled(animated.rect, {
   ownerState
 }) => ({
   stroke: 'none',
-  shapeRendering: 'crispEdges',
   fill: ownerState.isHighlighted ? d3Color(ownerState.color).brighter(0.5).formatHex() : ownerState.color,
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
   opacity: ownerState.isFaded && 0.3 || 1

package/esm/BarChart/BarPlot.js

@@ -70,25 +70,25 @@ const useAggregatedData = () => {
       let baseScaleConfig;
       if (verticalLayout) {
         if (!isBandScaleConfig(xAxisConfig)) {
-          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}".`);
+          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should be of type "band" to display the bar series of id "${seriesId}".`);
         }
         if (xAxis[xAxisKey].data === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud have data property.`);
+          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property.`);
         }
         baseScaleConfig = xAxisConfig;
         if (isBandScaleConfig(yAxisConfig) || isPointScaleConfig(yAxisConfig)) {
-          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud be a continuous type to display the bar series of id "${seriesId}".`);
+          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should be a continuous type to display the bar series of id "${seriesId}".`);
         }
       } else {
         if (!isBandScaleConfig(yAxisConfig)) {
-          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}".`);
+          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should be of type "band" to display the bar series of id "${seriesId}".`);
         }
         if (yAxis[yAxisKey].data === undefined) {
-          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud have data property.`);
+          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should have data property.`);
         }
         baseScaleConfig = yAxisConfig;
         if (isBandScaleConfig(xAxisConfig) || isPointScaleConfig(xAxisConfig)) {
-          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud be a continuous type to display the bar series of id "${seriesId}".`);
+          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should be a continuous type to display the bar series of id "${seriesId}".`);
         }
       }
       const xScale = xAxisConfig.scale;
@@ -109,8 +109,8 @@ const useAggregatedData = () => {
       } = series[seriesId];
       return stackedData.map((values, dataIndex) => {
         const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
-        const minValueCoord = Math.min(...valueCoordinates);
-        const maxValueCoord = Math.max(...valueCoordinates);
+        const minValueCoord = Math.round(Math.min(...valueCoordinates));
+        const maxValueCoord = Math.round(Math.max(...valueCoordinates));
         return {
           seriesId,
           dataIndex,

package/esm/ChartContainer/ChartContainer.js

@@ -9,8 +9,7 @@ import { ChartsSurface } from '../ChartsSurface';
 import { CartesianContextProvider } from '../context/CartesianContextProvider';
 import { HighlightProvider } from '../context/HighlightProvider';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
     width,
@@ -122,6 +121,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -174,6 +174,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   /**
    * The configuration of the y-axes.
    * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),