@mui/x-charts 7.12.1 → 7.14.0

package/esm/hooks/useTicks.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { isBandScale } from '../internals/isBandScale';
+import { isInfinity } from '../internals/isInfinity';
 export function getTickNumber(params) {
   const {
     tickMaxStep,
@@ -60,8 +61,10 @@ export function useTicks(options) {
         labelOffset: 0
       }));
     }
-    if (scale.domain().length === 0 || scale.domain()[0] === scale.domain()[1]) {
-      // The axis should not be visible, so ticks should also be hidden.
+    const domain = scale.domain();
+    // Skip axis rendering if no data is available
+    // - The domains contains Infinity for continuous scales.
+    if (domain.some(isInfinity)) {
       return [];
     }
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);

package/esm/internals/domUtils.js

@@ -20,7 +20,7 @@ const SPAN_STYLE = {
   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';
+export const MEASUREMENT_SPAN_ID = 'mui_measurement_span';
 
 /**
  *
@@ -57,7 +57,7 @@ function camelToMiddleLine(text) {
  * @returns CSS styling string
  */
 export const getStyleString = style => Object.keys(style).sort().reduce((result, s) => `${result}${camelToMiddleLine(s)}:${autoCompleteStyle(s, style[s])};`, '');
-
+let domCleanTimeout;
 /**
  *
  * @param text The string to estimate
@@ -105,6 +105,13 @@ export const getStringSize = (text, style = {}) => {
     } else {
       stringCache.cacheCount += 1;
     }
+    if (domCleanTimeout) {
+      clearTimeout(domCleanTimeout);
+    }
+    domCleanTimeout = setTimeout(() => {
+      // Limit node cleaning to once per render cycle
+      measurementSpan.textContent = '';
+    }, 0);
     return result;
   } catch (e) {
     return {
@@ -112,4 +119,10 @@ export const getStringSize = (text, style = {}) => {
       height: 0
     };
   }
-};
+};
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function unstable_cleanupDOM() {
+  // const measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
+  // measurementSpan?.remove();
+}

package/esm/internals/index.js

@@ -20,6 +20,7 @@ export * from './configInit';
 export * from './getLabel';
 export * from './getSVGPoint';
 export * from './isDefined';
+export { unstable_cleanupDOM } from './domUtils';
 
 // contexts
 
@@ -29,6 +30,8 @@ export * from '../context/InteractionProvider';
 export * from '../context/SeriesProvider';
 export * from '../context/ZAxisContextProvider';
 export * from '../context/PluginProvider';
+export { getAxisExtremum } from '../context/CartesianProvider/getAxisExtremum';
+
 // series configuration
 export * from '../models/seriesType/config';
 export * from '../models/seriesType/common';

package/esm/internals/isInfinity.js

@@ -0,0 +1,3 @@
+export function isInfinity(v) {
+  return typeof v === 'number' && !Number.isFinite(v);
+}

package/esm/models/axis.js

@@ -1,3 +1,8 @@
+/**
+ * Use this type instead of `AxisScaleConfig` when the values
+ * shouldn't be provided by the user.
+ */
+
 export function isBandScaleConfig(scaleConfig) {
   return scaleConfig.scaleType === 'band';
 }

package/esm/tests/firePointerEvent.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { fireEvent } from '@mui/internal-test-utils';
+export function firePointerEvent(target, type, options) {
+  const originalGetBoundingClientRect = target.getBoundingClientRect;
+  target.getBoundingClientRect = () => ({
+    x: 0,
+    y: 0,
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0,
+    toJSON() {
+      return {
+        x: 0,
+        y: 0,
+        bottom: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+        width: 0
+      };
+    }
+  });
+  const event = new window.PointerEvent(type, _extends({
+    bubbles: true,
+    cancelable: true,
+    composed: true,
+    isPrimary: true
+  }, options));
+  fireEvent(target, event);
+  target.getBoundingClientRect = originalGetBoundingClientRect;
+}

package/hooks/useAxisEvents.js

@@ -106,7 +106,9 @@ const useAxisEvents = disableAxisListener => {
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
       mousePosition.current.x = svgPoint.x;
       mousePosition.current.y = svgPoint.y;
-      if (!drawingArea.isPointInside(svgPoint, event.target)) {
+      if (!drawingArea.isPointInside(svgPoint, {
+        targetElement: event.target
+      })) {
         if (mousePosition.current.isInChart) {
           dispatch({
             type: 'exitChart'

package/hooks/useTicks.js

@@ -7,6 +7,7 @@ exports.getTickNumber = getTickNumber;
 exports.useTicks = useTicks;
 var React = _interopRequireWildcard(require("react"));
 var _isBandScale = require("../internals/isBandScale");
+var _isInfinity = require("../internals/isInfinity");
 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; }
 function getTickNumber(params) {
@@ -69,8 +70,10 @@ function useTicks(options) {
         labelOffset: 0
       }));
     }
-    if (scale.domain().length === 0 || scale.domain()[0] === scale.domain()[1]) {
-      // The axis should not be visible, so ticks should also be hidden.
+    const domain = scale.domain();
+    // Skip axis rendering if no data is available
+    // - The domains contains Infinity for continuous scales.
+    if (domain.some(_isInfinity.isInfinity)) {
       return [];
     }
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.12.1
+ * @mui/x-charts v7.14.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/defaultizeColor.d.ts

@@ -72,6 +72,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     disableHighlight?: boolean;
     connectNulls?: boolean;
     stackOffset?: import("..").StackOffsetType;
+    baseline?: number | "min" | "max";
     id?: import(".").SeriesId;
     color: string;
     valueFormatter?: import(".").SeriesValueFormatter<number | null> | undefined;

package/internals/domUtils.d.ts

@@ -1,3 +1,4 @@
+export declare const MEASUREMENT_SPAN_ID = "mui_measurement_span";
 /**
  *
  * @param style React style object
@@ -11,3 +12,4 @@ export declare const getStyleString: (style: React.CSSProperties) => string;
  * @returns width and height of the text
  */
 export declare const getStringSize: (text: string | number, style?: React.CSSProperties) => any;
+export declare function unstable_cleanupDOM(): void;

package/internals/domUtils.js

@@ -4,7 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getStyleString = exports.getStringSize = void 0;
+exports.getStyleString = exports.getStringSize = exports.MEASUREMENT_SPAN_ID = void 0;
+exports.unstable_cleanupDOM = unstable_cleanupDOM;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 // DOM utils taken from
 // https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
@@ -27,7 +28,7 @@ const SPAN_STYLE = {
   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';
+const MEASUREMENT_SPAN_ID = exports.MEASUREMENT_SPAN_ID = 'mui_measurement_span';
 
 /**
  *
@@ -64,14 +65,14 @@ function camelToMiddleLine(text) {
  * @returns CSS styling string
  */
 const getStyleString = style => Object.keys(style).sort().reduce((result, s) => `${result}${camelToMiddleLine(s)}:${autoCompleteStyle(s, style[s])};`, '');
-
+exports.getStyleString = getStyleString;
+let domCleanTimeout;
 /**
  *
  * @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 {
@@ -113,6 +114,13 @@ const getStringSize = (text, style = {}) => {
     } else {
       stringCache.cacheCount += 1;
     }
+    if (domCleanTimeout) {
+      clearTimeout(domCleanTimeout);
+    }
+    domCleanTimeout = setTimeout(() => {
+      // Limit node cleaning to once per render cycle
+      measurementSpan.textContent = '';
+    }, 0);
     return result;
   } catch (e) {
     return {
@@ -121,4 +129,10 @@ const getStringSize = (text, style = {}) => {
     };
   }
 };
-exports.getStringSize = getStringSize;
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+exports.getStringSize = getStringSize;
+function unstable_cleanupDOM() {
+  // const measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
+  // measurementSpan?.remove();
+}

package/internals/index.d.ts

@@ -15,6 +15,7 @@ export * from './configInit';
 export * from './getLabel';
 export * from './getSVGPoint';
 export * from './isDefined';
+export { unstable_cleanupDOM } from './domUtils';
 export * from '../context/CartesianProvider';
 export * from '../context/DrawingProvider';
 export * from '../context/InteractionProvider';
@@ -22,6 +23,7 @@ export * from '../context/SeriesProvider';
 export * from '../context/ZAxisContextProvider';
 export * from '../context/PluginProvider';
 export type * from '../context/context.types';
+export { getAxisExtremum } from '../context/CartesianProvider/getAxisExtremum';
 export * from '../models/seriesType/config';
 export * from '../models/seriesType/common';
 export * from '../models/helpers';

package/internals/index.js

@@ -12,8 +12,22 @@ var _exportNames = {
   useLineChartProps: true,
   useBarChartProps: true,
   useResponsiveChartContainerProps: true,
-  useChartContainerProps: true
+  useChartContainerProps: true,
+  unstable_cleanupDOM: true,
+  getAxisExtremum: true
 };
+Object.defineProperty(exports, "getAxisExtremum", {
+  enumerable: true,
+  get: function () {
+    return _getAxisExtremum.getAxisExtremum;
+  }
+});
+Object.defineProperty(exports, "unstable_cleanupDOM", {
+  enumerable: true,
+  get: function () {
+    return _domUtils.unstable_cleanupDOM;
+  }
+});
 Object.defineProperty(exports, "useBarChartProps", {
   enumerable: true,
   get: function () {
@@ -173,6 +187,7 @@ Object.keys(_isDefined).forEach(function (key) {
     }
   });
 });
+var _domUtils = require("./domUtils");
 var _CartesianProvider = require("../context/CartesianProvider");
 Object.keys(_CartesianProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -245,6 +260,7 @@ Object.keys(_PluginProvider).forEach(function (key) {
     }
   });
 });
+var _getAxisExtremum = require("../context/CartesianProvider/getAxisExtremum");
 var _config = require("../models/seriesType/config");
 Object.keys(_config).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/isInfinity.d.ts

@@ -0,0 +1 @@
+export declare function isInfinity(v: any): v is number;

package/internals/isInfinity.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isInfinity = isInfinity;
+function isInfinity(v) {
+  return typeof v === 'number' && !Number.isFinite(v);
+}

package/models/axis.d.ts

@@ -1,4 +1,5 @@
 import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint, ScaleOrdinal, ScaleSequential, ScaleThreshold } from '@mui/x-charts-vendor/d3-scale';
+import { SxProps } from '@mui/system';
 import { ChartsAxisClasses } from '../ChartsAxis/axisClasses';
 import type { TickParams } from '../hooks/useTicks';
 import { ChartsTextProps } from '../ChartsText';
@@ -112,6 +113,7 @@ export interface ChartsAxisProps extends TickParams {
      * @default {}
      */
     slotProps?: Partial<ChartsAxisSlotProps>;
+    sx?: SxProps;
 }
 export interface ChartsYAxisProps extends ChartsAxisProps {
     /**
@@ -181,6 +183,10 @@ export interface AxisScaleConfig {
         colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
     };
 }
+/**
+ * Use this type instead of `AxisScaleConfig` when the values
+ * shouldn't be provided by the user.
+ */
 export interface AxisScaleComputedConfig {
     band: {
         colorScale?: ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | ScaleSequential<string, string | null> | ScaleThreshold<number | Date, string | null>;

package/models/axis.js

@@ -5,6 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isBandScaleConfig = isBandScaleConfig;
 exports.isPointScaleConfig = isPointScaleConfig;
+/**
+ * Use this type instead of `AxisScaleConfig` when the values
+ * shouldn't be provided by the user.
+ */
+
 function isBandScaleConfig(scaleConfig) {
   return scaleConfig.scaleType === 'band';
 }

package/models/seriesType/line.d.ts

@@ -62,6 +62,16 @@ export interface LineSeriesType extends CommonSeriesType<number | null>, Cartesi
      * @default 'none'
      */
     stackOffset?: StackOffsetType;
+    /**
+     * The value of the line at the base of the series area.
+     *
+     * - `'min'` the area will fill the space **under** the line.
+     * - `'max'` the area will fill the space **above** the line.
+     * - `number` the area will fill the space between this value and the line
+     *
+     * @default 0
+     */
+    baseline?: number | 'min' | 'max';
 }
 /**
  * An object that allows to identify a single line.

package/modern/BarChart/BarChart.js

@@ -273,6 +273,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
@@ -325,6 +326,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),

package/modern/BarChart/BarPlot.js

@@ -191,6 +191,7 @@ function BarPlot(props) {
       barLabel
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const withoutBorderRadius = !borderRadius || borderRadius <= 0;
   const transition = useTransition(completedData, {
     keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
     from: leaveStyle,
@@ -199,7 +200,7 @@ function BarPlot(props) {
     update: enterStyle,
     immediate: skipAnimation
   });
-  const maskTransition = useTransition(masksData, {
+  const maskTransition = useTransition(withoutBorderRadius ? [] : masksData, {
     keys: v => v.id,
     from: leaveStyle,
     leave: leaveStyle,
@@ -208,7 +209,7 @@ function BarPlot(props) {
     immediate: skipAnimation
   });
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [maskTransition((style, {
+    children: [!withoutBorderRadius && maskTransition((style, {
       id,
       hasPositive,
       hasNegative,
@@ -242,7 +243,7 @@ function BarPlot(props) {
         }),
         style: style
       }));
-      if (!borderRadius || borderRadius <= 0) {
+      if (withoutBorderRadius) {
         return barElement;
       }
       return /*#__PURE__*/_jsx("g", {

package/modern/BarChart/extremums.js

@@ -1,31 +1,68 @@
+const createResult = (data, direction) => {
+  if (direction === 'x') {
+    return {
+      x: data,
+      y: null
+    };
+  }
+  return {
+    x: null,
+    y: data
+  };
+};
 const getBaseExtremum = params => {
   const {
-    axis
+    axis,
+    getFilters,
+    isDefaultAxis
   } = params;
-  const minX = Math.min(...(axis.data ?? []));
-  const maxX = Math.max(...(axis.data ?? []));
+  const filter = getFilters?.({
+    currentAxisId: axis.id,
+    isDefaultAxis
+  });
+  const data = filter ? axis.data?.filter((_, i) => filter({
+    x: null,
+    y: null
+  }, i)) : axis.data;
+  const minX = Math.min(...(data ?? []));
+  const maxX = Math.max(...(data ?? []));
   return [minX, maxX];
 };
-const getValueExtremum = params => {
+const getValueExtremum = direction => params => {
   const {
     series,
     axis,
+    getFilters,
     isDefaultAxis
   } = params;
   return Object.keys(series).filter(seriesId => {
     const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
     return yAxisId === axis.id || isDefaultAxis && yAxisId === undefined;
   }).reduce((acc, seriesId) => {
-    const [seriesMin, seriesMax] = series[seriesId].stackedData?.reduce((seriesAcc, values) => [Math.min(...values, ...(seriesAcc[0] === null ? [] : [seriesAcc[0]])), Math.max(...values, ...(seriesAcc[1] === null ? [] : [seriesAcc[1]]))], series[seriesId].stackedData[0]) ?? [null, null];
-    return [acc[0] === null ? seriesMin : Math.min(seriesMin, acc[0]), acc[1] === null ? seriesMax : Math.max(seriesMax, acc[1])];
-  }, [null, null]);
+    const {
+      stackedData
+    } = series[seriesId];
+    const filter = getFilters?.({
+      currentAxisId: axis.id,
+      isDefaultAxis,
+      seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
+      seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
+    });
+    const [seriesMin, seriesMax] = stackedData?.reduce((seriesAcc, values, index) => {
+      if (filter && (!filter(createResult(values[0], direction), index) || !filter(createResult(values[1], direction), index))) {
+        return seriesAcc;
+      }
+      return [Math.min(...values, seriesAcc[0]), Math.max(...values, seriesAcc[1])];
+    }, [Infinity, -Infinity]) ?? [Infinity, -Infinity];
+    return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
+  }, [Infinity, -Infinity]);
 };
 export const getExtremumX = params => {
   // Notice that bar should be all horizontal or all vertical.
   // Don't think it's a problem for now
   const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
   if (isHorizontal) {
-    return getValueExtremum(params);
+    return getValueExtremum('x')(params);
   }
   return getBaseExtremum(params);
 };
@@ -34,5 +71,5 @@ export const getExtremumY = params => {
   if (isHorizontal) {
     return getBaseExtremum(params);
   }
-  return getValueExtremum(params);
+  return getValueExtremum('y')(params);
 };

package/modern/ChartContainer/ChartContainer.js

@@ -5,7 +5,7 @@ import { DrawingProvider } from '../context/DrawingProvider';
 import { SeriesProvider } from '../context/SeriesProvider';
 import { InteractionProvider } from '../context/InteractionProvider';
 import { ChartsSurface } from '../ChartsSurface';
-import { CartesianContextProvider } from '../context/CartesianProvider';
+import { CartesianProvider } from '../context/CartesianProvider';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
 import { HighlightedProvider, ZAxisContextProvider } from '../context';
 import { PluginProvider } from '../context/PluginProvider';
@@ -16,7 +16,7 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
     children,
     drawingProviderProps,
     seriesProviderProps,
-    cartesianContextProps,
+    cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
     chartsSurfaceProps,
@@ -25,7 +25,7 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
   return /*#__PURE__*/_jsx(DrawingProvider, _extends({}, drawingProviderProps, {
     children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
       children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
-        children: /*#__PURE__*/_jsx(CartesianContextProvider, _extends({}, cartesianContextProps, {
+        children: /*#__PURE__*/_jsx(CartesianProvider, _extends({}, cartesianProviderProps, {
           children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
             children: /*#__PURE__*/_jsx(InteractionProvider, {
               children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
@@ -155,6 +155,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
@@ -207,6 +208,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),

package/modern/ChartContainer/useChartContainerProps.js

@@ -30,7 +30,7 @@ export const useChartContainerProps = (props, ref) => {
   const chartSurfaceRef = useForkRef(ref, svgRef);
   useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
 
-  const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis);
+  const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis, dataset);
   const drawingProviderProps = {
     width,
     height,
@@ -45,7 +45,7 @@ export const useChartContainerProps = (props, ref) => {
     colors,
     dataset
   };
-  const cartesianContextProps = {
+  const cartesianProviderProps = {
     xAxis: defaultizedXAxis,
     yAxis: defaultizedYAxis,
     dataset
@@ -71,7 +71,7 @@ export const useChartContainerProps = (props, ref) => {
     children,
     drawingProviderProps,
     seriesProviderProps,
-    cartesianContextProps,
+    cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
     chartsSurfaceProps,

package/modern/ChartContainer/useDefaultizeAxis.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
-const defaultizeAxis = (inAxis, axisName) => {
+const defaultizeAxis = (inAxis, dataset, axisName) => {
   const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
   return [...(inAxis?.map((axis, index) => _extends({
     id: `defaultized-${axisName}-axis-${index}`
@@ -10,10 +10,21 @@ const defaultizeAxis = (inAxis, axisName) => {
   }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
     id: DEFAULT_AXIS_KEY,
     scaleType: 'linear'
-  }] : [])];
+  }] : [])].map(axisConfig => {
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return axisConfig;
+    }
+    if (dataset === undefined) {
+      throw Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+    }
+    return _extends({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  });
 };
-export const useDefaultizeAxis = (inXAxis, inYAxis) => {
-  const xAxis = React.useMemo(() => defaultizeAxis(inXAxis, 'x'), [inXAxis]);
-  const yAxis = React.useMemo(() => defaultizeAxis(inYAxis, 'y'), [inYAxis]);
+export const useDefaultizeAxis = (inXAxis, inYAxis, dataset) => {
+  const xAxis = React.useMemo(() => defaultizeAxis(inXAxis, dataset, 'x'), [inXAxis, dataset]);
+  const yAxis = React.useMemo(() => defaultizeAxis(inYAxis, dataset, 'y'), [inYAxis, dataset]);
   return [xAxis, yAxis];
 };