@mui/x-charts 8.5.3 → 8.6.0

package/esm/PieChart/PiePlot.js

@@ -9,6 +9,7 @@ import { getPieCoordinates } from "./getPieCoordinates.js";
 import { usePieSeriesContext } from "../hooks/usePieSeries.js";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useDrawingArea } from "../hooks/index.js";
+import { useUtilityClasses } from "./pieClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -35,6 +36,7 @@ function PiePlot(props) {
     height
   } = useDrawingArea();
   const skipAnimation = useSkipAnimation(inSkipAnimation);
+  const classes = useUtilityClasses();
   if (seriesData === undefined) {
     return null;
   }
@@ -69,7 +71,9 @@ function PiePlot(props) {
       const outerRadius = getPercentageValue(outerRadiusParam ?? availableRadius, availableRadius);
       const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius);
       return /*#__PURE__*/_jsx("g", {
+        className: classes.series,
         transform: `translate(${left + cx}, ${top + cy})`,
+        "data-series": seriesId,
         children: /*#__PURE__*/_jsx(PieArcPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius,
@@ -113,7 +117,9 @@ function PiePlot(props) {
       const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius);
       const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : getPercentageValue(arcLabelRadiusParam, availableRadius);
       return /*#__PURE__*/_jsx("g", {
+        className: classes.seriesLabels,
         transform: `translate(${left + cx}, ${top + cy})`,
+        "data-series": seriesId,
         children: /*#__PURE__*/_jsx(PieArcLabelPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius ?? availableRadius,

package/esm/PieChart/index.d.ts

@@ -4,4 +4,6 @@ export * from "./PieArcPlot.js";
 export * from "./PieArcLabelPlot.js";
 export * from "./PieArc.js";
 export * from "./PieArcLabel.js";
-export * from "./getPieCoordinates.js";
+export * from "./getPieCoordinates.js";
+export { pieClasses } from "./pieClasses.js";
+export type { PieClasses, PieClassKey } from "./pieClasses.js";

package/esm/PieChart/index.js

@@ -4,4 +4,5 @@ export * from "./PieArcPlot.js";
 export * from "./PieArcLabelPlot.js";
 export * from "./PieArc.js";
 export * from "./PieArcLabel.js";
-export * from "./getPieCoordinates.js";
+export * from "./getPieCoordinates.js";
+export { pieClasses } from "./pieClasses.js";

package/esm/PieChart/pieClasses.d.ts

@@ -0,0 +1,12 @@
+export interface PieClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the `g` element that contains all pie arcs of a series. */
+  series: string;
+  /** Styles applied to the `g` element that contains all pie arc labels of a series. */
+  seriesLabels: string;
+}
+export type PieClassKey = keyof PieClasses;
+export declare function getPieUtilityClass(slot: string): string;
+export declare const pieClasses: PieClasses;
+export declare const useUtilityClasses: (classes?: Partial<PieClasses>) => Record<"root" | "series" | "seriesLabels", string>;

package/esm/PieChart/pieClasses.js

@@ -0,0 +1,15 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getPieUtilityClass(slot) {
+  return generateUtilityClass('MuiPieChart', slot);
+}
+export const pieClasses = generateUtilityClasses('MuiPieChart', ['root', 'series', 'seriesLabels']);
+export const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    series: ['series'],
+    seriesLabels: ['seriesLabels']
+  };
+  return composeClasses(slots, getPieUtilityClass, classes);
+};

package/esm/Toolbar/ToolbarButton.js

@@ -44,10 +44,12 @@ process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
   // ----------------------------------------------------------------------
   className: PropTypes.string,
   disabled: PropTypes.bool,
+  id: PropTypes.string,
   /**
    * A function to customize the rendering of the component.
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
   style: PropTypes.object,
   tabIndex: PropTypes.number
 } : void 0;

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.5.3
+ * @mui/x-charts v8.6.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/components/NotRendered.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+/**
+ * This component is used to assert that a certain component should not be rendered.
+ * It is used in cases where we want to apply styles to a component that is not rendered because we use the `as` prop (introduced by `styled`) to replace the rendered component.
+ * We need it because we don't know the component that will be rendered at the time of writing the styles.
+ *
+ * @param _props Not used
+ */
+export declare function NotRendered<T>(_props: T): React.ReactNode;

package/esm/internals/components/NotRendered.js

@@ -0,0 +1,10 @@
+/**
+ * This component is used to assert that a certain component should not be rendered.
+ * It is used in cases where we want to apply styles to a component that is not rendered because we use the `as` prop (introduced by `styled`) to replace the rendered component.
+ * We need it because we don't know the component that will be rendered at the time of writing the styles.
+ *
+ * @param _props Not used
+ */
+export function NotRendered(_props) {
+  throw new Error('Failed assertion: should not be rendered');
+}

package/esm/internals/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./components/ChartsAxesGradients/index.js";
 export * from "./components/ChartsWrapper/index.js";
 export * from "../ChartsLabel/ChartsLabelMark.js";
+export * from "./components/NotRendered.js";
 export { useSeries } from "../hooks/useSeries.js";
 export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 export { useDrawingArea } from "../hooks/useDrawingArea.js";

package/esm/internals/index.js

@@ -2,6 +2,7 @@
 export * from "./components/ChartsAxesGradients/index.js";
 export * from "./components/ChartsWrapper/index.js";
 export * from "../ChartsLabel/ChartsLabelMark.js";
+export * from "./components/NotRendered.js";
 
 // hooks
 export { useSeries } from "../hooks/useSeries.js";

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -8,6 +8,7 @@ import { useSelector } from "../../../store/useSelector.js";
 import { DEFAULT_MARGINS } from "../../../../constants/index.js";
 import { selectorChartDrawingArea } from "./useChartDimensions.selectors.js";
 import { defaultizeMargin } from "../../../defaultizeMargin.js";
+import { getSVGPoint } from "../../../getSVGPoint.js";
 const MAX_COMPUTE_RUN = 10;
 export const useChartDimensions = ({
   params,
@@ -149,16 +150,43 @@ export const useChartDimensions = ({
   const isYInside = React.useCallback(y => y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height, [drawingArea.height, drawingArea.top]);
   const isPointInside = React.useCallback((x, y, targetElement) => {
     // 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 (targetElement && 'closest' in targetElement && targetElement.closest('[data-drawing-container]')) {
       return true;
     }
     return isXInside(x) && isYInside(y);
   }, [isXInside, isYInside]);
+  const isElementInside = React.useCallback(element => {
+    const svgElement = svgRef.current;
+    if (!element || !(element instanceof Element) || !svgElement) {
+      return false;
+    }
+    // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
+    if (element.closest('[data-drawing-container]')) {
+      return true;
+    }
+    const rect = element.getBoundingClientRect();
+    const {
+      x: left,
+      y: top
+    } = getSVGPoint(svgElement, {
+      clientX: rect.left,
+      clientY: rect.top
+    });
+    const {
+      x: right,
+      y: bottom
+    } = getSVGPoint(svgElement, {
+      clientX: rect.right,
+      clientY: rect.bottom
+    });
+    return isXInside(left) && isXInside(right) && isYInside(top) && isYInside(bottom);
+  }, [isXInside, isYInside, svgRef]);
   return {
     instance: {
       isPointInside,
       isXInside,
-      isYInside
+      isYInside,
+      isElementInside
     }
   };
 };

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.d.ts

@@ -63,14 +63,20 @@ export interface UseChartDimensionsState {
   };
 }
 export interface UseChartDimensionsInstance {
+  /**
+   * Checks if an element is inside the drawing area.
+   * @param {Element | EventTarget | null} element The element to check.
+   * @returns {boolean} `true` if the element is inside the drawing area, `false` otherwise.
+   */
+  isElementInside: (element: Element | EventTarget | null | undefined) => boolean;
   /**
    * Checks if a point is inside the drawing area.
    * @param {number} x The x coordinate of the point.
    * @param {number} y The y coordinate of the point.
-   * @param {Element} targetElement The element to check if it is allowed to overflow the drawing area.
+   * @param {Element | EventTarget | null} targetElement The element to check if it is allowed to overflow the drawing area.
    * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
    */
-  isPointInside: (x: number, y: number, targetElement?: Element) => boolean;
+  isPointInside: (x: number, y: number, targetElement?: Element | EventTarget | null) => boolean;
   /**
    * Checks if the x coordinate is inside the drawing area.
    * @param {number} x The x coordinate of the point.

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js

@@ -91,10 +91,26 @@ export const useChartPolarAxis = ({
       instance.cleanInteraction?.();
     };
     const handleMove = event => {
-      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = getSVGPoint(element, target);
-      mousePosition.current.x = svgPoint.x;
-      mousePosition.current.y = svgPoint.y;
+      const srcEvent = event;
+
+      // On touch, we want to allow user to interact with the entire svg area in
+      // order to better display the tooltip.
+      if (event.pointerType === 'touch') {
+        const svgRect = element.getBoundingClientRect();
+        if (srcEvent.clientX < svgRect.left || srcEvent.clientX > svgRect.right || srcEvent.clientY < svgRect.top || srcEvent.clientY > svgRect.bottom) {
+          mousePosition.current.isInChart = false;
+          instance.cleanInteraction();
+          return;
+        }
+        const svgPoint = getSVGPoint(element, srcEvent);
+        mousePosition.current.isInChart = true;
+        instance.setPointerCoordinate(svgPoint);
+        return;
+      }
+
+      // On mouse, we want to restrict the interaction to the drawing area and radar circle.
+
+      const svgPoint = getSVGPoint(element, srcEvent);
 
       // Test if it's in the drawing area
       if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {

package/esm/locales/enUS.d.ts

@@ -10,6 +10,9 @@ export declare const enUS: {
           noData?: string | undefined;
           zoomIn?: string | undefined;
           zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./utils/imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
         };
       };
     };

package/esm/locales/enUS.js

@@ -1,13 +1,19 @@
+import { imageMimeTypes } from "./utils/imageMimeTypes.js";
 import { getChartsLocalization } from "./utils/getChartsLocalization.js";
 
 // This object is not Partial<ChartsLocaleText> because it is the default values
 
 export const enUSLocaleText = {
-  // Overlay
+  /* Overlay */
   loading: 'Loading data…',
   noData: 'No data to display',
+  /* Toolbar */
   zoomIn: 'Zoom in',
-  zoomOut: 'Zoom out'
+  zoomOut: 'Zoom out',
+  toolbarExport: 'Export',
+  /* Toolbar Export Menu */
+  toolbarExportPrint: 'Print',
+  toolbarExportImage: mimeType => `Export as ${imageMimeTypes[mimeType] ?? mimeType}`
 };
 export const DEFAULT_LOCALE = enUSLocaleText;
 export const enUS = getChartsLocalization(enUSLocaleText);

package/esm/locales/frFR.d.ts

@@ -9,6 +9,9 @@ export declare const frFR: {
           noData?: string | undefined;
           zoomIn?: string | undefined;
           zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./utils/imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
         };
       };
     };

package/esm/locales/frFR.js

@@ -3,7 +3,14 @@ export const frFRLocalText = {
   // Overlay
   loading: 'Chargement…',
   noData: 'Pas de données'
+
+  // Toolbar
   // zoomIn: 'Zoom in',
   // zoomOut: 'Zoom out',
+  // toolbarExport: 'Export',
+
+  // Toolbar Export Menu
+  // toolbarExportPrint: 'Print',
+  // toolbarExportImage: mimeType => `Export as ${imageMimeTypes[mimeType] ?? mimeType}`,
 };
 export const frFR = getChartsLocalization(frFRLocalText);

package/esm/locales/ptBR.d.ts

@@ -9,6 +9,9 @@ export declare const ptBR: {
           noData?: string | undefined;
           zoomIn?: string | undefined;
           zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./utils/imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
         };
       };
     };

package/esm/locales/ptBR.js

@@ -1,9 +1,15 @@
+import { imageMimeTypes } from "./utils/imageMimeTypes.js";
 import { getChartsLocalization } from "./utils/getChartsLocalization.js";
 export const ptBRLocaleText = {
   // Overlay
   loading: 'Carregando dados…',
   noData: 'Sem dados para exibir',
+  // Toolbar
   zoomIn: 'Aumentar zoom',
-  zoomOut: 'Diminuir zoom'
+  zoomOut: 'Diminuir zoom',
+  toolbarExport: 'Exportar',
+  // Toolbar Export Menu
+  toolbarExportPrint: 'Imprimir',
+  toolbarExportImage: mimeType => `Exportar como ${imageMimeTypes[mimeType] ?? mimeType}`
 };
 export const ptBR = getChartsLocalization(ptBRLocaleText);

package/esm/locales/ptPT.d.ts

@@ -9,6 +9,9 @@ export declare const ptPT: {
           noData?: string | undefined;
           zoomIn?: string | undefined;
           zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./utils/imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
         };
       };
     };

package/esm/locales/ptPT.js

@@ -1,9 +1,15 @@
+import { imageMimeTypes } from "./utils/imageMimeTypes.js";
 import { getChartsLocalization } from "./utils/getChartsLocalization.js";
 export const ptPTLocaleText = {
   // Overlay
   loading: 'Carregando dados…',
   noData: 'Sem dados para mostrar',
+  // Toolbar
   zoomIn: 'Aumentar zoom',
-  zoomOut: 'Diminuir zoom'
+  zoomOut: 'Diminuir zoom',
+  toolbarExport: 'Exportar',
+  // Toolbar Export Menu
+  toolbarExportPrint: 'Imprimir',
+  toolbarExportImage: mimeType => `Exportar como ${imageMimeTypes[mimeType] ?? mimeType}`
 };
 export const ptPT = getChartsLocalization(ptPTLocaleText);

package/esm/locales/utils/chartsLocaleTextApi.d.ts

@@ -1,3 +1,4 @@
+import { ChartImageExportMimeType } from "./imageMimeTypes.js";
 export interface ChartsLocaleText {
   /**
    * Title displayed in the overlay if `loading` is `true`.
@@ -15,5 +16,21 @@ export interface ChartsLocaleText {
    * Tooltip text shown when hovering over the zoom out button.
    */
   zoomOut: string;
+  /**
+   * Text for the export button tooltip in the toolbar.
+   */
+  toolbarExport: string;
+  /**
+   * Text for the print button in the toolbar's export menu.
+   */
+  toolbarExportPrint: string;
+  /**
+   * Text for an "Export as {image type}" button in the toolbar's export menu.
+   * The only format supported in all browsers is 'image/png'.
+   *
+   * @param {string} mimeType The MIME type of the image to export, e.g., 'image/png'.
+   * @returns {string} The localized string for an export image button.
+   */
+  toolbarExportImage: (mimeType: ChartImageExportMimeType | (string & {})) => string;
 }
 export type ChartsTranslationKeys = keyof ChartsLocaleText;

package/esm/locales/utils/getChartsLocalization.d.ts

@@ -13,6 +13,9 @@ export declare const getChartsLocalization: (chartsTranslations: Partial<ChartsL
           noData?: string | undefined;
           zoomIn?: string | undefined;
           zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
         };
       };
     };

package/esm/locales/utils/imageMimeTypes.d.ts

@@ -0,0 +1,2 @@
+export declare const imageMimeTypes: Record<string, string | undefined>;
+export type ChartImageExportMimeType = 'image/png' | 'image/jpeg' | 'image/webp';

package/esm/locales/utils/imageMimeTypes.js

@@ -0,0 +1,5 @@
+export const imageMimeTypes = {
+  'image/png': 'PNG',
+  'image/jpeg': 'JPEG',
+  'image/webp': 'WebP'
+};

package/esm/models/slots/chartsBaseSlotProps.d.ts

@@ -7,14 +7,18 @@ export type ChartBaseCommonProps<T = HTMLElement> = React.DOMAttributes<T> & {
 };
 export type ChartBaseIconProps = ChartBaseCommonProps<SVGSVGElement> & {
   titleAccess?: string;
+  fontSize?: 'small' | 'medium' | 'large' | 'inherit';
 };
 export type ChartBaseButtonProps = ChartBaseCommonProps & {
   ref?: React.Ref<HTMLButtonElement>;
+  id?: string;
   disabled?: boolean;
   tabIndex?: number;
 };
 export type ChartBaseIconButtonProps = ChartBaseCommonProps & {
   ref?: React.Ref<HTMLButtonElement>;
+  id?: string;
   disabled?: boolean;
   tabIndex?: number;
+  size?: 'small' | 'medium' | 'large';
 };

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.5.3
+ * @mui/x-charts v8.6.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/NotRendered.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+/**
+ * This component is used to assert that a certain component should not be rendered.
+ * It is used in cases where we want to apply styles to a component that is not rendered because we use the `as` prop (introduced by `styled`) to replace the rendered component.
+ * We need it because we don't know the component that will be rendered at the time of writing the styles.
+ *
+ * @param _props Not used
+ */
+export declare function NotRendered<T>(_props: T): React.ReactNode;

package/internals/components/NotRendered.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotRendered = NotRendered;
+/**
+ * This component is used to assert that a certain component should not be rendered.
+ * It is used in cases where we want to apply styles to a component that is not rendered because we use the `as` prop (introduced by `styled`) to replace the rendered component.
+ * We need it because we don't know the component that will be rendered at the time of writing the styles.
+ *
+ * @param _props Not used
+ */
+function NotRendered(_props) {
+  throw new Error('Failed assertion: should not be rendered');
+}

package/internals/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./components/ChartsAxesGradients/index.js";
 export * from "./components/ChartsWrapper/index.js";
 export * from "../ChartsLabel/ChartsLabelMark.js";
+export * from "./components/NotRendered.js";
 export { useSeries } from "../hooks/useSeries.js";
 export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 export { useDrawingArea } from "../hooks/useDrawingArea.js";

package/internals/index.js

@@ -111,6 +111,18 @@ Object.keys(_ChartsLabelMark).forEach(function (key) {
     }
   });
 });
+var _NotRendered = require("./components/NotRendered");
+Object.keys(_NotRendered).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _NotRendered[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NotRendered[key];
+    }
+  });
+});
 var _useSeries = require("../hooks/useSeries");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useDrawingArea = require("../hooks/useDrawingArea");

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -15,6 +15,7 @@ var _useSelector = require("../../../store/useSelector");
 var _constants = require("../../../../constants");
 var _useChartDimensions = require("./useChartDimensions.selectors");
 var _defaultizeMargin = require("../../../defaultizeMargin");
+var _getSVGPoint = require("../../../getSVGPoint");
 const MAX_COMPUTE_RUN = 10;
 const useChartDimensions = ({
   params,
@@ -156,16 +157,43 @@ const useChartDimensions = ({
   const isYInside = React.useCallback(y => y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height, [drawingArea.height, drawingArea.top]);
   const isPointInside = React.useCallback((x, y, targetElement) => {
     // 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 (targetElement && 'closest' in targetElement && targetElement.closest('[data-drawing-container]')) {
       return true;
     }
     return isXInside(x) && isYInside(y);
   }, [isXInside, isYInside]);
+  const isElementInside = React.useCallback(element => {
+    const svgElement = svgRef.current;
+    if (!element || !(element instanceof Element) || !svgElement) {
+      return false;
+    }
+    // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
+    if (element.closest('[data-drawing-container]')) {
+      return true;
+    }
+    const rect = element.getBoundingClientRect();
+    const {
+      x: left,
+      y: top
+    } = (0, _getSVGPoint.getSVGPoint)(svgElement, {
+      clientX: rect.left,
+      clientY: rect.top
+    });
+    const {
+      x: right,
+      y: bottom
+    } = (0, _getSVGPoint.getSVGPoint)(svgElement, {
+      clientX: rect.right,
+      clientY: rect.bottom
+    });
+    return isXInside(left) && isXInside(right) && isYInside(top) && isYInside(bottom);
+  }, [isXInside, isYInside, svgRef]);
   return {
     instance: {
       isPointInside,
       isXInside,
-      isYInside
+      isYInside,
+      isElementInside
     }
   };
 };

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.d.ts

@@ -63,14 +63,20 @@ export interface UseChartDimensionsState {
   };
 }
 export interface UseChartDimensionsInstance {
+  /**
+   * Checks if an element is inside the drawing area.
+   * @param {Element | EventTarget | null} element The element to check.
+   * @returns {boolean} `true` if the element is inside the drawing area, `false` otherwise.
+   */
+  isElementInside: (element: Element | EventTarget | null | undefined) => boolean;
   /**
    * Checks if a point is inside the drawing area.
    * @param {number} x The x coordinate of the point.
    * @param {number} y The y coordinate of the point.
-   * @param {Element} targetElement The element to check if it is allowed to overflow the drawing area.
+   * @param {Element | EventTarget | null} targetElement The element to check if it is allowed to overflow the drawing area.
    * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
    */
-  isPointInside: (x: number, y: number, targetElement?: Element) => boolean;
+  isPointInside: (x: number, y: number, targetElement?: Element | EventTarget | null) => boolean;
   /**
    * Checks if the x coordinate is inside the drawing area.
    * @param {number} x The x coordinate of the point.

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js

@@ -98,10 +98,26 @@ const useChartPolarAxis = ({
       instance.cleanInteraction?.();
     };
     const handleMove = event => {
-      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
-      mousePosition.current.x = svgPoint.x;
-      mousePosition.current.y = svgPoint.y;
+      const srcEvent = event;
+
+      // On touch, we want to allow user to interact with the entire svg area in
+      // order to better display the tooltip.
+      if (event.pointerType === 'touch') {
+        const svgRect = element.getBoundingClientRect();
+        if (srcEvent.clientX < svgRect.left || srcEvent.clientX > svgRect.right || srcEvent.clientY < svgRect.top || srcEvent.clientY > svgRect.bottom) {
+          mousePosition.current.isInChart = false;
+          instance.cleanInteraction();
+          return;
+        }
+        const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, srcEvent);
+        mousePosition.current.isInChart = true;
+        instance.setPointerCoordinate(svgPoint);
+        return;
+      }
+
+      // On mouse, we want to restrict the interaction to the drawing area and radar circle.
+
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, srcEvent);
 
       // Test if it's in the drawing area
       if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {

package/locales/enUS.d.ts

@@ -10,6 +10,9 @@ export declare const enUS: {
           noData?: string | undefined;
           zoomIn?: string | undefined;
           zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./utils/imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
         };
       };
     };