@mui/x-charts 7.7.1 → 7.9.0

package/internals/defaultizeColor.d.ts

@@ -2,92 +2,92 @@ import { AllSeriesType } from '../models/seriesType';
 export declare function defaultizeColor(series: AllSeriesType, seriesIndex: number, colors?: string[]): {
     data: {
         color: string;
-        label?: string | ((location: "tooltip" | "legend" | "arc") => string) | undefined;
+        label?: string | ((location: "tooltip" | "legend" | "arc") => string);
         value: number;
         id?: import("../models/seriesType").PieItemId | undefined;
     }[];
     type: "pie";
-    innerRadius?: string | number | undefined;
-    outerRadius?: string | number | undefined;
-    arcLabelRadius?: string | number | undefined;
-    cornerRadius?: number | undefined;
-    startAngle?: number | undefined;
-    endAngle?: number | undefined;
-    paddingAngle?: number | undefined;
-    sortingValues?: import("../models/seriesType").ChartsPieSorting | undefined;
-    arcLabel?: "label" | "value" | "formattedValue" | ((item: Omit<import("../models/seriesType").DefaultizedPieValueType, "label"> & {
-        label?: string | undefined;
-    }) => string) | undefined;
-    arcLabelMinAngle?: number | undefined;
-    cx?: string | number | undefined;
-    cy?: string | number | undefined;
+    innerRadius?: number | string;
+    outerRadius?: number | string;
+    arcLabelRadius?: number | string;
+    cornerRadius?: number;
+    startAngle?: number;
+    endAngle?: number;
+    paddingAngle?: number;
+    sortingValues?: import("../models/seriesType").ChartsPieSorting;
+    arcLabel?: "formattedValue" | "label" | "value" | ((item: Omit<import("../models/seriesType").DefaultizedPieValueType, "label"> & {
+        label?: string;
+    }) => string);
+    arcLabelMinAngle?: number;
+    cx?: number | string;
+    cy?: number | string;
     highlighted?: {
-        additionalRadius?: number | undefined;
-        innerRadius?: number | undefined;
-        outerRadius?: number | undefined;
-        cornerRadius?: number | undefined;
-        paddingAngle?: number | undefined;
-        arcLabelRadius?: number | undefined;
-        color?: string | undefined;
-    } | undefined;
+        additionalRadius?: number;
+        innerRadius?: number;
+        outerRadius?: number;
+        cornerRadius?: number;
+        paddingAngle?: number;
+        arcLabelRadius?: number;
+        color?: string;
+    };
     faded?: {
-        additionalRadius?: number | undefined;
-        innerRadius?: number | undefined;
-        outerRadius?: number | undefined;
-        cornerRadius?: number | undefined;
-        paddingAngle?: number | undefined;
-        arcLabelRadius?: number | undefined;
-        color?: string | undefined;
-    } | undefined;
-    id?: import(".").SeriesId | undefined;
-    color?: string | undefined;
+        additionalRadius?: number;
+        innerRadius?: number;
+        outerRadius?: number;
+        cornerRadius?: number;
+        paddingAngle?: number;
+        arcLabelRadius?: number;
+        color?: string;
+    };
+    id?: import(".").SeriesId;
+    color?: string;
     valueFormatter?: import(".").SeriesValueFormatter<import(".").MakeOptional<import("../models/seriesType").PieValueType, "id">> | undefined;
-    highlightScope?: Partial<import("..").HighlightScope> | undefined;
+    highlightScope?: Partial<import("..").HighlightScope>;
 } | {
     type: "bar";
-    data?: (number | null)[] | undefined;
-    dataKey?: string | undefined;
-    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-    layout?: "horizontal" | "vertical" | undefined;
-    stackOffset?: import("..").StackOffsetType | undefined;
-    id?: import(".").SeriesId | undefined;
+    data?: (number | null)[];
+    dataKey?: string;
+    label?: string | ((location: "tooltip" | "legend") => string);
+    layout?: "horizontal" | "vertical";
+    stackOffset?: import("..").StackOffsetType;
+    id?: import(".").SeriesId;
     color: string;
     valueFormatter?: import(".").SeriesValueFormatter<number | null> | undefined;
-    highlightScope?: Partial<import("..").HighlightScope> | undefined;
-    xAxisKey?: string | undefined;
-    yAxisKey?: string | undefined;
-    stack?: string | undefined;
-    stackOrder?: import("..").StackOrderType | undefined;
+    highlightScope?: Partial<import("..").HighlightScope>;
+    xAxisKey?: string;
+    yAxisKey?: string;
+    stack?: string;
+    stackOrder?: import("..").StackOrderType;
 } | {
     type: "line";
-    data?: (number | null)[] | undefined;
-    dataKey?: string | undefined;
-    stack?: string | undefined;
-    area?: boolean | undefined;
-    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-    curve?: import("../models/seriesType").CurveType | undefined;
-    showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams<number | Date>) => boolean) | undefined;
-    disableHighlight?: boolean | undefined;
-    connectNulls?: boolean | undefined;
-    stackOffset?: import("..").StackOffsetType | undefined;
-    id?: import(".").SeriesId | undefined;
+    data?: (number | null)[];
+    dataKey?: string;
+    stack?: string;
+    area?: boolean;
+    label?: string | ((location: "tooltip" | "legend") => string);
+    curve?: import("../models/seriesType").CurveType;
+    showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams) => boolean);
+    disableHighlight?: boolean;
+    connectNulls?: boolean;
+    stackOffset?: import("..").StackOffsetType;
+    id?: import(".").SeriesId;
     color: string;
     valueFormatter?: import(".").SeriesValueFormatter<number | null> | undefined;
-    highlightScope?: Partial<import("..").HighlightScope> | undefined;
-    xAxisKey?: string | undefined;
-    yAxisKey?: string | undefined;
-    stackOrder?: import("..").StackOrderType | undefined;
+    highlightScope?: Partial<import("..").HighlightScope>;
+    xAxisKey?: string;
+    yAxisKey?: string;
+    stackOrder?: import("..").StackOrderType;
 } | {
     type: "scatter";
     data: import("../models/seriesType").ScatterValueType[];
-    markerSize?: number | undefined;
-    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-    disableHover?: boolean | undefined;
-    zAxisKey?: string | undefined;
-    id?: import(".").SeriesId | undefined;
+    markerSize?: number;
+    label?: string | ((location: "tooltip" | "legend") => string);
+    disableHover?: boolean;
+    zAxisKey?: string;
+    id?: import(".").SeriesId;
     color: string;
     valueFormatter?: import(".").SeriesValueFormatter<import("../models/seriesType").ScatterValueType> | undefined;
-    highlightScope?: Partial<import("..").HighlightScope> | undefined;
-    xAxisKey?: string | undefined;
-    yAxisKey?: string | undefined;
+    highlightScope?: Partial<import("..").HighlightScope>;
+    xAxisKey?: string;
+    yAxisKey?: string;
 };

package/internals/getSVGPoint.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Transform mouse event position to coordinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+export declare function getSVGPoint(svg: SVGSVGElement, event: Pick<MouseEvent, 'clientX' | 'clientY'>): DOMPoint;

package/internals/getSVGPoint.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSVGPoint = getSVGPoint;
+/**
+ * Transform mouse event position to coordinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+function getSVGPoint(svg, event) {
+  const pt = svg.createSVGPoint();
+  pt.x = event.clientX;
+  pt.y = event.clientY;
+  return pt.matrixTransform(svg.getScreenCTM().inverse());
+}

package/internals/getWordsByLines.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ChartsTextBaseline = 'hanging' | 'central' | 'auto';
 export interface ChartsTextStyle extends React.CSSProperties {
     angle?: number;

package/internals/index.d.ts

@@ -3,12 +3,16 @@ 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';
 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';
 export * from '../context/ColorProvider';

package/internals/index.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   useReducedMotion: true,
   useSeries: true,
+  useInteractionItemProps: true,
+  useDrawingArea: true,
   useChartContainerHooks: true,
   useScatterChartProps: true,
   useLineChartProps: true,
@@ -23,6 +25,18 @@ Object.defineProperty(exports, "useChartContainerHooks", {
     return _useChartContainerHooks.useChartContainerHooks;
   }
 });
+Object.defineProperty(exports, "useDrawingArea", {
+  enumerable: true,
+  get: function () {
+    return _useDrawingArea.useDrawingArea;
+  }
+});
+Object.defineProperty(exports, "useInteractionItemProps", {
+  enumerable: true,
+  get: function () {
+    return _useInteractionItemProps.useInteractionItemProps;
+  }
+});
 Object.defineProperty(exports, "useLineChartProps", {
   enumerable: true,
   get: function () {
@@ -85,6 +99,8 @@ 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");
 var _useLineChartProps = require("../LineChart/useLineChartProps");
@@ -113,6 +129,30 @@ 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;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _getSVGPoint[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _getSVGPoint[key];
+    }
+  });
+});
 var _CartesianProvider = require("../context/CartesianProvider");
 Object.keys(_CartesianProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/useAnimatedPath.d.ts

@@ -1,2 +1 @@
-/// <reference types="@react-spring/core" />
 export declare const useAnimatedPath: (path: string, skipAnimation?: boolean) => import("@react-spring/core").Interpolation<string, any>;

package/internals/utils.d.ts

@@ -4,12 +4,6 @@ type Without<T, U> = {
     [P in Exclude<keyof T, keyof U>]?: never;
 };
 export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
-/**
- * Transform mouse event position to coordinates inside the SVG.
- * @param svg The SVG element
- * @param event The mouseEvent to transform
- */
-export declare function getSVGPoint(svg: SVGSVGElement, event: Pick<MouseEvent, 'clientX' | 'clientY'>): DOMPoint;
 /**
  * Helper that converts values and percentages into values.
  * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.

package/internals/utils.js

@@ -5,25 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.cleanId = cleanId;
 exports.getPercentageValue = getPercentageValue;
-exports.getSVGPoint = getSVGPoint;
 exports.getSymbol = getSymbol;
 // Returns the index of a defined shape
 function getSymbol(shape) {
   const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
   return symbolNames.indexOf(shape) || 0;
 }
-/**
- * Transform mouse event position to coordinates inside the SVG.
- * @param svg The SVG element
- * @param event The mouseEvent to transform
- */
-function getSVGPoint(svg, event) {
-  const pt = svg.createSVGPoint();
-  pt.x = event.clientX;
-  pt.y = event.clientY;
-  return pt.matrixTransform(svg.getScreenCTM().inverse());
-}
-
 /**
  * Helper that converts values and percentages into values.
  * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.

package/models/axis.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint, ScaleOrdinal, ScaleSequential, ScaleThreshold } from 'd3-scale';
 import { ChartsAxisClasses } from '../ChartsAxis/axisClasses';
 import type { TickParams } from '../hooks/useTicks';
@@ -126,7 +125,7 @@ export interface ChartsXAxisProps extends ChartsAxisProps {
      */
     position?: 'top' | 'bottom';
 }
-export type ScaleName = 'linear' | 'band' | 'point' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
+export type ScaleName = keyof AxisScaleConfig;
 export type ContinuousScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
 export interface AxisScaleConfig {
     band: {

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/BarChart/useBarChartProps.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
-
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.

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

@@ -66,15 +66,30 @@ function ChartsAxisHighlight(props) {
   } = React.useContext(InteractionContext);
   const getXPosition = getValueToPositionMapper(xScale);
   const getYPosition = getValueToPositionMapper(yScale);
+  const axisX = axis.x;
+  const axisY = axis.y;
+  const isBandScaleX = xAxisHighlight === 'band' && axisX !== null && isBandScale(xScale);
+  const isBandScaleY = yAxisHighlight === 'band' && axisY !== null && isBandScale(yScale);
+  if (process.env.NODE_ENV !== 'production') {
+    const isXError = isBandScaleX && xScale(axisX.value) === undefined;
+    const isYError = isBandScaleY && yScale(axisY.value) === undefined;
+    if (isXError || isYError) {
+      console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
+    }
+  }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [xAxisHighlight === 'band' && axis.x !== null && isBandScale(xScale) && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${xScale(axis.x.value) - (xScale.step() - xScale.bandwidth()) / 2} ${yScale.range()[0]} l ${xScale.step()} 0 l 0 ${yScale.range()[1] - yScale.range()[0]} l ${-xScale.step()} 0 Z`,
+    children: [isBandScaleX && xScale(axisX.value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath
+    // @ts-expect-error, xScale value is checked in the statement above
+    , {
+      d: `M ${xScale(axisX.value) - (xScale.step() - xScale.bandwidth()) / 2} ${yScale.range()[0]} l ${xScale.step()} 0 l 0 ${yScale.range()[1] - yScale.range()[0]} l ${-xScale.step()} 0 Z`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'band'
       }
-    }), yAxisHighlight === 'band' && axis.y !== null && isBandScale(yScale) && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${xScale.range()[0]} ${yScale(axis.y.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${xScale.range()[1] - xScale.range()[0]} 0 l 0 ${-yScale.step()} Z`,
+    }), 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`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'band'

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';