@mui/x-charts 7.0.0-alpha.2 → 7.0.0-alpha.4

package/esm/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Delaunay } from 'd3-delaunay';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { InteractionContext } from '../context/InteractionProvider';
+import { CartesianContext } from '../context/CartesianContextProvider';
+import { SVGContext, DrawingContext } from '../context/DrawingProvider';
+import { SeriesContext } from '../context/SeriesContextProvider';
+import { getValueToPositionMapper } from '../hooks/useScale';
+import { getSVGPoint } from '../internals/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+function ChartsVoronoiHandler(props) {
+  var _React$useContext$sca;
+  const {
+    voronoiMaxRadius
+  } = props;
+  const svgRef = React.useContext(SVGContext);
+  const {
+    width,
+    height,
+    top,
+    left
+  } = React.useContext(DrawingContext);
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = React.useContext(CartesianContext);
+  const {
+    dispatch
+  } = React.useContext(InteractionContext);
+  const {
+    series,
+    seriesOrder
+  } = (_React$useContext$sca = React.useContext(SeriesContext).scatter) != null ? _React$useContext$sca : {};
+  const voronoiRef = React.useRef({});
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  useEnhancedEffect(() => {
+    dispatch({
+      type: 'updateVoronoiUsage',
+      useVoronoiInteraction: true
+    });
+    return () => {
+      dispatch({
+        type: 'updateVoronoiUsage',
+        useVoronoiInteraction: false
+      });
+    };
+  }, [dispatch]);
+  useEnhancedEffect(() => {
+    if (seriesOrder === undefined || series === undefined) {
+      // If there is no scatter chart series
+      return;
+    }
+    voronoiRef.current = {};
+    let points = [];
+    seriesOrder.forEach(seriesId => {
+      const {
+        data,
+        xAxisKey,
+        yAxisKey
+      } = series[seriesId];
+      const xScale = xAxis[xAxisKey != null ? xAxisKey : defaultXAxisId].scale;
+      const yScale = yAxis[yAxisKey != null ? yAxisKey : defaultYAxisId].scale;
+      const getXPosition = getValueToPositionMapper(xScale);
+      const getYPosition = getValueToPositionMapper(yScale);
+      const seriesPoints = data.flatMap(({
+        x,
+        y
+      }) => [getXPosition(x), getYPosition(y)]);
+      voronoiRef.current[seriesId] = {
+        startIndex: points.length,
+        endIndex: points.length + seriesPoints.length
+      };
+      points = points.concat(seriesPoints);
+    });
+    voronoiRef.current.delauney = new Delaunay(points);
+  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null) {
+      return undefined;
+    }
+    const handleMouseOut = () => {
+      dispatch({
+        type: 'exitChart'
+      });
+    };
+
+    // TODO: A perf optimisation of voronoi could be to use the last point as the intial point for the next search.
+    const handleMouseMove = event => {
+      var _voronoiRef$current$d;
+      // Get mouse coordinate in global SVG space
+      const svgPoint = getSVGPoint(svgRef.current, event);
+      const outsideX = svgPoint.x < left || svgPoint.x > left + width;
+      const outsideY = svgPoint.y < top || svgPoint.y > top + height;
+      if (outsideX || outsideY) {
+        dispatch({
+          type: 'exitChart'
+        });
+        return;
+      }
+      if (!voronoiRef.current.delauney) {
+        return;
+      }
+      const closestPointIndex = (_voronoiRef$current$d = voronoiRef.current.delauney) == null ? void 0 : _voronoiRef$current$d.find(svgPoint.x, svgPoint.y);
+      if (closestPointIndex !== undefined) {
+        const seriesId = Object.keys(voronoiRef.current).find(id => {
+          if (id === 'delauney') {
+            return false;
+          }
+          return 2 * closestPointIndex >= voronoiRef.current[id].startIndex && 2 * closestPointIndex < voronoiRef.current[id].endIndex;
+        });
+        if (seriesId === undefined) {
+          return;
+        }
+        const dataIndex = (2 * closestPointIndex - voronoiRef.current[seriesId].startIndex) / 2;
+        if (voronoiMaxRadius !== undefined) {
+          const pointX = voronoiRef.current.delauney.points[2 * closestPointIndex];
+          const pointY = voronoiRef.current.delauney.points[2 * closestPointIndex + 1];
+          const dist2 = (pointX - svgPoint.x) ** 2 + (pointY - svgPoint.y) ** 2;
+          if (dist2 > voronoiMaxRadius ** 2) {
+            // The closest point is too far to be considered.
+            dispatch({
+              type: 'leaveItem',
+              data: {
+                type: 'scatter',
+                seriesId,
+                dataIndex
+              }
+            });
+            return;
+          }
+        }
+        dispatch({
+          type: 'enterItem',
+          data: {
+            type: 'scatter',
+            seriesId,
+            dataIndex
+          }
+        });
+      }
+    };
+    element.addEventListener('mouseout', handleMouseOut);
+    element.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      element.removeEventListener('mouseout', handleMouseOut);
+      element.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius]);
+  return /*#__PURE__*/_jsx("g", {}); // Workaround to fix docs scripts
+}
+process.env.NODE_ENV !== "production" ? ChartsVoronoiHandler.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * If `undefined`, the radius is assumed to be infinite.
+   * @default undefined
+   */
+  voronoiMaxRadius: PropTypes.number
+} : void 0;
+export { ChartsVoronoiHandler };

package/esm/ChartsVoronoiHandler/index.js

@@ -0,0 +1 @@
+export * from './ChartsVoronoiHandler';

package/esm/ChartsYAxis/ChartsYAxis.js

@@ -75,6 +75,8 @@ function ChartsYAxis(inProps) {
     tickFontSize,
     label,
     labelFontSize,
+    labelStyle,
+    tickLabelStyle,
     tickSize: tickSizeProp,
     valueFormatter,
     slots,
@@ -109,11 +111,11 @@ function ChartsYAxis(inProps) {
     elementType: TickLabel,
     externalSlotProps: slotProps == null ? void 0 : slotProps.axisTickLabel,
     additionalProps: {
-      style: {
+      style: _extends({
         fontSize: tickFontSize,
         textAnchor: position === 'right' ? 'start' : 'end',
         dominantBaseline: 'central'
-      },
+      }, tickLabelStyle),
       className: classes.tickLabel
     },
     ownerState: {}
@@ -122,12 +124,12 @@ function ChartsYAxis(inProps) {
     elementType: Label,
     externalSlotProps: slotProps == null ? void 0 : slotProps.axisLabel,
     additionalProps: {
-      style: {
+      style: _extends({
         fontSize: labelFontSize,
         angle: positionSign * 90,
         textAnchor: 'middle',
         dominantBaseline: 'auto'
-      }
+      }, labelStyle)
     },
     ownerState: {}
   });

package/esm/LineChart/extremums.js

@@ -7,6 +7,18 @@ export const getExtremumX = params => {
   const maxX = Math.max(...((_axis$data2 = axis.data) != null ? _axis$data2 : []));
   return [minX, maxX];
 };
+function getSeriesExtremums(getValues, stackedData) {
+  if (stackedData.length === 0) {
+    return [null, null];
+  }
+  return stackedData.reduce((seriesAcc, stackedValue) => {
+    const [base, value] = getValues(stackedValue);
+    if (seriesAcc[0] === null) {
+      return [Math.min(base, value), Math.max(base, value)];
+    }
+    return [Math.min(base, value, seriesAcc[0]), Math.max(base, value, seriesAcc[1])];
+  }, getValues(stackedData[0]));
+}
 export const getExtremumY = params => {
   const {
     series,
@@ -14,16 +26,21 @@ export const getExtremumY = params => {
     isDefaultAxis
   } = params;
   return Object.keys(series).filter(seriesId => series[seriesId].yAxisKey === axis.id || isDefaultAxis && series[seriesId].yAxisKey === undefined).reduce((acc, seriesId) => {
-    const isArea = series[seriesId].area !== undefined;
-    const getValues = isArea ? d => d : d => [d[1], d[1]]; // Id area should go from bottom to top, without area should only consider the top
+    const {
+      area,
+      stackedData
+    } = series[seriesId];
+    const isArea = area !== undefined;
+    const getValues = isArea ? d => d : d => [d[1], d[1]]; // Since this series is not used to display an area, we do not consider the base (the d[0]).
 
-    const [seriesMin, seriesMax] = series[seriesId].stackedData.reduce((seriesAcc, stackedValue) => {
-      const [base, value] = getValues(stackedValue);
-      return [Math.min(base, value, seriesAcc[0]), Math.max(base, value, seriesAcc[1])];
-    }, getValues(series[seriesId].stackedData[0]));
-    if (acc[0] === null || acc[1] === null) {
-      return [seriesMin, seriesMax];
+    const seriesExtremums = getSeriesExtremums(getValues, stackedData);
+    if (acc[0] === null) {
+      return seriesExtremums;
+    }
+    if (seriesExtremums[0] === null) {
+      return acc;
     }
+    const [seriesMin, seriesMax] = seriesExtremums;
     return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
   }, [null, null]);
 };

package/esm/LineChart/index.js

@@ -1,8 +1,8 @@
+export * from './LineChart';
 export * from './LinePlot';
 export * from './AreaPlot';
 export * from './MarkPlot';
 export * from './LineHighlightPlot';
-export * from './LineChart';
 export * from './AreaElement';
 export * from './LineElement';
 export * from './MarkElement';

package/esm/PieChart/PieArc.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "onClick", "isFaded", "isHighlighted", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { arc as d3Arc } from 'd3-shape';
 import { animated, to } from '@react-spring/web';
 import composeClasses from '@mui/utils/composeClasses';
@@ -37,7 +38,7 @@ const PieArcRoot = styled(animated.path, {
   strokeWidth: 1,
   strokeLinejoin: 'round'
 }));
-export default function PieArc(props) {
+function PieArc(props) {
   const {
       id,
       dataIndex,
@@ -82,4 +83,19 @@ export default function PieArc(props) {
     seriesId: id,
     dataIndex
   })));
-}
+}
+process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object,
+  dataIndex: PropTypes.number.isRequired,
+  highlightScope: PropTypes.shape({
+    faded: PropTypes.oneOf(['global', 'none', 'series']),
+    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+  }),
+  isFaded: PropTypes.bool.isRequired,
+  isHighlighted: PropTypes.bool.isRequired
+} : void 0;
+export { PieArc };

package/esm/PieChart/PieArcLabel.js

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { animated, to } from '@react-spring/web';
 import { arc as d3Arc } from 'd3-shape';
-import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
@@ -57,7 +57,7 @@ const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle,
   }
   return y;
 };
-export default function PieArcLabel(props) {
+function PieArcLabel(props) {
   const {
       id,
       classes: innerClasses,
@@ -98,12 +98,8 @@ process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
-  cornerRadius: PropTypes.number,
-  dataIndex: PropTypes.number.isRequired,
-  highlightScope: PropTypes.shape({
-    faded: PropTypes.oneOf(['global', 'none', 'series']),
-    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  }),
-  innerRadius: PropTypes.number,
-  outerRadius: PropTypes.number.isRequired
-} : void 0;
+  formattedArcLabel: PropTypes.string,
+  isFaded: PropTypes.bool.isRequired,
+  isHighlighted: PropTypes.bool.isRequired
+} : void 0;
+export { PieArcLabel };

package/esm/PieChart/PieArcLabelPlot.js

@@ -3,10 +3,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
 import { defaultLabelTransitionConfig } from './dataTransform/transition';
 import { useTransformData } from './dataTransform/useTransformData';
-import PieArcLabel from './PieArcLabel';
+import { PieArcLabel } from './PieArcLabel';
 import { jsx as _jsx } from "react/jsx-runtime";
 const RATIO = 180 / Math.PI;
 function getItemLabel(arcLabel, arcLabelMinAngle, item) {
@@ -23,7 +24,7 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
   }
   return arcLabel(item);
 }
-export function PieArcLabelPlot(props) {
+function PieArcLabelPlot(props) {
   var _slots$pieArcLabel;
   const {
       slots,
@@ -89,4 +90,92 @@ export function PieArcLabelPlot(props) {
       }, slotProps == null ? void 0 : slotProps.pieArcLabel));
     })
   }));
-}
+}
+process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The label displayed into the arc.
+   */
+  arcLabel: PropTypes.oneOfType([PropTypes.oneOf(['formattedValue', 'label', 'value']), PropTypes.func]),
+  /**
+   * The minimal angle required to display the arc label.
+   */
+  arcLabelMinAngle: PropTypes.number,
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius: PropTypes.number,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string.isRequired,
+    endAngle: PropTypes.number.isRequired,
+    formattedValue: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    index: PropTypes.number.isRequired,
+    label: PropTypes.string,
+    padAngle: PropTypes.number.isRequired,
+    startAngle: PropTypes.number.isRequired,
+    value: PropTypes.number.isRequired
+  })).isRequired,
+  /**
+   * Override the arc attibutes when it is faded.
+   */
+  faded: PropTypes.shape({
+    additionalRadius: PropTypes.number,
+    color: PropTypes.string,
+    cornerRadius: PropTypes.number,
+    innerRadius: PropTypes.number,
+    outerRadius: PropTypes.number,
+    paddingAngle: PropTypes.number
+  }),
+  /**
+   * Override the arc attibutes when it is highlighted.
+   */
+  highlighted: PropTypes.shape({
+    additionalRadius: PropTypes.number,
+    color: PropTypes.string,
+    cornerRadius: PropTypes.number,
+    innerRadius: PropTypes.number,
+    outerRadius: PropTypes.number,
+    paddingAngle: PropTypes.number
+  }),
+  highlightScope: PropTypes.shape({
+    faded: PropTypes.oneOf(['global', 'none', 'series']),
+    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+  }),
+  id: PropTypes.string.isRequired,
+  /**
+   * The radius between circle center and the begining of the arc.
+   * @default 0
+   */
+  innerRadius: PropTypes.number,
+  /**
+   * The radius between circle center and the end of the arc.
+   * @default R_max The maximal radius that fit into the drawing area.
+   */
+  outerRadius: PropTypes.number.isRequired,
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle: PropTypes.number,
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { PieArcLabelPlot };

package/esm/PieChart/PieArcPlot.js

@@ -3,12 +3,13 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "onClick", "skipAnimation"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
-import PieArc from './PieArc';
+import { PieArc } from './PieArc';
 import { defaultTransitionConfig } from './dataTransform/transition';
 import { useTransformData } from './dataTransform/useTransformData';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function PieArcPlot(props) {
+function PieArcPlot(props) {
   var _slots$pieArc;
   const {
       slots,
@@ -81,4 +82,91 @@ export function PieArcPlot(props) {
       }, slotProps == null ? void 0 : slotProps.pieArc));
     })
   }));
-}
+}
+process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius: PropTypes.number,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string.isRequired,
+    endAngle: PropTypes.number.isRequired,
+    formattedValue: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    index: PropTypes.number.isRequired,
+    label: PropTypes.string,
+    padAngle: PropTypes.number.isRequired,
+    startAngle: PropTypes.number.isRequired,
+    value: PropTypes.number.isRequired
+  })).isRequired,
+  /**
+   * Override the arc attibutes when it is faded.
+   */
+  faded: PropTypes.shape({
+    additionalRadius: PropTypes.number,
+    color: PropTypes.string,
+    cornerRadius: PropTypes.number,
+    innerRadius: PropTypes.number,
+    outerRadius: PropTypes.number,
+    paddingAngle: PropTypes.number
+  }),
+  /**
+   * Override the arc attibutes when it is highlighted.
+   */
+  highlighted: PropTypes.shape({
+    additionalRadius: PropTypes.number,
+    color: PropTypes.string,
+    cornerRadius: PropTypes.number,
+    innerRadius: PropTypes.number,
+    outerRadius: PropTypes.number,
+    paddingAngle: PropTypes.number
+  }),
+  highlightScope: PropTypes.shape({
+    faded: PropTypes.oneOf(['global', 'none', 'series']),
+    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+  }),
+  id: PropTypes.string.isRequired,
+  /**
+   * The radius between circle center and the begining of the arc.
+   * @default 0
+   */
+  innerRadius: PropTypes.number,
+  /**
+   * Callback fired when a pie item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
+   * @param {DefaultizedPieValueType} item The pie item.
+   */
+  onClick: PropTypes.func,
+  /**
+   * The radius between circle center and the end of the arc.
+   * @default R_max The maximal radius that fit into the drawing area.
+   */
+  outerRadius: PropTypes.number.isRequired,
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle: PropTypes.number,
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { PieArcPlot };

package/esm/PieChart/index.js

@@ -1,4 +1,6 @@
-export * from './PiePlot';
 export * from './PieChart';
+export * from './PiePlot';
+export * from './PieArcPlot';
+export * from './PieArcLabelPlot';
 export * from './PieArc';
 export * from './PieArcLabel';

package/esm/ScatterChart/Scatter.js

@@ -23,10 +23,16 @@ function Scatter(props) {
     color,
     markerSize
   } = props;
+  const highlightScope = React.useMemo(() => _extends({
+    highlighted: 'item',
+    faded: 'global'
+  }, series.highlightScope), [series.highlightScope]);
   const {
-    item
+    item,
+    useVoronoiInteraction
   } = React.useContext(InteractionContext);
-  const getInteractionItemProps = useInteractionItemProps(series.highlightScope);
+  const skipInteractionHandlers = useVoronoiInteraction || series.disableHover;
+  const getInteractionItemProps = useInteractionItemProps(highlightScope, skipInteractionHandlers);
   const cleanData = React.useMemo(() => {
     const getXPosition = getValueToPositionMapper(xScale);
     const getYPosition = getValueToPositionMapper(yScale);
@@ -48,22 +54,24 @@ function Scatter(props) {
         dataIndex: i
       };
       if (isInRange) {
+        const isHighlighted = getIsHighlighted(item, pointCtx, highlightScope);
         temp.push({
           x,
           y,
-          isFaded: !getIsHighlighted(item, pointCtx, series.highlightScope) && getIsFaded(item, pointCtx, series.highlightScope),
+          isHighlighted,
+          isFaded: !isHighlighted && getIsFaded(item, pointCtx, highlightScope),
           interactionProps: getInteractionItemProps(pointCtx),
           id: scatterPoint.id
         });
       }
     }
     return temp;
-  }, [yScale, xScale, getInteractionItemProps, item, series.data, series.highlightScope, series.id]);
+  }, [xScale, yScale, series.data, series.id, item, highlightScope, getInteractionItemProps]);
   return /*#__PURE__*/_jsx("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/_jsx("circle", _extends({
       cx: 0,
       cy: 0,
-      r: markerSize,
+      r: (dataPoint.isHighlighted ? 1.2 : 1) * markerSize,
       transform: `translate(${dataPoint.x}, ${dataPoint.y})`,
       fill: color,
       opacity: dataPoint.isFaded && 0.3 || 1
@@ -78,12 +86,13 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
   color: PropTypes.string.isRequired,
   markerSize: PropTypes.number.isRequired,
   series: PropTypes.shape({
-    color: PropTypes.string,
+    color: PropTypes.string.isRequired,
     data: PropTypes.arrayOf(PropTypes.shape({
       id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
       x: PropTypes.number.isRequired,
       y: PropTypes.number.isRequired
     })).isRequired,
+    disableHover: PropTypes.bool,
     highlightScope: PropTypes.shape({
       faded: PropTypes.oneOf(['global', 'none', 'series']),
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])