@mui/x-charts 8.27.0 → 9.0.0-alpha.0

package/BarChart/AnimatedBarElement.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { type SeriesId } from "../models/seriesType/common.js";
 import { type BarElementOwnerState } from "./barElementClasses.js";
-export interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'id' | 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'> {
-  id: SeriesId;
+export interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'> {
+  seriesId: SeriesId;
   dataIndex: number;
   color: string;
   ownerState: BarElementOwnerState;

package/BarChart/AnimatedBarElement.js

@@ -12,7 +12,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _useAnimateBar = require("../hooks/animation/useAnimateBar");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ownerState", "skipAnimation", "id", "dataIndex", "xOrigin", "yOrigin"];
+const _excluded = ["ownerState", "skipAnimation", "seriesId", "dataIndex", "xOrigin", "yOrigin"];
 function AnimatedBarElement(props) {
   const {
       ownerState

package/BarChart/BarChart.js

@@ -80,6 +80,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.object
   }),
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap: _propTypes.default.number,
   /**
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
@@ -163,7 +168,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    seriesId: _propTypes.default.string,
     type: _propTypes.default.oneOf(['bar']).isRequired
   })),
   /**
@@ -184,7 +189,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    */
   highlightedItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -214,7 +219,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    seriesId: _propTypes.default.string,
     type: _propTypes.default.oneOf(['bar']).isRequired
   })),
   /**
@@ -324,7 +329,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    */
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['bar']).isRequired
   }),
   /**

package/BarChart/BarElement.d.ts

@@ -7,12 +7,12 @@ export interface BarElementSlots {
    * The component that renders the bar.
    * @default BarElementPath
    */
-  bar?: React.ElementType<BarProps>;
+  bar?: React.JSXElementConstructor<BarProps>;
 }
 export interface BarElementSlotProps {
   bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
 }
-export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGRectElement>, 'ref' | 'id'> & {
+export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted' | 'isFocused'> & Omit<React.SVGProps<SVGRectElement>, 'ref'> & {
   /**
    * The props used for each component slot.
    * @default {}

package/BarChart/BarElement.js

@@ -18,10 +18,10 @@ var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _AnimatedBarElement = require("./AnimatedBarElement");
 var _useIsItemFocused = require("../hooks/useIsItemFocused");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick", "skipAnimation", "layout", "x", "xOrigin", "y", "yOrigin", "width", "height", "hidden"];
+const _excluded = ["seriesId", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick", "skipAnimation", "layout", "x", "xOrigin", "y", "yOrigin", "width", "height", "hidden"];
 function BarElement(props) {
   const {
-      id,
+      seriesId,
       dataIndex,
       classes: innerClasses,
       color,
@@ -42,9 +42,9 @@ function BarElement(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const itemIdentifier = React.useMemo(() => ({
     type: 'bar',
-    seriesId: id,
+    seriesId,
     dataIndex
-  }), [id, dataIndex]);
+  }), [seriesId, dataIndex]);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)(itemIdentifier);
   const {
     isFaded,
@@ -52,11 +52,11 @@ function BarElement(props) {
   } = (0, _useItemHighlighted.useItemHighlighted)(itemIdentifier);
   const isFocused = (0, _useIsItemFocused.useIsItemFocused)(React.useMemo(() => ({
     type: 'bar',
-    seriesId: id,
+    seriesId,
     dataIndex
-  }), [id, dataIndex]));
+  }), [seriesId, dataIndex]));
   const ownerState = {
-    id,
+    seriesId,
     dataIndex,
     classes: innerClasses,
     color,
@@ -71,7 +71,7 @@ function BarElement(props) {
     externalSlotProps: slotProps?.bar,
     externalForwardedProps: other,
     additionalProps: (0, _extends2.default)({}, interactionProps, {
-      id,
+      seriesId,
       dataIndex,
       color,
       x,
@@ -101,8 +101,8 @@ process.env.NODE_ENV !== "production" ? BarElement.propTypes = {
   // ----------------------------------------------------------------------
   classes: _propTypes.default.object,
   dataIndex: _propTypes.default.number.isRequired,
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   layout: _propTypes.default.oneOf(['horizontal', 'vertical']).isRequired,
+  seriesId: _propTypes.default.string.isRequired,
   skipAnimation: _propTypes.default.bool.isRequired,
   /**
    * The props used for each component slot.

package/BarChart/BarLabel/BarLabel.js

@@ -108,7 +108,7 @@ process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
    * @default 'center'
    */
   placement: _propTypes.default.oneOf(['center', 'outside']),
-  seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  seriesId: _propTypes.default.string.isRequired,
   skipAnimation: _propTypes.default.bool.isRequired,
   /**
    * Width of the bar this label belongs to.

package/BarChart/FocusedBar.js

@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _useFocusedItem = require("../hooks/useFocusedItem");
 var _hooks = require("../hooks");
-var _getBarDimensions = require("../internals/getBarDimensions");
+var _createGetBarDimensions = require("../internals/createGetBarDimensions");
 var _jsxRuntime = require("react/jsx-runtime");
 function FocusedBar(props) {
   const theme = (0, _styles.useTheme)();
@@ -40,15 +40,13 @@ function FocusedBar(props) {
   const yAxisConfig = yAxis[yAxisId];
   const verticalLayout = barSeries.series[focusedItem.seriesId].layout === 'vertical';
   const groupIndex = barSeries.stackingGroups.findIndex(group => group.ids.includes(focusedItem.seriesId));
-  const barDimensions = (0, _getBarDimensions.getBarDimensions)({
+  const barDimensions = (0, _createGetBarDimensions.createGetBarDimensions)({
     verticalLayout,
     xAxisConfig,
     yAxisConfig,
     series,
-    dataIndex: focusedItem.dataIndex,
-    numberOfGroups: barSeries.stackingGroups.length,
-    groupIndex
-  });
+    numberOfGroups: barSeries.stackingGroups.length
+  })(focusedItem.dataIndex, groupIndex);
   if (barDimensions === null) {
     return null;
   }

package/BarChart/IndividualBarPlot.js

@@ -72,7 +72,7 @@ function IndividualBarPlot(_ref) {
           height
         }) => {
           const barElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
-            id: seriesId,
+            seriesId: seriesId,
             dataIndex: dataIndex,
             color: color,
             skipAnimation: skipAnimation ?? false,

package/BarChart/barClasses.d.ts

@@ -9,4 +9,4 @@ export interface BarClasses {
 export type BarClassKey = keyof BarClasses;
 export declare function getBarUtilityClass(slot: string): string;
 export declare const barClasses: BarClasses;
-export declare const useUtilityClasses: (classes?: Partial<BarClasses>) => Record<"series" | "root" | "seriesLabels", string>;
+export declare const useUtilityClasses: (classes?: Partial<BarClasses>) => Record<"root" | "series" | "seriesLabels", string>;

package/BarChart/barClasses.js

@@ -11,9 +11,9 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 function getBarUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiBar', slot);
+  return (0, _generateUtilityClass.default)('MuiBarChart', slot);
 }
-const barClasses = exports.barClasses = (0, _generateUtilityClasses.default)('MuiBar', ['root', 'series', 'seriesLabels']);
+const barClasses = exports.barClasses = (0, _generateUtilityClasses.default)('MuiBarChart', ['root', 'series', 'seriesLabels']);
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],

package/BarChart/barElementClasses.d.ts

@@ -14,11 +14,12 @@ export interface BarElementClasses {
 }
 export type BarElementClassKey = keyof BarElementClasses;
 export interface BarElementOwnerState {
-  id: SeriesId;
+  seriesId: SeriesId;
   dataIndex: number;
   color: string;
   isFaded: boolean;
   isHighlighted: boolean;
+  isFocused: boolean;
   classes?: Partial<BarElementClasses>;
 }
 export declare function getBarElementUtilityClass(slot: string): string;

package/BarChart/barElementClasses.js

@@ -17,12 +17,12 @@ const barElementClasses = exports.barElementClasses = (0, _generateUtilityClasse
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    id,
+    seriesId,
     isHighlighted,
     isFaded
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded']
   };
   return (0, _composeClasses.default)(slots, getBarElementUtilityClass, classes);
 };

package/BarChart/seriesConfig/bar/extremums.d.ts

@@ -1,3 +1,3 @@
-import { type CartesianExtremumGetter } from "../../../internals/plugins/models/seriesConfig/index.js";
+import type { CartesianExtremumGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const getExtremumX: CartesianExtremumGetter<'bar'>;
 export declare const getExtremumY: CartesianExtremumGetter<'bar'>;

package/BarChart/seriesConfig/bar/getColor.d.ts

@@ -1,3 +1,3 @@
-import { type ColorProcessor } from "../../../internals/plugins/models/index.js";
+import type { ColorProcessor } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const getColor: ColorProcessor<'bar'>;
 export default getColor;

package/BarChart/seriesConfig/bar/getSeriesWithDefaultValues.d.ts

@@ -1,6 +1,6 @@
 import { type AllSeriesType } from "../../../models/seriesType/index.js";
 export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'bar'>, seriesIndex: number, colors: readonly string[]): {
-  id: import("../../../index.js").SeriesId;
+  id: string;
   color: string;
   type: "bar";
   data?: ReadonlyArray<import("../../../index.js").BarValueType | null>;
@@ -12,7 +12,7 @@ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'ba
   barLabel?: "value" | ((item: import("@mui/x-charts/BarChart").BarItem, context: import("@mui/x-charts/BarChart").BarLabelContext) => string | null | undefined);
   barLabelPlacement?: "center" | "outside";
   valueFormatter?: import("../../../internals/index.js").SeriesValueFormatter<number | null> | undefined;
-  highlightScope?: import("../../../index.js").HighlightScope;
+  highlightScope?: import("../../../internals/index.js").CommonHighlightScope | undefined;
   labelMarkType?: import("../../../internals/index.js").ChartsLabelMarkType;
   colorGetter?: ((data: import("../../../internals/index.js").ColorCallbackValue<number | null>) => string) | undefined;
   xAxisId?: import("../../../internals/index.js").AxisId;

package/BarChart/seriesConfig/bar/keyboardFocusHandler.d.ts

@@ -1,3 +1,4 @@
+import { type ComposableCartesianChartSeriesType } from "../../../internals/commonNextFocusItem.js";
 import type { KeyboardFocusHandler } from "../../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
-declare const keyboardFocusHandler: KeyboardFocusHandler<'bar', 'bar' | 'line' | 'scatter'>;
+declare const keyboardFocusHandler: KeyboardFocusHandler<'bar', ComposableCartesianChartSeriesType>;
 export default keyboardFocusHandler;

package/BarChart/seriesConfig/bar/keyboardFocusHandler.js

@@ -5,17 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commonNextFocusItem = require("../../../internals/commonNextFocusItem");
-const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
 const keyboardFocusHandler = event => {
   switch (event.key) {
     case 'ArrowRight':
-      return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(outSeriesTypes);
+      return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(_commonNextFocusItem.composableCartesianSeriesTypes);
     case 'ArrowLeft':
-      return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(outSeriesTypes);
+      return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(_commonNextFocusItem.composableCartesianSeriesTypes);
     case 'ArrowDown':
-      return (0, _commonNextFocusItem.createGetPreviousSeriesFocusedItem)(outSeriesTypes);
+      return (0, _commonNextFocusItem.createGetPreviousSeriesFocusedItem)(_commonNextFocusItem.composableCartesianSeriesTypes);
     case 'ArrowUp':
-      return (0, _commonNextFocusItem.createGetNextSeriesFocusedItem)(outSeriesTypes);
+      return (0, _commonNextFocusItem.createGetNextSeriesFocusedItem)(_commonNextFocusItem.composableCartesianSeriesTypes);
     default:
       return null;
   }

package/BarChart/seriesConfig/bar/legend.d.ts

@@ -1,3 +1,3 @@
-import { type LegendGetter } from "../../../internals/plugins/models/index.js";
+import type { LegendGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const legendGetter: LegendGetter<'bar'>;
 export default legendGetter;

package/BarChart/seriesConfig/bar/legend.js

@@ -18,7 +18,6 @@ const legendGetter = params => {
     acc.push({
       type: 'bar',
       markType: series[seriesId].labelMarkType,
-      id: seriesId,
       seriesId,
       color: series[seriesId].color,
       label: formattedLabel

package/BarChart/seriesConfig/bar/seriesProcessor.d.ts

@@ -1,3 +1,3 @@
-import { type SeriesProcessor } from "../../../internals/plugins/models/index.js";
+import type { SeriesProcessor } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const seriesProcessor: SeriesProcessor<'bar'>;
 export default seriesProcessor;

package/BarChart/seriesConfig/bar/tooltip.d.ts

@@ -1,4 +1,4 @@
-import type { AxisTooltipGetter, TooltipGetter } from "../../../internals/plugins/models/index.js";
+import type { AxisTooltipGetter, TooltipGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipGetter: TooltipGetter<'bar'>;
 export declare const axisTooltipGetter: AxisTooltipGetter<'bar', 'x' | 'y'>;
 export default tooltipGetter;

package/BarChart/seriesConfig/bar/tooltipPosition.d.ts

@@ -1,3 +1,3 @@
-import type { TooltipItemPositionGetter } from "../../../internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.js";
+import type { TooltipItemPositionGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'bar'>;
 export default tooltipItemPositionGetter;

package/BarChart/seriesConfig/bar/tooltipPosition.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _getBarDimensions = require("../../../internals/getBarDimensions");
+var _createGetBarDimensions = require("../../../internals/createGetBarDimensions");
 const tooltipItemPositionGetter = params => {
   const {
     series,
@@ -22,15 +22,14 @@ const tooltipItemPositionGetter = params => {
   if (axesConfig.x === undefined || axesConfig.y === undefined) {
     return null;
   }
-  const dimensions = (0, _getBarDimensions.getBarDimensions)({
+  const groupIndex = series.bar.stackingGroups.findIndex(group => group.ids.includes(itemSeries.id));
+  const dimensions = (0, _createGetBarDimensions.createGetBarDimensions)({
     verticalLayout: itemSeries.layout === 'vertical',
     xAxisConfig: axesConfig.x,
     yAxisConfig: axesConfig.y,
     series: itemSeries,
-    dataIndex: identifier.dataIndex,
-    numberOfGroups: series.bar.stackingGroups.length,
-    groupIndex: series.bar.stackingGroups.findIndex(group => group.ids.includes(itemSeries.id))
-  });
+    numberOfGroups: series.bar.stackingGroups.length
+  })(identifier.dataIndex, groupIndex);
   if (dimensions == null) {
     return null;
   }

package/BarChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
-import { type ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+import type { ChartSeriesTypeConfig } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const barSeriesConfig: ChartSeriesTypeConfig<'bar'>;

package/BarChart/seriesConfig/index.js

@@ -15,6 +15,7 @@ var _tooltip = _interopRequireWildcard(require("./bar/tooltip"));
 var _tooltipPosition = _interopRequireDefault(require("./bar/tooltipPosition"));
 var _getSeriesWithDefaultValues = require("./bar/getSeriesWithDefaultValues");
 var _identifierSerializer = require("../../internals/identifierSerializer");
+var _identifierCleaner = require("../../internals/identifierCleaner");
 const barSeriesConfig = exports.barSeriesConfig = {
   seriesProcessor: _seriesProcessor.default,
   colorProcessor: _getColor.default,
@@ -26,5 +27,6 @@ const barSeriesConfig = exports.barSeriesConfig = {
   yExtremumGetter: _extremums.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.getSeriesWithDefaultValues,
   keyboardFocusHandler: _keyboardFocusHandler.default,
-  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex
+  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: _identifierCleaner.identifierCleanerSeriesIdDataIndex
 };

package/BarChart/useBarPlotData.d.ts

@@ -11,7 +11,7 @@ export declare function useBarPlotData(drawingArea: ChartDrawingArea, xAxes: Com
 };
 export declare function processBarDataForPlot(drawingArea: ChartDrawingArea, chartId: string | undefined, stackingGroups: StackingGroupsType, series: Record<SeriesId, ChartSeriesDefaultized<'bar'>>, xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>, defaultXAxisId: AxisId, defaultYAxisId: AxisId): {
   completedData: {
-    seriesId: SeriesId;
+    seriesId: string;
     barLabel: "value" | ((item: import("@mui/x-charts/BarChart").BarItem, context: import("@mui/x-charts/BarChart").BarLabelContext) => string | null | undefined) | undefined;
     barLabelPlacement: "center" | "outside" | undefined;
     data: ProcessedBarData[];

package/BarChart/useBarPlotData.js

@@ -11,7 +11,7 @@ var _getColor = _interopRequireDefault(require("./seriesConfig/bar/getColor"));
 var _useAxis = require("../hooks/useAxis");
 var _checkBarChartScaleErrors = require("./checkBarChartScaleErrors");
 var _useBarSeries = require("../hooks/useBarSeries");
-var _getBarDimensions = require("../internals/getBarDimensions");
+var _createGetBarDimensions = require("../internals/createGetBarDimensions");
 var _useChartId = require("../hooks/useChartId");
 function useBarPlotData(drawingArea, xAxes, yAxes) {
   const seriesData = (0, _useBarSeries.useBarSeriesContext)() ?? {
@@ -51,16 +51,15 @@ function processBarDataForPlot(drawingArea, chartId, stackingGroups, series, xAx
       const yOrigin = Math.round(yScale(0) ?? 0);
       const colorGetter = (0, _getColor.default)(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
       const seriesDataPoints = [];
+      const getBarDimensions = (0, _createGetBarDimensions.createGetBarDimensions)({
+        verticalLayout,
+        xAxisConfig,
+        yAxisConfig,
+        series: series[seriesId],
+        numberOfGroups: stackingGroups.length
+      });
       for (let dataIndex = 0; dataIndex < baseScaleConfig.data.length; dataIndex += 1) {
-        const barDimensions = (0, _getBarDimensions.getBarDimensions)({
-          verticalLayout,
-          xAxisConfig,
-          yAxisConfig,
-          series: series[seriesId],
-          dataIndex,
-          numberOfGroups: stackingGroups.length,
-          groupIndex
-        });
+        const barDimensions = getBarDimensions(dataIndex, groupIndex);
         if (barDimensions == null) {
           continue;
         }

package/BarChart/useRegisterItemClickHandlers.js

@@ -9,7 +9,7 @@ exports.useRegisterItemClickHandlers = useRegisterItemClickHandlers;
 var React = _interopRequireWildcard(require("react"));
 var _useSvgRef = require("../hooks/useSvgRef");
 var _ChartProvider = require("../context/ChartProvider");
-var _getSVGPoint = require("../internals/getSVGPoint");
+var _getChartPoint = require("../internals/getChartPoint");
 var _useStore = require("../internals/store/useStore");
 var _useChartCartesianAxisPosition = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors");
 /**
@@ -46,7 +46,7 @@ function useRegisterItemClickHandlers(onItemClick) {
         }
       }
       lastPointerUp = null;
-      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, point);
+      const svgPoint = (0, _getChartPoint.getChartPoint)(element, point);
       if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
         return;
       }