@mui/x-charts 7.12.1 → 7.13.0

package/context/PluginProvider/ExtremumGetter.types.d.ts

@@ -9,6 +9,6 @@ type ExtremumGetterParams<T extends ChartSeriesType> = {
     axis: AxisConfig;
     isDefaultAxis: boolean;
 };
-export type ExtremumGetterResult = [number, number] | [null, null];
+export type ExtremumGetterResult = [number, number];
 export type ExtremumGetter<T extends ChartSeriesType> = (params: ExtremumGetterParams<T>) => ExtremumGetterResult;
 export {};

package/esm/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/esm/BarChart/extremums.js

@@ -16,9 +16,11 @@ const getValueExtremum = params => {
     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 [seriesMin, seriesMax] = series[seriesId].stackedData?.reduce((seriesAcc, values) => {
+      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.

package/esm/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/esm/ChartContainer/useChartContainerProps.js

@@ -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/esm/ChartsTooltip/utils.js

@@ -47,8 +47,10 @@ export function useMouseTracker() {
     if (element === null) {
       return () => {};
     }
-    const handleOut = () => {
-      setMousePosition(null);
+    const handleOut = event => {
+      if (event.pointerType !== 'mouse') {
+        setMousePosition(null);
+      }
     };
     const handleMove = event => {
       setMousePosition({

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -15,6 +15,8 @@ import { getMinXTranslation } from '../internals/geometry';
 import { useMounted } from '../hooks/useMounted';
 import { useDrawingArea } from '../hooks/useDrawingArea';
 import { getWordsByLines } from '../internals/getWordsByLines';
+import { isInfinity } from '../internals/isInfinity';
+import { isBandScale } from '../internals/isBandScale';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -137,7 +139,8 @@ function ChartsXAxis(inProps) {
     tickInterval,
     tickLabelInterval,
     tickPlacement,
-    tickLabelPlacement
+    tickLabelPlacement,
+    sx
   } = defaultizedProps;
   const theme = useTheme();
   const classes = useUtilityClasses(_extends({}, defaultizedProps, {
@@ -199,15 +202,17 @@ function ChartsXAxis(inProps) {
     ownerState: {}
   });
   const domain = xScale.domain();
-  if (domain.length === 0 || domain[0] === domain[1]) {
-    // Skip axis rendering if
-    // - the data is empty (for band and point axis)
-    // - No data is associated to the axis (other scale types)
+  const ordinalAxis = isBandScale(xScale);
+  // Skip axis rendering if no data is available
+  // - The domain is an empty array for band/point scales.
+  // - The domains contains Infinity for continuous scales.
+  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(isInfinity)) {
     return null;
   }
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,
+    sx: sx,
     children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
       x1: left,
       x2: left + width,
@@ -305,6 +310,7 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * @default 'currentColor'
    */
   stroke: PropTypes.string,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * The font size of the axis ticks text.
    * @default 12

package/esm/ChartsYAxis/ChartsYAxis.js

@@ -12,6 +12,8 @@ import { useDrawingArea } from '../hooks/useDrawingArea';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
 import { ChartsText } from '../ChartsText';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
+import { isInfinity } from '../internals/isInfinity';
+import { isBandScale } from '../internals/isBandScale';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -78,7 +80,8 @@ function ChartsYAxis(inProps) {
     tickPlacement,
     tickLabelPlacement,
     tickInterval,
-    tickLabelInterval
+    tickLabelInterval,
+    sx
   } = defaultizedProps;
   const theme = useTheme();
   const isRTL = theme.direction === 'rtl';
@@ -145,15 +148,17 @@ function ChartsYAxis(inProps) {
     ownerState: {}
   });
   const domain = yScale.domain();
-  if (domain.length === 0 || domain[0] === domain[1]) {
-    // Skip axis rendering if
-    // - the data is empty (for band and point axis)
-    // - No data is associated to the axis (other scale types)
+  const ordinalAxis = isBandScale(yScale);
+  // Skip axis rendering if no data is available
+  // - The domain is an empty array for band/point scales.
+  // - The domains contains Infinity for continuous scales.
+  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(isInfinity)) {
     return null;
   }
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: `translate(${position === 'right' ? left + width : left}, 0)`,
     className: classes.root,
+    sx: sx,
     children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
       y1: top,
       y2: top + height,
@@ -253,6 +258,7 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * @default 'currentColor'
    */
   stroke: PropTypes.string,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * The font size of the axis ticks text.
    * @default 12

package/esm/LineChart/AreaPlot.js

@@ -42,7 +42,8 @@ const useAggregatedData = () => {
         yAxisKey = defaultYAxisId,
         stackedData,
         data,
-        connectNulls
+        connectNulls,
+        baseline
       } = series[seriesId];
       const xAxisId = xAxisIdProp ?? xAxisKey;
       const yAxisId = yAxisIdProp ?? yAxisKey;
@@ -59,6 +60,15 @@ const useAggregatedData = () => {
         }
       }
       const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => {
+        if (typeof baseline === 'number') {
+          return yScale(baseline);
+        }
+        if (baseline === 'max') {
+          return yScale.range()[1];
+        }
+        if (baseline === 'min') {
+          return yScale.range()[0];
+        }
         const value = d.y && yScale(d.y[0]);
         if (Number.isNaN(value)) {
           return yScale.range()[0];

package/esm/LineChart/LineChart.js

@@ -274,6 +274,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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]),
@@ -326,6 +327,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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/esm/LineChart/extremums.js

@@ -7,16 +7,10 @@ export const getExtremumX = params => {
   return [minX, maxX];
 };
 function getSeriesExtremums(getValues, stackedData) {
-  if (stackedData.length === 0) {
-    return [null, null];
-  }
   return stackedData.reduce((seriesAcc, stackedValue) => {
     const [base, value] = getValues(stackedValue);
-    if (seriesAcc[0] === null) {
-      return [Math.min(base, value), Math.max(base, value)];
-    }
     return [Math.min(base, value, seriesAcc[0]), Math.max(base, value, seriesAcc[1])];
-  }, getValues(stackedData[0]));
+  }, [Infinity, -Infinity]);
 }
 export const getExtremumY = params => {
   const {
@@ -33,16 +27,11 @@ export const getExtremumY = params => {
       stackedData
     } = series[seriesId];
     const isArea = area !== undefined;
-    const getValues = isArea && axis.scaleType !== 'log' ? d => d : d => [d[1], d[1]]; // Since this series is not used to display an area, we do not consider the base (the d[0]).
 
+    // Since this series is not used to display an area, we do not consider the base (the d[0]).
+    const getValues = isArea && axis.scaleType !== 'log' && typeof series[seriesId].baseline !== 'string' ? d => d : d => [d[1], d[1]];
     const seriesExtremums = getSeriesExtremums(getValues, stackedData);
-    if (acc[0] === null) {
-      return seriesExtremums;
-    }
-    if (seriesExtremums[0] === null) {
-      return acc;
-    }
     const [seriesMin, seriesMax] = seriesExtremums;
     return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
-  }, [null, null]);
+  }, [Infinity, -Infinity]);
 };

package/esm/PieChart/PieChart.js

@@ -318,6 +318,7 @@ process.env.NODE_ENV !== "production" ? PieChart.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]),
@@ -370,6 +371,7 @@ process.env.NODE_ENV !== "production" ? PieChart.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/esm/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -130,6 +130,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.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]),
@@ -182,6 +183,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.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/esm/ScatterChart/ScatterChart.js

@@ -255,6 +255,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -307,6 +308,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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/esm/ScatterChart/extremums.js

@@ -1,10 +1,4 @@
 const mergeMinMax = (acc, val) => {
-  if (acc[0] === null || acc[1] === null) {
-    return val;
-  }
-  if (val[0] === null || val[1] === null) {
-    return acc;
-  }
   return [Math.min(acc[0], val[0]), Math.max(acc[1], val[1])];
 };
 export const getExtremumX = params => {
@@ -20,11 +14,10 @@ export const getExtremumX = params => {
     const seriesMinMax = series[seriesId].data.reduce((accSeries, {
       x
     }) => {
-      const val = [x, x];
-      return mergeMinMax(accSeries, val);
-    }, [null, null]);
+      return mergeMinMax(accSeries, [x, x]);
+    }, [Infinity, -Infinity]);
     return mergeMinMax(acc, seriesMinMax);
-  }, [null, null]);
+  }, [Infinity, -Infinity]);
 };
 export const getExtremumY = params => {
   const {
@@ -39,9 +32,8 @@ export const getExtremumY = params => {
     const seriesMinMax = series[seriesId].data.reduce((accSeries, {
       y
     }) => {
-      const val = [y, y];
-      return mergeMinMax(accSeries, val);
-    }, [null, null]);
+      return mergeMinMax(accSeries, [y, y]);
+    }, [Infinity, -Infinity]);
     return mergeMinMax(acc, seriesMinMax);
-  }, [null, null]);
+  }, [Infinity, -Infinity]);
 };

package/esm/SparkLineChart/SparkLineChart.js

@@ -279,6 +279,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.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]),
@@ -330,6 +331,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.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/esm/context/CartesianProvider/CartesianProvider.js

@@ -6,7 +6,7 @@ import { computeValue } from './computeValue';
 import { useXExtremumGetter } from '../PluginProvider/useXExtremumGetter';
 import { useYExtremumGetter } from '../PluginProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-function CartesianContextProvider(props) {
+function CartesianProvider(props) {
   const {
     xAxis,
     yAxis,
@@ -47,4 +47,4 @@ function CartesianContextProvider(props) {
     children: children
   });
 }
-export { CartesianContextProvider };
+export { CartesianProvider };

package/esm/context/CartesianProvider/getAxisExtremum.js

@@ -5,17 +5,10 @@ const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis, form
     series,
     axis,
     isDefaultAxis
-  }) ?? [null, null];
-  const [minData, maxData] = acc;
-  if (minData === null || maxData === null) {
-    return [minChartTypeData, maxChartTypeData];
-  }
-  if (minChartTypeData === null || maxChartTypeData === null) {
-    return [minData, maxData];
-  }
-  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+  }) ?? [Infinity, -Infinity];
+  return [Math.min(minChartTypeData, acc[0]), Math.max(maxChartTypeData, acc[1])];
 };
 export const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries) => {
   const charTypes = Object.keys(getters);
-  return charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries), [null, null]);
+  return charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries), [Infinity, -Infinity]);
 };

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/isInfinity.js

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

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

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/extremums.js

@@ -16,9 +16,11 @@ const getValueExtremum = params => {
     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 [seriesMin, seriesMax] = series[seriesId].stackedData?.reduce((seriesAcc, values) => {
+      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.

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]),