@mui/x-charts 7.12.1 → 7.14.0

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/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, {
@@ -147,7 +150,8 @@ function ChartsXAxis(inProps) {
     left,
     top,
     width,
-    height
+    height,
+    isPointInside
   } = useDrawingArea();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const positionSign = position === 'bottom' ? 1 : -1;
@@ -199,15 +203,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,
@@ -220,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,
@@ -305,6 +321,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';
@@ -89,7 +92,8 @@ function ChartsYAxis(inProps) {
     left,
     top,
     width,
-    height
+    height,
+    isPointInside
   } = useDrawingArea();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = useTicks({
@@ -145,15 +149,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,
@@ -167,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;
       }
@@ -253,6 +264,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

@@ -6,23 +6,27 @@ export const getExtremumX = params => {
   const maxX = Math.max(...(axis.data ?? []));
   return [minX, maxX];
 };
-function getSeriesExtremums(getValues, stackedData) {
-  if (stackedData.length === 0) {
-    return [null, null];
-  }
-  return stackedData.reduce((seriesAcc, stackedValue) => {
+function getSeriesExtremums(getValues, stackedData, filter) {
+  return stackedData.reduce((seriesAcc, stackedValue, index) => {
     const [base, value] = getValues(stackedValue);
-    if (seriesAcc[0] === null) {
-      return [Math.min(base, value), Math.max(base, value)];
+    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])];
-  }, getValues(stackedData[0]));
+  }, [Infinity, -Infinity]);
 }
 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;
@@ -33,16 +37,17 @@ 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]).
+    const filter = getFilters?.({
+      currentAxisId: axis.id,
+      isDefaultAxis,
+      seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
+      seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
+    });
 
-    const seriesExtremums = getSeriesExtremums(getValues, stackedData);
-    if (acc[0] === null) {
-      return seriesExtremums;
-    }
-    if (seriesExtremums[0] === null) {
-      return acc;
-    }
+    // 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, filter);
     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,47 +1,55 @@
 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 => {
   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
-    }) => {
-      const val = [x, x];
-      return mergeMinMax(accSeries, val);
-    }, [null, null]);
+    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);
-  }, [null, null]);
+  }, [Infinity, -Infinity]);
 };
 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
-    }) => {
-      const val = [y, y];
-      return mergeMinMax(accSeries, val);
-    }, [null, null]);
+    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);
-  }, [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/Cartesian.types.js

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

package/modern/context/CartesianProvider/CartesianProvider.js

@@ -6,11 +6,10 @@ 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,
-    dataset,
     children
   } = props;
   const formattedSeries = useSeries();
@@ -22,17 +21,15 @@ function CartesianContextProvider(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: {
@@ -47,4 +44,4 @@ function CartesianContextProvider(props) {
     children: children
   });
 }
-export { CartesianContextProvider };
+export { CartesianProvider };

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,