@mui/x-charts 7.12.1 → 7.14.0

package/context/CartesianProvider/computeValue.js

@@ -11,22 +11,12 @@ var _axis = require("../../models/axis");
 var _colorScale = require("../../internals/colorScale");
 var _useTicks = require("../../hooks/useTicks");
 var _getScale = require("../../internals/getScale");
+var _zoom = require("./zoom");
 var _getAxisExtremum = require("./getAxisExtremum");
-var _normalizeAxis = require("./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 = (0, _d3Scale.scaleTime)(axis.data, range);
@@ -39,32 +29,37 @@ const DEFAULT_BAR_GAP_RATIO = 0.1;
 function computeValue({
   drawingArea,
   formattedSeries,
-  axis: inAxis,
+  axis: allAxis,
   extremumGetters,
-  dataset,
   axisDirection,
-  zoomData
+  zoomData,
+  zoomOptions,
+  getFilters
 }) {
-  const allAxis = (0, _normalizeAxis.normalizeAxis)(inAxis, dataset, axisDirection);
   const completeAxis = {};
-  allAxis.forEach((axis, axisIndex) => {
+  allAxis.forEach((eachAxis, axisIndex) => {
+    const axis = eachAxis;
     const isDefaultAxis = axisIndex === 0;
-    const [minData, maxData] = (0, _getAxisExtremum.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] = (0, _getAxisExtremum.getAxisExtremum)(axis, extremumGetters, isDefaultAxis, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
+    );
+    const data = axis.data ?? [];
     if ((0, _axis.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 = (0, _zoom.zoomScaleRange)(scaleRange, zoomRange);
       completeAxis[axis.id] = (0, _extends2.default)({
         categoryGapRatio,
         barGapRatio
       }, axis, {
+        data,
         scale: (0, _d3Scale.scaleBand)(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
         tickNumber: axis.data.length,
         colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
@@ -78,8 +73,9 @@ function computeValue({
     }
     if ((0, _axis.isPointScaleConfig)(axis)) {
       const scaleRange = axisDirection === 'x' ? range : [...range].reverse();
-      const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
+      const zoomedRange = (0, _zoom.zoomScaleRange)(scaleRange, zoomRange);
       completeAxis[axis.id] = (0, _extends2.default)({}, axis, {
+        data,
         scale: (0, _d3Scale.scalePoint)(axis.data, zoomedRange),
         tickNumber: axis.data.length,
         colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
@@ -96,19 +92,20 @@ 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 = (0, _useTicks.getTickNumber)((0, _extends2.default)({}, axis, {
       range,
-      domain: extremums
+      domain: axisExtremums
     }));
     const tickNumber = rawTickNumber / ((zoomRange[1] - zoomRange[0]) / 100);
-    const zoomedRange = zoomedScaleRange(range, zoomRange);
+    const zoomedRange = (0, _zoom.zoomScaleRange)(range, zoomRange);
 
     // TODO: move nice to prop? Disable when there is zoom?
-    const scale = (0, _getScale.getScale)(scaleType, extremums, zoomedRange).nice(rawTickNumber);
+    const scale = (0, _getScale.getScale)(scaleType, axisExtremums, zoomedRange).nice(rawTickNumber);
     const [minDomain, maxDomain] = scale.domain();
     const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
     completeAxis[axis.id] = (0, _extends2.default)({}, axis, {
+      data,
       scaleType: scaleType,
       scale: scale.domain(domain),
       tickNumber,

package/context/CartesianProvider/defaultizeAxis.d.ts

@@ -9,6 +9,7 @@ export declare const defaultizeAxis: (inAxis: MakeOptional<AxisConfig<ScaleName,
     label?: string | undefined;
     max?: (number | Date) | undefined;
     min?: (number | Date) | undefined;
+    sx?: import("@mui/system").SxProps | undefined;
     classes?: Partial<import("../..").ChartsAxisClasses> | undefined;
     slots?: Partial<import("../../models/axis").ChartsAxisSlots> | undefined;
     slotProps?: Partial<import("../../models/axis").ChartsAxisSlotProps> | undefined;

package/context/CartesianProvider/getAxisExtremum.d.ts

@@ -1,4 +1,5 @@
 import { AxisConfig } from '../../models';
 import { FormattedSeries } from '../SeriesProvider';
-import { ExtremumGettersConfig, ExtremumGetterResult } from '../PluginProvider';
-export declare const getAxisExtremum: (axis: AxisConfig, getters: ExtremumGettersConfig, isDefaultAxis: boolean, formattedSeries: FormattedSeries) => ExtremumGetterResult;
+import { ExtremumGettersConfig } from '../PluginProvider';
+import { GetZoomAxisFilters } from './Cartesian.types';
+export declare const getAxisExtremum: (axis: AxisConfig, getters: ExtremumGettersConfig, isDefaultAxis: boolean, formattedSeries: FormattedSeries, getFilters?: GetZoomAxisFilters) => number[];

package/context/CartesianProvider/getAxisExtremum.js

@@ -4,25 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getAxisExtremum = void 0;
-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
-  }) ?? [null, null];
+    isDefaultAxis,
+    getFilters
+  }) ?? [Infinity, -Infinity];
   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)];
 };
-const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries) => {
+const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries, getFilters) => {
   const charTypes = Object.keys(getters);
-  return charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries), [null, null]);
+  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;
 };
 exports.getAxisExtremum = getAxisExtremum;

package/context/CartesianProvider/index.d.ts

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

package/context/CartesianProvider/index.js

@@ -44,6 +44,18 @@ Object.keys(_useCartesianContext).forEach(function (key) {
     }
   });
 });
+var _Cartesian = require("./Cartesian.types");
+Object.keys(_Cartesian).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Cartesian[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Cartesian[key];
+    }
+  });
+});
 const cartesianProviderUtils = exports.cartesianProviderUtils = {
   computeValue: _computeValue.computeValue
 };

package/context/CartesianProvider/useCartesianContext.d.ts

@@ -1,2 +1,2 @@
-import { CartesianContextState } from './CartesianContext';
+import { CartesianContextState } from './Cartesian.types';
 export declare const useCartesianContext: () => CartesianContextState;

package/context/CartesianProvider/zoom.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 declare const zoomScaleRange: (scaleRange: [number, number] | number[], zoomRange: [number, number] | number[]) => number[];

package/context/CartesianProvider/zoom.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.zoomScaleRange = void 0;
+/**
+ * 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.
+ */
+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];
+};
+exports.zoomScaleRange = zoomScaleRange;

package/context/DrawingProvider.d.ts

@@ -38,13 +38,18 @@ export type DrawingArea = {
      * @param {Object} point The point to check.
      * @param {number} point.x The x coordinate of the point.
      * @param {number} point.y The y coordinate of the point.
-     * @param {Element} targetElement The target element if relevant.
+     * @param {Object} options The options of the check.
+     * @param {Element} [options.targetElement] The element to check if it is allowed to overflow the drawing area.
+     * @param {'x' | 'y'} [options.direction] The direction to check.
      * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
      */
     isPointInside: (point: {
         x: number;
         y: number;
-    }, targetElement?: Element) => boolean;
+    }, options?: {
+        targetElement?: Element;
+        direction?: 'x' | 'y';
+    }) => boolean;
 };
 export declare const DrawingContext: React.Context<DrawingArea & {
     /**

package/context/DrawingProvider.js

@@ -53,12 +53,20 @@ 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(() => (0, _extends2.default)({
     chartId: chartId ?? ''

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

@@ -1,5 +1,5 @@
 import type { CartesianChartSeriesType, ChartSeries, ChartSeriesType } from '../../models/seriesType/config';
-import type { AxisConfig } from '../../models/axis';
+import type { AxisConfig, AxisId } from '../../models/axis';
 import type { SeriesId } from '../../models/seriesType/common';
 export type ExtremumGettersConfig<T extends ChartSeriesType = CartesianChartSeriesType> = {
     [K in T]?: ExtremumGetter<K>;
@@ -8,7 +8,17 @@ type ExtremumGetterParams<T extends ChartSeriesType> = {
     series: Record<SeriesId, ChartSeries<T>>;
     axis: AxisConfig;
     isDefaultAxis: boolean;
+    getFilters?: (params: {
+        currentAxisId: AxisId | undefined;
+        seriesXAxisId?: AxisId;
+        seriesYAxisId?: AxisId;
+        isDefaultAxis: boolean;
+    }) => ExtremumFilter;
 };
-export type ExtremumGetterResult = [number, number] | [null, null];
+export type ExtremumGetterResult = [number, number];
 export type ExtremumGetter<T extends ChartSeriesType> = (params: ExtremumGetterParams<T>) => ExtremumGetterResult;
+export type ExtremumFilter = (value: {
+    x: number | Date | string | null;
+    y: number | Date | string | null;
+}, dataIndex: number) => boolean;
 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/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/esm/BarChart/extremums.js

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

package/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

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

package/esm/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/esm/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/esm/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/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({