@mui/x-charts 7.13.0 → 7.14.0

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,22 +1,57 @@
+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) => {
+    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])];
@@ -27,7 +62,7 @@ export const getExtremumX = params => {
   // 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);
 };
@@ -36,5 +71,5 @@ export const getExtremumY = params => {
   if (isHorizontal) {
     return getBaseExtremum(params);
   }
-  return getValueExtremum(params);
+  return getValueExtremum('y')(params);
 };

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,

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];
 };

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -25,16 +25,30 @@ export const ChartsAxisHighlightPath = styled('path', {
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
 })(({
-  ownerState,
   theme
-}) => _extends({
-  pointerEvents: 'none'
-}, ownerState.axisHighlight === 'band' && {
-  fill: theme.palette.mode === 'light' ? 'gray' : 'white',
-  fillOpacity: 0.1
-}, ownerState.axisHighlight === 'line' && {
-  strokeDasharray: '5 2',
-  stroke: theme.palette.mode === 'light' ? '#000000' : '#ffffff'
+}) => ({
+  pointerEvents: 'none',
+  variants: [{
+    props: {
+      axisHighlight: 'band'
+    },
+    style: _extends({
+      fill: 'white',
+      fillOpacity: 0.1
+    }, theme.applyStyles('light', {
+      fill: 'gray'
+    }))
+  }, {
+    props: {
+      axisHighlight: 'line'
+    },
+    style: _extends({
+      strokeDasharray: '5 2',
+      stroke: '#ffffff'
+    }, theme.applyStyles('light', {
+      stroke: '#000000'
+    }))
+  }]
 }));
 /**
  * Demos:

package/modern/ChartsGrid/ChartsGrid.js

@@ -8,6 +8,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks } from '../hooks/useTicks';
 import { getChartsGridUtilityClass, chartsGridClasses } from './chartsGridClasses';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridRoot = styled('g', {
   name: 'MuiChartsGrid',
@@ -53,6 +54,7 @@ function ChartsGrid(props) {
     props,
     name: 'MuiChartsGrid'
   });
+  const drawingArea = useDrawingArea();
   const {
       vertical,
       horizontal
@@ -93,8 +95,8 @@ function ChartsGrid(props) {
       formattedValue,
       offset
     }) => /*#__PURE__*/_jsx(GridLine, {
-      y1: yScale.range()[0],
-      y2: yScale.range()[1],
+      y1: drawingArea.top,
+      y2: drawingArea.top + drawingArea.height,
       x1: offset,
       x2: offset,
       className: classes.verticalLine
@@ -104,8 +106,8 @@ function ChartsGrid(props) {
     }) => /*#__PURE__*/_jsx(GridLine, {
       y1: offset,
       y2: offset,
-      x1: xScale.range()[0],
-      x2: xScale.range()[1],
+      x1: drawingArea.left,
+      x2: drawingArea.left + drawingArea.width,
       className: classes.horizontalLine
     }, `horizontal-${formattedValue}`))]
   }));

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -150,7 +150,8 @@ function ChartsXAxis(inProps) {
     left,
     top,
     width,
-    height
+    height,
+    isPointInside
   } = useDrawingArea();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const positionSign = position === 'bottom' ? 1 : -1;
@@ -225,8 +226,18 @@ function ChartsXAxis(inProps) {
     }, index) => {
       const xTickLabel = labelOffset ?? 0;
       const yTickLabel = positionSign * (tickSize + 3);
-      const showTick = offset >= left - 1 && offset <= left + width + 1;
-      const showTickLabel = offset + xTickLabel >= left - 1 && offset + xTickLabel <= left + width + 1;
+      const showTick = isPointInside({
+        x: offset,
+        y: -1
+      }, {
+        direction: 'x'
+      });
+      const showTickLabel = isPointInside({
+        x: offset + xTickLabel,
+        y: -1
+      }, {
+        direction: 'x'
+      });
       return /*#__PURE__*/_jsxs("g", {
         transform: `translate(${offset}, 0)`,
         className: classes.tickContainer,

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -92,7 +92,8 @@ function ChartsYAxis(inProps) {
     left,
     top,
     width,
-    height
+    height,
+    isPointInside
   } = useDrawingArea();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = useTicks({
@@ -172,7 +173,12 @@ function ChartsYAxis(inProps) {
       const xTickLabel = positionSign * (tickSize + 2);
       const yTickLabel = labelOffset;
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
-      const showLabel = offset >= top - 1 && offset <= height + top + 1;
+      const showLabel = isPointInside({
+        x: -1,
+        y: offset
+      }, {
+        direction: 'y'
+      });
       if (!showLabel) {
         return null;
       }

package/modern/LineChart/extremums.js

@@ -6,9 +6,18 @@ export const getExtremumX = params => {
   const maxX = Math.max(...(axis.data ?? []));
   return [minX, maxX];
 };
-function getSeriesExtremums(getValues, stackedData) {
-  return stackedData.reduce((seriesAcc, stackedValue) => {
+function getSeriesExtremums(getValues, stackedData, filter) {
+  return stackedData.reduce((seriesAcc, stackedValue, index) => {
     const [base, value] = getValues(stackedValue);
+    if (filter && (!filter({
+      y: base,
+      x: null
+    }, index) || !filter({
+      y: value,
+      x: null
+    }, index))) {
+      return seriesAcc;
+    }
     return [Math.min(base, value, seriesAcc[0]), Math.max(base, value, seriesAcc[1])];
   }, [Infinity, -Infinity]);
 }
@@ -16,7 +25,8 @@ export const getExtremumY = params => {
   const {
     series,
     axis,
-    isDefaultAxis
+    isDefaultAxis,
+    getFilters
   } = params;
   return Object.keys(series).filter(seriesId => {
     const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
@@ -27,10 +37,16 @@ export const getExtremumY = params => {
       stackedData
     } = series[seriesId];
     const isArea = area !== undefined;
+    const filter = getFilters?.({
+      currentAxisId: axis.id,
+      isDefaultAxis,
+      seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
+      seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
+    });
 
     // 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);
+    const seriesExtremums = getSeriesExtremums(getValues, stackedData, filter);
     const [seriesMin, seriesMax] = seriesExtremums;
     return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
   }, [Infinity, -Infinity]);

package/modern/ScatterChart/extremums.js

@@ -5,16 +5,24 @@ export const getExtremumX = params => {
   const {
     series,
     axis,
-    isDefaultAxis
+    isDefaultAxis,
+    getFilters
   } = params;
   return Object.keys(series).filter(seriesId => {
     const axisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey;
     return axisId === axis.id || axisId === undefined && isDefaultAxis;
   }).reduce((acc, seriesId) => {
-    const seriesMinMax = series[seriesId].data.reduce((accSeries, {
-      x
-    }) => {
-      return mergeMinMax(accSeries, [x, x]);
+    const filter = getFilters?.({
+      currentAxisId: axis.id,
+      isDefaultAxis,
+      seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
+      seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
+    });
+    const seriesMinMax = series[seriesId].data.reduce((accSeries, d, dataIndex) => {
+      if (filter && !filter(d, dataIndex)) {
+        return accSeries;
+      }
+      return mergeMinMax(accSeries, [d.x, d.x]);
     }, [Infinity, -Infinity]);
     return mergeMinMax(acc, seriesMinMax);
   }, [Infinity, -Infinity]);
@@ -23,16 +31,24 @@ export const getExtremumY = params => {
   const {
     series,
     axis,
-    isDefaultAxis
+    isDefaultAxis,
+    getFilters
   } = params;
   return Object.keys(series).filter(seriesId => {
     const axisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
     return axisId === axis.id || axisId === undefined && isDefaultAxis;
   }).reduce((acc, seriesId) => {
-    const seriesMinMax = series[seriesId].data.reduce((accSeries, {
-      y
-    }) => {
-      return mergeMinMax(accSeries, [y, y]);
+    const filter = getFilters?.({
+      currentAxisId: axis.id,
+      isDefaultAxis,
+      seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
+      seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
+    });
+    const seriesMinMax = series[seriesId].data.reduce((accSeries, d, dataIndex) => {
+      if (filter && !filter(d, dataIndex)) {
+        return accSeries;
+      }
+      return mergeMinMax(accSeries, [d.y, d.y]);
     }, [Infinity, -Infinity]);
     return mergeMinMax(acc, seriesMinMax);
   }, [Infinity, -Infinity]);

package/modern/context/CartesianProvider/Cartesian.types.js

@@ -0,0 +1 @@
+export {};

package/modern/context/CartesianProvider/CartesianProvider.js

@@ -10,7 +10,6 @@ function CartesianProvider(props) {
   const {
     xAxis,
     yAxis,
-    dataset,
     children
   } = props;
   const formattedSeries = useSeries();
@@ -22,17 +21,15 @@ function CartesianProvider(props) {
     formattedSeries,
     axis: xAxis,
     extremumGetters: xExtremumGetters,
-    dataset,
     axisDirection: 'x'
-  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, dataset]);
+  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters]);
   const yValues = React.useMemo(() => computeValue({
     drawingArea,
     formattedSeries,
     axis: yAxis,
     extremumGetters: yExtremumGetters,
-    dataset,
     axisDirection: 'y'
-  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, dataset]);
+  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters]);
   const value = React.useMemo(() => ({
     isInitialized: true,
     data: {

package/modern/context/CartesianProvider/computeValue.js

@@ -4,22 +4,12 @@ import { isBandScaleConfig, isPointScaleConfig } from '../../models/axis';
 import { getColorScale, getOrdinalColorScale } from '../../internals/colorScale';
 import { getTickNumber } from '../../hooks/useTicks';
 import { getScale } from '../../internals/getScale';
+import { zoomScaleRange } from './zoom';
 import { getAxisExtremum } from './getAxisExtremum';
-import { normalizeAxis } from './normalizeAxis';
 const getRange = (drawingArea, axisDirection, isReverse) => {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return isReverse ? range.reverse() : range;
 };
-const zoomedScaleRange = (scaleRange, zoomRange) => {
-  const rangeGap = scaleRange[1] - scaleRange[0];
-  const zoomGap = zoomRange[1] - zoomRange[0];
-
-  // If current zoom show the scale between p1 and p2 percents
-  // The range should be extended by adding [0, p1] and [p2, 100] segments
-  const min = scaleRange[0] - zoomRange[0] * rangeGap / zoomGap;
-  const max = scaleRange[1] + (100 - zoomRange[1]) * rangeGap / zoomGap;
-  return [min, max];
-};
 const isDateData = data => data?.[0] instanceof Date;
 function createDateFormatter(axis, range) {
   const timeScale = scaleTime(axis.data, range);
@@ -32,32 +22,37 @@ const DEFAULT_BAR_GAP_RATIO = 0.1;
 export function computeValue({
   drawingArea,
   formattedSeries,
-  axis: inAxis,
+  axis: allAxis,
   extremumGetters,
-  dataset,
   axisDirection,
-  zoomData
+  zoomData,
+  zoomOptions,
+  getFilters
 }) {
-  const allAxis = normalizeAxis(inAxis, dataset, axisDirection);
   const completeAxis = {};
-  allAxis.forEach((axis, axisIndex) => {
+  allAxis.forEach((eachAxis, axisIndex) => {
+    const axis = eachAxis;
     const isDefaultAxis = axisIndex === 0;
-    const [minData, maxData] = getAxisExtremum(axis, extremumGetters, isDefaultAxis, formattedSeries);
+    const zoomOption = zoomOptions?.[axis.id];
     const zoom = zoomData?.find(({
       axisId
     }) => axisId === axis.id);
     const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
     const range = getRange(drawingArea, axisDirection, axis.reverse);
+    const [minData, maxData] = getAxisExtremum(axis, extremumGetters, isDefaultAxis, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
+    );
+    const data = axis.data ?? [];
     if (isBandScaleConfig(axis)) {
       const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
       const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
       // Reverse range because ordinal scales are presented from top to bottom on y-axis
       const scaleRange = axisDirection === 'x' ? range : [range[1], range[0]];
-      const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
+      const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({
         categoryGapRatio,
         barGapRatio
       }, axis, {
+        data,
         scale: scaleBand(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
         tickNumber: axis.data.length,
         colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
@@ -71,8 +66,9 @@ export function computeValue({
     }
     if (isPointScaleConfig(axis)) {
       const scaleRange = axisDirection === 'x' ? range : [...range].reverse();
-      const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
+      const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({}, axis, {
+        data,
         scale: scalePoint(axis.data, zoomedRange),
         tickNumber: axis.data.length,
         colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
@@ -89,19 +85,20 @@ export function computeValue({
       return;
     }
     const scaleType = axis.scaleType ?? 'linear';
-    const extremums = [axis.min ?? minData, axis.max ?? maxData];
+    const axisExtremums = [axis.min ?? minData, axis.max ?? maxData];
     const rawTickNumber = getTickNumber(_extends({}, axis, {
       range,
-      domain: extremums
+      domain: axisExtremums
     }));
     const tickNumber = rawTickNumber / ((zoomRange[1] - zoomRange[0]) / 100);
-    const zoomedRange = zoomedScaleRange(range, zoomRange);
+    const zoomedRange = zoomScaleRange(range, zoomRange);
 
     // TODO: move nice to prop? Disable when there is zoom?
-    const scale = getScale(scaleType, extremums, zoomedRange).nice(rawTickNumber);
+    const scale = getScale(scaleType, axisExtremums, zoomedRange).nice(rawTickNumber);
     const [minDomain, maxDomain] = scale.domain();
     const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
     completeAxis[axis.id] = _extends({}, axis, {
+      data,
       scaleType: scaleType,
       scale: scale.domain(domain),
       tickNumber,

package/modern/context/CartesianProvider/getAxisExtremum.js

@@ -1,14 +1,20 @@
-const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis, formattedSeries) => {
+const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis, formattedSeries, getFilters) => {
   const getter = getters[chartType];
   const series = formattedSeries[chartType]?.series ?? {};
   const [minChartTypeData, maxChartTypeData] = getter?.({
     series,
     axis,
-    isDefaultAxis
+    isDefaultAxis,
+    getFilters
   }) ?? [Infinity, -Infinity];
-  return [Math.min(minChartTypeData, acc[0]), Math.max(maxChartTypeData, acc[1])];
+  const [minData, maxData] = acc;
+  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
 };
-export const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries) => {
+export const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries, getFilters) => {
   const charTypes = Object.keys(getters);
-  return charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries), [Infinity, -Infinity]);
+  const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries, getFilters), [Infinity, -Infinity]);
+  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
+    return [Infinity, -Infinity];
+  }
+  return extremums;
 };

package/modern/context/CartesianProvider/index.js

@@ -2,6 +2,7 @@ import { computeValue } from './computeValue';
 export * from './CartesianProvider';
 export * from './CartesianContext';
 export * from './useCartesianContext';
+export * from './Cartesian.types';
 const cartesianProviderUtils = {
   computeValue
 };

package/modern/context/CartesianProvider/zoom.js

@@ -0,0 +1,19 @@
+/**
+ * Applies the zoom into the scale range.
+ * It changes the screen coordinates that the scale covers.
+ * Not the data that is displayed.
+ *
+ * @param scaleRange the original range in real screen coordinates.
+ * @param zoomRange the zoom range in percentage.
+ * @returns zoomed range in real screen coordinates.
+ */
+export const zoomScaleRange = (scaleRange, zoomRange) => {
+  const rangeGap = scaleRange[1] - scaleRange[0];
+  const zoomGap = zoomRange[1] - zoomRange[0];
+
+  // If current zoom show the scale between p1 and p2 percents
+  // The range should be extended by adding [0, p1] and [p2, 100] segments
+  const min = scaleRange[0] - zoomRange[0] * rangeGap / zoomGap;
+  const max = scaleRange[1] + (100 - zoomRange[1]) * rangeGap / zoomGap;
+  return [min, max];
+};

package/modern/context/DrawingProvider.js

@@ -42,12 +42,20 @@ export function DrawingProvider(props) {
   const isPointInside = React.useCallback(({
     x,
     y
-  }, targetElement) => {
+  }, options) => {
     // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
-    if (targetElement && targetElement.closest('[data-drawing-container]')) {
+    if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
       return true;
     }
-    return x >= drawingArea.left && x <= drawingArea.left + drawingArea.width && y >= drawingArea.top && y <= drawingArea.top + drawingArea.height;
+    const isInsideX = x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width;
+    const isInsideY = y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height;
+    if (options?.direction === 'x') {
+      return isInsideX;
+    }
+    if (options?.direction === 'y') {
+      return isInsideY;
+    }
+    return isInsideX && isInsideY;
   }, [drawingArea]);
   const value = React.useMemo(() => _extends({
     chartId: chartId ?? ''

package/modern/hooks/useAxisEvents.js

@@ -98,7 +98,9 @@ export const useAxisEvents = disableAxisListener => {
       const svgPoint = 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/modern/index.js

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