@mui/x-charts 8.0.0-alpha.1 → 8.0.0-alpha.11

package/modern/PieChart/PieChart.js

@@ -2,27 +2,26 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useRtl } from '@mui/system/RtlProvider';
 import { useThemeProps } from '@mui/material/styles';
-import { ChartContainer } from "../ChartContainer/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsLegend } from "../ChartsLegend/index.js";
 import { PiePlot } from "./PiePlot.js";
 import { ChartsOverlay } from "../ChartsOverlay/index.js";
+import { ChartsSurface } from "../ChartsSurface/index.js";
+import { ChartDataProvider } from "../ChartDataProvider/index.js";
+import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
+import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
+import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PIE_CHART_PLUGGINS = [useChartInteraction, useChartHighlight];
 const defaultMargin = {
   top: 5,
   bottom: 5,
   left: 5,
-  right: 100
-};
-const defaultRTLMargin = {
-  top: 5,
-  bottom: 5,
-  left: 100,
   right: 5
 };
 
@@ -60,43 +59,48 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const isRtl = useRtl();
-  const margin = _extends({}, isRtl ? defaultRTLMargin : defaultMargin, marginProps);
-  const Tooltip = slots?.tooltip ?? ChartsTooltip;
-  return /*#__PURE__*/_jsxs(ChartContainer, _extends({}, other, {
-    ref: ref,
+  const margin = _extends({}, defaultMargin, marginProps);
+  const {
+    chartDataProviderProps,
+    chartsSurfaceProps
+  } = useChartContainerProps(_extends({}, other, {
     series: series.map(s => _extends({
       type: 'pie'
     }, s)),
-    width: width,
-    height: height,
-    margin: margin,
-    colors: colors,
-    sx: sx,
-    disableAxisListener: true,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
-    className: className,
-    skipAnimation: skipAnimation,
-    children: [/*#__PURE__*/_jsx(PiePlot, {
-      slots: slots,
-      slotProps: slotProps,
-      onItemClick: onItemClick
-    }), /*#__PURE__*/_jsx(ChartsOverlay, {
-      loading: loading,
-      slots: slots,
-      slotProps: slotProps
-    }), !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
-      direction: "column",
-      position: {
-        vertical: 'middle',
-        horizontal: isRtl ? 'left' : 'right'
-      },
-      slots: slots,
-      slotProps: slotProps
-    }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({
-      trigger: "item"
-    }, slotProps?.tooltip)), children]
+    width,
+    height,
+    margin,
+    colors,
+    highlightedItem,
+    onHighlightChange,
+    className,
+    skipAnimation,
+    plugins: PIE_CHART_PLUGGINS
+  }), ref);
+  const Tooltip = slots?.tooltip ?? ChartsTooltip;
+  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
+    children: /*#__PURE__*/_jsxs(ChartsWrapper, {
+      legendPosition: props.slotProps?.legend?.position,
+      legendDirection: props?.slotProps?.legend?.direction ?? 'vertical',
+      sx: sx,
+      children: [!hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
+        direction: props?.slotProps?.legend?.direction ?? 'vertical',
+        slots: slots,
+        slotProps: slotProps
+      }), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+        children: [/*#__PURE__*/_jsx(PiePlot, {
+          slots: slots,
+          slotProps: slotProps,
+          onItemClick: onItemClick
+        }), /*#__PURE__*/_jsx(ChartsOverlay, {
+          loading: loading,
+          slots: slots,
+          slotProps: slotProps
+        }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({
+          trigger: "item"
+        }, slotProps?.tooltip)), children]
+      }))]
+    })
   }));
 });
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
@@ -104,11 +108,14 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.object
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**
@@ -116,12 +123,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -131,12 +132,18 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   hideLegend: PropTypes.bool,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -146,7 +153,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: PropTypes.shape({
     bottom: PropTypes.number,
@@ -185,118 +191,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
-  width: PropTypes.number,
-  /**
-   * The configuration of the x-axes.
-   * If not provided, a default axis config is used.
-   * An array of [[AxisConfig]] objects.
-   */
-  xAxis: PropTypes.arrayOf(PropTypes.shape({
-    classes: PropTypes.object,
-    colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
-      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
-      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      type: PropTypes.oneOf(['continuous']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
-      type: PropTypes.oneOf(['piecewise']).isRequired
-    })]),
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    fill: PropTypes.string,
-    hideTooltip: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    label: PropTypes.string,
-    labelFontSize: PropTypes.number,
-    labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'top']),
-    reverse: PropTypes.bool,
-    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
-  })),
-  /**
-   * The configuration of the y-axes.
-   * If not provided, a default axis config is used.
-   * An array of [[AxisConfig]] objects.
-   */
-  yAxis: PropTypes.arrayOf(PropTypes.shape({
-    classes: PropTypes.object,
-    colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
-      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
-      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      type: PropTypes.oneOf(['continuous']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
-      type: PropTypes.oneOf(['piecewise']).isRequired
-    })]),
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    fill: PropTypes.string,
-    hideTooltip: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    label: PropTypes.string,
-    labelFontSize: PropTypes.number,
-    labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['left', 'right']),
-    reverse: PropTypes.bool,
-    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
-  }))
+  width: PropTypes.number
 } : void 0;
 export { PieChart };

package/modern/PieChart/PieChart.plugins.js

@@ -0,0 +1,3 @@
+import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export const PIE_CHART_PLUGINS = [useChartInteraction, useChartHighlight];

package/modern/PieChart/PiePlot.js

@@ -2,13 +2,13 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingAreaContext } from "../context/DrawingAreaProvider/index.js";
 import { PieArcPlot } from "./PieArcPlot.js";
 import { PieArcLabelPlot } from "./PieArcLabelPlot.js";
 import { getPercentageValue } from "../internals/getPercentageValue.js";
 import { getPieCoordinates } from "./getPieCoordinates.js";
 import { usePieSeries } from "../hooks/useSeries.js";
 import { useSkipAnimation } from "../context/AnimationProvider/index.js";
+import { useDrawingArea } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -33,7 +33,7 @@ function PiePlot(props) {
     top,
     width,
     height
-  } = React.useContext(DrawingAreaContext);
+  } = useDrawingArea();
   const skipAnimation = useSkipAnimation(inSkipAnimation);
   if (seriesData === undefined) {
     return null;

package/modern/PieChart/dataTransform/transition.js

@@ -1,6 +1,6 @@
-export const defaultTransitionConfig = {
-  keys: item => item.id,
-  from: ({
+export const getDefaultTransitionConfig = skipAnimation => ({
+  keys: item => item.id ?? item.dataIndex,
+  from: skipAnimation ? undefined : ({
     innerRadius,
     outerRadius,
     cornerRadius,
@@ -64,10 +64,10 @@ export const defaultTransitionConfig = {
     friction: 14,
     clamp: true
   }
-};
-export const defaultLabelTransitionConfig = {
-  keys: item => item.id,
-  from: ({
+});
+export const getDefaultLabelTransitionConfig = skipAnimation => ({
+  keys: item => item.id ?? item.dataIndex,
+  from: skipAnimation ? undefined : ({
     innerRadius,
     outerRadius,
     arcLabelRadius,
@@ -134,4 +134,4 @@ export const defaultLabelTransitionConfig = {
     friction: 14,
     clamp: true
   }
-};
+});

package/modern/PieChart/dataTransform/useTransformData.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useHighlighted } from "../../context/index.js";
+import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
 export function useTransformData(series) {
   const {
     id: seriesId,
@@ -18,7 +18,7 @@ export function useTransformData(series) {
   const {
     isFaded: isItemFaded,
     isHighlighted: isItemHighlighted
-  } = useHighlighted();
+  } = useItemHighlightedGetter();
   const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
     const currentItem = {
       seriesId,
@@ -35,6 +35,7 @@ export function useTransformData(series) {
     const cornerRadius = attributesOverride.cornerRadius ?? baseCornerRadius;
     const arcLabelRadius = attributesOverride.arcLabelRadius ?? baseArcLabelRadius ?? (innerRadius + outerRadius) / 2;
     return _extends({}, item, attributesOverride, {
+      dataIndex: itemIndex,
       isFaded,
       isHighlighted,
       paddingAngle,

package/modern/PieChart/formatter.js

@@ -25,11 +25,14 @@ const formatter = params => {
   seriesOrder.forEach(seriesId => {
     const arcs = d3Pie().startAngle(2 * Math.PI * (series[seriesId].startAngle ?? 0) / 360).endAngle(2 * Math.PI * (series[seriesId].endAngle ?? 360) / 360).padAngle(2 * Math.PI * (series[seriesId].paddingAngle ?? 0) / 360).sortValues(getSortingComparator(series[seriesId].sortingValues ?? 'none'))(series[seriesId].data.map(piePoint => piePoint.value));
     defaultizedSeries[seriesId] = _extends({
+      labelMarkType: 'circle',
       valueFormatter: item => item.value.toLocaleString()
     }, series[seriesId], {
       data: series[seriesId].data.map((item, index) => _extends({}, item, {
         id: item.id ?? `auto-generated-pie-id-${seriesId}-${index}`
-      }, arcs[index])).map((item, index) => _extends({}, item, {
+      }, arcs[index])).map((item, index) => _extends({
+        labelMarkType: 'circle'
+      }, item, {
         formattedValue: series[seriesId].valueFormatter?.(_extends({}, item, {
           label: getLabel(item.label, 'arc')
         }), {

package/modern/PieChart/legend.js

@@ -5,17 +5,18 @@ const legendGetter = params => {
     series
   } = params;
   return seriesOrder.reduce((acc, seriesId) => {
-    series[seriesId].data.forEach(item => {
+    series[seriesId].data.forEach((item, dataIndex) => {
       const formattedLabel = getLabel(item.label, 'legend');
       if (formattedLabel === undefined) {
         return;
       }
       acc.push({
-        id: item.id,
+        markType: item.labelMarkType ?? series[seriesId].labelMarkType,
+        id: item.id ?? dataIndex,
         seriesId,
         color: item.color,
         label: formattedLabel,
-        itemId: item.id
+        itemId: item.id ?? dataIndex
       });
     });
     return acc;

package/modern/PieChart/plugin.js

@@ -1,7 +1,10 @@
 import formatter from "./formatter.js";
 import getColor from "./getColor.js";
+import legendGetter from "./legend.js";
+import tooltipGetter from "./tooltip.js";
 export const plugin = {
-  seriesType: 'pie',
   colorProcessor: getColor,
-  seriesFormatter: formatter
+  seriesProcessor: formatter,
+  legendGetter,
+  tooltipGetter
 };

package/modern/PieChart/tooltip.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { getLabel } from "../internals/getLabel.js";
+const tooltipGetter = params => {
+  const {
+    series,
+    getColor,
+    identifier
+  } = params;
+  if (!identifier || identifier.dataIndex === undefined) {
+    return null;
+  }
+  const point = series.data[identifier.dataIndex];
+  const label = getLabel(point.label, 'tooltip');
+  const value = _extends({}, point, {
+    label
+  });
+  const formattedValue = series.valueFormatter(value, {
+    dataIndex: identifier.dataIndex
+  });
+  return {
+    identifier,
+    color: getColor(identifier.dataIndex),
+    label,
+    value,
+    formattedValue,
+    markType: point.labelMarkType ?? series.labelMarkType
+  };
+};
+export default tooltipGetter;

package/modern/ScatterChart/Scatter.js

@@ -5,11 +5,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
-import { useStore } from "../internals/useStore.js";
-import { useSelector } from "../internals/useSelector.js";
-import { useHighlighted } from "../context/index.js";
-import { useDrawingArea } from "../hooks/useDrawingArea.js";
-import { selectorChartsInteractionIsVoronoiEnabled } from "../context/InteractionSelectors.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useItemHighlightedGetter } from "../hooks/useItemHighlightedGetter.js";
+import { selectorChartsInteractionIsVoronoiEnabled } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -31,7 +31,9 @@ function Scatter(props) {
     markerSize,
     onItemClick
   } = props;
-  const drawingArea = useDrawingArea();
+  const {
+    instance
+  } = useChartContext();
   const store = useStore();
   const isVoronoiEnabled = useSelector(store, selectorChartsInteractionIsVoronoiEnabled);
   const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
@@ -39,7 +41,7 @@ function Scatter(props) {
   const {
     isFaded,
     isHighlighted
-  } = useHighlighted();
+  } = useItemHighlightedGetter();
   const cleanData = React.useMemo(() => {
     const getXPosition = getValueToPositionMapper(xScale);
     const getYPosition = getValueToPositionMapper(yScale);
@@ -48,7 +50,7 @@ function Scatter(props) {
       const scatterPoint = series.data[i];
       const x = getXPosition(scatterPoint.x);
       const y = getYPosition(scatterPoint.y);
-      const isInRange = drawingArea.isPointInside({
+      const isInRange = instance.isPointInside({
         x,
         y
       });
@@ -76,7 +78,7 @@ function Scatter(props) {
       }
     }
     return temp;
-  }, [xScale, yScale, drawingArea, series.data, series.id, isHighlighted, isFaded, getInteractionItemProps, colorGetter, color]);
+  }, [xScale, yScale, series.data, series.id, isHighlighted, isFaded, getInteractionItemProps, colorGetter, color, instance]);
   return /*#__PURE__*/_jsx("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/_jsx("circle", _extends({
       cx: 0,
@@ -91,7 +93,7 @@ function Scatter(props) {
         dataIndex: dataPoint.dataIndex
       })),
       cursor: onItemClick ? 'pointer' : 'unset'
-    }, dataPoint.interactionProps), dataPoint.id))
+    }, dataPoint.interactionProps), dataPoint.id ?? dataPoint.dataIndex))
   });
 }
 process.env.NODE_ENV !== "production" ? Scatter.propTypes = {