@mui/x-charts 7.12.1 → 7.13.0

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "7.12.1",
+  "version": "7.13.0",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -36,7 +36,7 @@
     "@react-spring/web": "^9.7.4",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts-vendor": "7.12.1"
+    "@mui/x-charts-vendor": "7.13.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",