@mui/x-charts 7.8.0 → 7.10.0

package/hooks/useAxisEvents.js

@@ -106,7 +106,7 @@ const useAxisEvents = disableAxisListener => {
     };
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = (0, _getSVGPoint.getSVGPoint)(svgRef.current, target);
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
       mousePosition.current = {
         x: svgPoint.x,
         y: svgPoint.y
@@ -129,15 +129,26 @@ const useAxisEvents = disableAxisListener => {
         }
       });
     };
-    element.addEventListener('mouseout', handleOut);
-    element.addEventListener('mousemove', handleMove);
-    element.addEventListener('touchend', handleOut);
-    element.addEventListener('touchmove', handleMove);
+    const handleDown = event => {
+      const target = event.currentTarget;
+      if (!target) {
+        return;
+      }
+      if (target.hasPointerCapture(event.pointerId)) {
+        target.releasePointerCapture(event.pointerId);
+      }
+    };
+    element.addEventListener('pointerdown', handleDown);
+    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointerout', handleOut);
+    element.addEventListener('pointercancel', handleOut);
+    element.addEventListener('pointerleave', handleOut);
     return () => {
-      element.removeEventListener('mouseout', handleOut);
-      element.removeEventListener('mousemove', handleMove);
-      element.removeEventListener('touchend', handleOut);
-      element.removeEventListener('touchmove', handleMove);
+      element.removeEventListener('pointerdown', handleDown);
+      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointerout', handleOut);
+      element.removeEventListener('pointercancel', handleOut);
+      element.removeEventListener('pointerleave', handleOut);
     };
   }, [svgRef, dispatch, left, width, top, height, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener]);
 };

package/hooks/useInteractionItemProps.d.ts

@@ -1,5 +1,7 @@
+import * as React from 'react';
 import { SeriesItemIdentifier } from '../models';
 export declare const useInteractionItemProps: (skip?: boolean) => (() => {}) | ((data: SeriesItemIdentifier) => {
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
+    onPointerEnter: () => void;
+    onPointerLeave: (event: React.PointerEvent) => void;
+    onPointerDown: (event: React.PointerEvent) => void;
 });

package/hooks/useInteractionItemProps.js

@@ -21,7 +21,12 @@ const useInteractionItemProps = skip => {
     return () => ({});
   }
   const getInteractionItemProps = data => {
-    const onMouseEnter = () => {
+    const onPointerDown = event => {
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+    };
+    const onPointerEnter = () => {
       dispatchInteraction({
         type: 'enterItem',
         data
@@ -31,7 +36,8 @@ const useInteractionItemProps = skip => {
         dataIndex: data.dataIndex
       });
     };
-    const onMouseLeave = () => {
+    const onPointerLeave = event => {
+      event.currentTarget.releasePointerCapture(event.pointerId);
       dispatchInteraction({
         type: 'leaveItem',
         data
@@ -39,8 +45,9 @@ const useInteractionItemProps = skip => {
       clearHighlighted();
     };
     return {
-      onMouseEnter,
-      onMouseLeave
+      onPointerEnter,
+      onPointerLeave,
+      onPointerDown
     };
   };
   return getInteractionItemProps;

package/hooks/useScale.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.getValueToPositionMapper = getValueToPositionMapper;
 exports.useXScale = useXScale;
 exports.useYScale = useYScale;
-var _CartesianProvider = require("../context/CartesianProvider");
 var _isBandScale = require("../internals/isBandScale");
+var _useAxis = require("./useAxis");
 /**
  * For a given scale return a function that map value to their position.
  * Useful when dealing with specific scale such as band.
@@ -21,18 +21,10 @@ function getValueToPositionMapper(scale) {
   return value => scale(value);
 }
 function useXScale(identifier) {
-  const {
-    xAxis,
-    xAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
-  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
-  return xAxis[id].scale;
+  const axis = (0, _useAxis.useXAxis)(identifier);
+  return axis.scale;
 }
 function useYScale(identifier) {
-  const {
-    yAxis,
-    yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
-  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
-  return yAxis[id].scale;
+  const axis = (0, _useAxis.useYAxis)(identifier);
+  return axis.scale;
 }

package/index.js

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

package/internals/index.d.ts

@@ -3,6 +3,7 @@ export * from '../ResponsiveChartContainer/useChartContainerDimensions';
 export * from '../ResponsiveChartContainer/ResizableContainer';
 export { useReducedMotion } from '../hooks/useReducedMotion';
 export { useSeries } from '../hooks/useSeries';
+export { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 export { useDrawingArea } from '../hooks/useDrawingArea';
 export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks';
 export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
@@ -10,6 +11,7 @@ export { useLineChartProps } from '../LineChart/useLineChartProps';
 export { useBarChartProps } from '../BarChart/useBarChartProps';
 export * from './defaultizeValueFormatter';
 export * from './configInit';
+export * from './getLabel';
 export * from './getSVGPoint';
 export * from '../context/CartesianProvider';
 export * from '../context/DrawingProvider';

package/internals/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   useReducedMotion: true,
   useSeries: true,
+  useInteractionItemProps: true,
   useDrawingArea: true,
   useChartContainerHooks: true,
   useScatterChartProps: true,
@@ -30,6 +31,12 @@ Object.defineProperty(exports, "useDrawingArea", {
     return _useDrawingArea.useDrawingArea;
   }
 });
+Object.defineProperty(exports, "useInteractionItemProps", {
+  enumerable: true,
+  get: function () {
+    return _useInteractionItemProps.useInteractionItemProps;
+  }
+});
 Object.defineProperty(exports, "useLineChartProps", {
   enumerable: true,
   get: function () {
@@ -92,6 +99,7 @@ Object.keys(_ResizableContainer).forEach(function (key) {
 });
 var _useReducedMotion = require("../hooks/useReducedMotion");
 var _useSeries = require("../hooks/useSeries");
+var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useChartContainerHooks = require("../ChartContainer/useChartContainerHooks");
 var _useScatterChartProps = require("../ScatterChart/useScatterChartProps");
@@ -121,6 +129,18 @@ Object.keys(_configInit).forEach(function (key) {
     }
   });
 });
+var _getLabel = require("./getLabel");
+Object.keys(_getLabel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _getLabel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _getLabel[key];
+    }
+  });
+});
 var _getSVGPoint = require("./getSVGPoint");
 Object.keys(_getSVGPoint).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/models/colorMapping.d.ts

@@ -13,7 +13,7 @@ export interface ContinuousColorConfig<Value = number | Date> {
     /**
      * The colors to render. It can be an array with the extremum colors, or an interpolation function.
      */
-    color: [string, string] | ((t: number) => string);
+    color: readonly [string, string] | ((t: number) => string);
 }
 export interface PiecewiseColorConfig<Value = number | Date> {
     type: 'piecewise';

package/models/z-axis.d.ts

@@ -7,6 +7,14 @@ export interface ZAxisConfig<V = any> {
      * The key used to retrieve `data` from the `dataset` prop.
      */
     dataKey?: string;
+    /**
+     * The minimal value of the scale.
+     */
+    min?: number;
+    /**
+     * The maximal value of the scale.
+     */
+    max?: number;
     colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
 }
 export interface ZAxisDefaultized extends ZAxisConfig {

package/modern/ChartContainer/ChartContainer.js

@@ -283,7 +283,9 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
-    id: PropTypes.string
+    id: PropTypes.string,
+    max: PropTypes.number,
+    min: PropTypes.number
   }))
 } : void 0;
 export { ChartContainer };

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -86,7 +86,7 @@ function ChartsAxisHighlight(props) {
       ownerState: {
         axisHighlight: 'band'
       }
-    }), isBandScaleY && yScale(axisY.value) === undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+    }), isBandScaleY && yScale(axisY.value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
       d: `M ${xScale.range()[0]} ${
       // @ts-expect-error, yScale value is checked in the statement above
       yScale(axisY.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${xScale.range()[1] - xScale.range()[0]} 0 l 0 ${-yScale.step()} Z`,

package/modern/ChartsSurface.js

@@ -9,7 +9,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
-})(() => ({}));
+})(() => ({
+  // This prevents default touch actions when using the svg on mobile devices.
+  // For example, prevent page scroll & zoom.
+  touchAction: 'none'
+}));
 const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
   const {
       children,

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
@@ -9,6 +8,9 @@ import { useColorProcessor } from '../hooks/useColor';
 import { isCartesianSeriesType } from '../internals/isCartesian';
 import { useSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
 function ChartsAxisTooltipContent(props) {
   const {
     content,
@@ -71,41 +73,4 @@ function ChartsAxisTooltipContent(props) {
   });
   return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
 }
-process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  axisData: PropTypes.shape({
-    x: PropTypes.shape({
-      index: PropTypes.number,
-      value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired
-    }),
-    y: PropTypes.shape({
-      index: PropTypes.number,
-      value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired
-    })
-  }).isRequired,
-  classes: PropTypes.object.isRequired,
-  content: PropTypes.elementType,
-  contentProps: PropTypes.shape({
-    axis: PropTypes.object,
-    axisData: PropTypes.shape({
-      x: PropTypes.shape({
-        index: PropTypes.number,
-        value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired
-      }),
-      y: PropTypes.shape({
-        index: PropTypes.number,
-        value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired
-      })
-    }),
-    axisValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]),
-    classes: PropTypes.object,
-    dataIndex: PropTypes.number,
-    series: PropTypes.arrayOf(PropTypes.object),
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-  }),
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
 export { ChartsAxisTooltipContent };

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
 import { DefaultChartsItemTooltipContent } from './DefaultChartsItemTooltipContent';
 import { useCartesianContext } from '../context/CartesianProvider';
@@ -8,6 +7,9 @@ import { ZAxisContext } from '../context/ZAxisContextProvider';
 import { useColorProcessor } from '../hooks/useColor';
 import { useSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
 function ChartsItemTooltipContent(props) {
   const {
     content,
@@ -47,29 +49,4 @@ function ChartsItemTooltipContent(props) {
   });
   return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
 }
-process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  classes: PropTypes.object.isRequired,
-  content: PropTypes.elementType,
-  contentProps: PropTypes.shape({
-    classes: PropTypes.object,
-    getColor: PropTypes.func,
-    itemData: PropTypes.shape({
-      dataIndex: PropTypes.number,
-      seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-      type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
-    }),
-    series: PropTypes.object,
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-  }),
-  itemData: PropTypes.shape({
-    dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
-  }).isRequired,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
 export { ChartsItemTooltipContent };

package/modern/ChartsTooltip/ChartsTooltip.js

@@ -77,8 +77,14 @@ function ChartsTooltip(props) {
     externalSlotProps: slotProps?.popper,
     additionalProps: {
       open: popperOpen,
-      placement: 'right-start',
-      anchorEl: generateVirtualElement(mousePosition)
+      placement: mousePosition?.pointerType === 'mouse' ? 'right-start' : 'top',
+      anchorEl: generateVirtualElement(mousePosition),
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, mousePosition?.pointerType === 'touch' ? 40 - mousePosition.height : 0]
+        }
+      }]
     },
     ownerState: {}
   });

package/modern/ChartsTooltip/ChartsTooltipTable.js

@@ -1,6 +1,10 @@
 import { styled } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system';
 import { chartsTooltipClasses } from './chartsTooltipClasses';
+
+/**
+ * @ignore - internal component.
+ */
 export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
   slot: 'Container'
@@ -13,6 +17,10 @@ export const ChartsTooltipPaper = styled('div', {
   transition: theme.transitions.create('box-shadow'),
   borderRadius: theme.shape.borderRadius
 }));
+
+/**
+ * @ignore - internal component.
+ */
 export const ChartsTooltipTable = styled('table', {
   name: 'MuiChartsTooltip',
   slot: 'Table'
@@ -24,6 +32,10 @@ export const ChartsTooltipTable = styled('table', {
     borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`
   }
 }));
+
+/**
+ * @ignore - internal component.
+ */
 export const ChartsTooltipRow = styled('tr', {
   name: 'MuiChartsTooltip',
   slot: 'Row'
@@ -37,6 +49,10 @@ export const ChartsTooltipRow = styled('tr', {
     paddingBottom: theme.spacing(1)
   }
 }));
+
+/**
+ * @ignore - internal component.
+ */
 export const ChartsTooltipCell = styled('td', {
   name: 'MuiChartsTooltip',
   slot: 'Cell'
@@ -59,6 +75,10 @@ export const ChartsTooltipCell = styled('td', {
     paddingRight: theme.spacing(2)
   }
 }));
+
+/**
+ * @ignore - internal component.
+ */
 export const ChartsTooltipMark = styled('div', {
   name: 'MuiChartsTooltip',
   slot: 'Mark',

package/modern/ChartsTooltip/index.js

@@ -3,4 +3,5 @@ export * from './chartsTooltipClasses';
 export * from './ChartsAxisTooltipContent';
 export * from './ChartsItemTooltipContent';
 export * from './DefaultChartsAxisTooltipContent';
-export * from './DefaultChartsItemTooltipContent';
+export * from './DefaultChartsItemTooltipContent';
+export * from './ChartsTooltipTable';

package/modern/ChartsTooltip/utils.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useSvgRef } from '../hooks';
 export function generateVirtualElement(mousePosition) {
@@ -20,26 +21,19 @@ export function generateVirtualElement(mousePosition) {
     x,
     y
   } = mousePosition;
+  const boundingBox = {
+    width: 0,
+    height: 0,
+    x,
+    y,
+    top: y,
+    right: x,
+    bottom: y,
+    left: x
+  };
   return {
-    getBoundingClientRect: () => ({
-      width: 0,
-      height: 0,
-      x,
-      y,
-      top: y,
-      right: x,
-      bottom: y,
-      left: x,
-      toJSON: () => JSON.stringify({
-        width: 0,
-        height: 0,
-        x,
-        y,
-        top: y,
-        right: x,
-        bottom: y,
-        left: x
-      })
+    getBoundingClientRect: () => _extends({}, boundingBox, {
+      toJSON: () => JSON.stringify(boundingBox)
     })
   };
 }
@@ -57,21 +51,20 @@ export function useMouseTracker() {
       setMousePosition(null);
     };
     const handleMove = event => {
-      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
       setMousePosition({
-        x: target.clientX,
-        y: target.clientY
+        x: event.clientX,
+        y: event.clientY,
+        height: event.height,
+        pointerType: event.pointerType
       });
     };
-    element.addEventListener('mouseout', handleOut);
-    element.addEventListener('mousemove', handleMove);
-    element.addEventListener('touchend', handleOut);
-    element.addEventListener('touchmove', handleMove);
+    element.addEventListener('pointerdown', handleMove);
+    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointerup', handleOut);
     return () => {
-      element.removeEventListener('mouseout', handleOut);
-      element.removeEventListener('mousemove', handleMove);
-      element.addEventListener('touchend', handleOut);
-      element.addEventListener('touchmove', handleMove);
+      element.removeEventListener('pointerdown', handleMove);
+      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointerup', handleOut);
     };
   }, [svgRef]);
   return mousePosition;

package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -96,7 +96,7 @@ function ChartsVoronoiHandler(props) {
     // TODO: A perf optimisation of voronoi could be to use the last point as the initial point for the next search.
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
-      const svgPoint = getSVGPoint(svgRef.current, event);
+      const svgPoint = getSVGPoint(element, event);
       const outsideX = svgPoint.x < left || svgPoint.x > left + width;
       const outsideY = svgPoint.y < top || svgPoint.y > top + height;
       if (outsideX || outsideY) {
@@ -191,12 +191,12 @@ function ChartsVoronoiHandler(props) {
         dataIndex
       });
     };
-    element.addEventListener('mouseout', handleMouseOut);
-    element.addEventListener('mousemove', handleMouseMove);
+    element.addEventListener('pointerout', handleMouseOut);
+    element.addEventListener('pointermove', handleMouseMove);
     element.addEventListener('click', handleMouseClick);
     return () => {
-      element.removeEventListener('mouseout', handleMouseOut);
-      element.removeEventListener('mousemove', handleMouseMove);
+      element.removeEventListener('pointerout', handleMouseOut);
+      element.removeEventListener('pointermove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
   }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted]);

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -209,10 +209,10 @@ function ChartsXAxis(inProps) {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,
     children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
-      x1: xScale.range()[0],
-      x2: xScale.range()[1],
+      x1: left,
+      x2: left + width,
       className: classes.line
-    }, slotProps?.axisLine)), xTicksWithDimension.map(({
+    }, slotProps?.axisLine)), xTicksWithDimension.filter(tick => tick.offset >= left - 1 && tick.offset <= left + width + 1).map(({
       formattedValue,
       offset,
       labelOffset,
@@ -220,13 +220,15 @@ 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;
       return /*#__PURE__*/_jsxs("g", {
         transform: `translate(${offset}, 0)`,
         className: classes.tickContainer,
-        children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
+        children: [!disableTicks && showTick && /*#__PURE__*/_jsx(Tick, _extends({
           y2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
+        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && showTickLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
           y: yTickLabel
         }, axisTickLabelProps, {

package/modern/LineChart/AreaPlot.js

@@ -54,7 +54,13 @@ const useAggregatedData = () => {
           throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
         }
       }
-      const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));
+      const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => {
+        const value = d.y && yScale(d.y[0]);
+        if (Number.isNaN(value)) {
+          return yScale.range()[0];
+        }
+        return value;
+      }).y1(d => d.y && yScale(d.y[1]));
       const curve = getCurveFactory(series[seriesId].curve);
       const formattedData = xData?.map((x, index) => ({
         x,

package/modern/LineChart/MarkPlot.js

@@ -11,6 +11,7 @@ import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { cleanId } from '../internals/utils';
 import getColor from './getColor';
 import { useLineSeries } from '../hooks/useSeries';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -33,6 +34,10 @@ function MarkPlot(props) {
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
   const chartId = useChartId();
+  const {
+    left,
+    width
+  } = useDrawingArea();
   const Mark = slots?.mark ?? MarkElement;
   if (seriesData === undefined) {
     return null;
@@ -67,13 +72,12 @@ function MarkPlot(props) {
         const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
-        const xRange = xAxis[xAxisKey].scale.range();
         const yRange = yScale.range();
         const isInRange = ({
           x,
           y
         }) => {
-          if (x < Math.min(...xRange) || x > Math.max(...xRange)) {
+          if (x < left || x > left + width) {
             return false;
           }
           if (y < Math.min(...yRange) || y > Math.max(...yRange)) {

package/modern/LineChart/extremums.js

@@ -30,7 +30,7 @@ export const getExtremumY = params => {
       stackedData
     } = series[seriesId];
     const isArea = area !== undefined;
-    const getValues = isArea ? 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 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 seriesExtremums = getSeriesExtremums(getValues, stackedData);
     if (acc[0] === null) {

package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -229,7 +229,9 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
-    id: PropTypes.string
+    id: PropTypes.string,
+    max: PropTypes.number,
+    min: PropTypes.number
   }))
 } : void 0;
 export { ResponsiveChartContainer };