@mui/x-charts 9.2.0 → 9.4.0

package/PieChart/PieChart.js

@@ -184,11 +184,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   highlightedItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['pie']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['pie']).isRequired
   })]),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -305,11 +305,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   tooltipItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['pie']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['pie']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/PieChart/PieChart.mjs

@@ -177,11 +177,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   highlightedItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['pie']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['pie']).isRequired
   })]),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -298,11 +298,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   tooltipItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['pie']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['pie']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/RadarChart/RadarAxis/RadarAxis.utils.d.mts

@@ -7,13 +7,13 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
 export declare function getLabelAttributes(params: GetLabelAttributesParams): {
   x: number;
   y: number;
-  textAnchor: "inherit" | "end" | "start" | "middle" | undefined;
+  textAnchor: "start" | "end" | "inherit" | "middle" | undefined;
   dominantBaseline: "inherit" | "auto" | "text-before-edge" | "middle" | "central" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "use-script" | "no-change" | "reset-size" | undefined;
   transform?: undefined;
 } | {
   x: number;
   y: number;
-  textAnchor: "inherit" | "end" | "start" | "middle" | undefined;
+  textAnchor: "start" | "end" | "inherit" | "middle" | undefined;
   dominantBaseline: "inherit" | "auto" | "text-before-edge" | "middle" | "central" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "use-script" | "no-change" | "reset-size" | undefined;
   transform: string;
 };

package/RadarChart/RadarAxis/RadarAxis.utils.d.ts

@@ -7,13 +7,13 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
 export declare function getLabelAttributes(params: GetLabelAttributesParams): {
   x: number;
   y: number;
-  textAnchor: "inherit" | "end" | "start" | "middle" | undefined;
+  textAnchor: "start" | "end" | "inherit" | "middle" | undefined;
   dominantBaseline: "inherit" | "auto" | "text-before-edge" | "middle" | "central" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "use-script" | "no-change" | "reset-size" | undefined;
   transform?: undefined;
 } | {
   x: number;
   y: number;
-  textAnchor: "inherit" | "end" | "start" | "middle" | undefined;
+  textAnchor: "start" | "end" | "inherit" | "middle" | undefined;
   dominantBaseline: "inherit" | "auto" | "text-before-edge" | "middle" | "central" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "use-script" | "no-change" | "reset-size" | undefined;
   transform: string;
 };

package/RadarChart/RadarAxis/useRadarAxis.js

@@ -38,7 +38,7 @@ function useRadarAxis(params) {
     return null;
   }
   const existingMetrics = rotationScale.domain();
-  if (!existingMetrics.includes(metric)) {
+  if (process.env.NODE_ENV !== 'production' && !existingMetrics.includes(metric)) {
     (0, _warning.warnOnce)([`MUI X Charts: Your radar axis tries to display values for the metric "${metric}" which does not exist.`, `Either add this metric to your radar, or pick one from the existing metrics: ${existingMetrics.join(', ')}`]);
   }
   const anglesWithDefault = angle !== undefined ? (0, _degToRad.degToRad)(angle) : rotationScale(metric) ?? 0;

package/RadarChart/RadarAxis/useRadarAxis.mjs

@@ -32,7 +32,7 @@ export function useRadarAxis(params) {
     return null;
   }
   const existingMetrics = rotationScale.domain();
-  if (!existingMetrics.includes(metric)) {
+  if (process.env.NODE_ENV !== 'production' && !existingMetrics.includes(metric)) {
     warnOnce([`MUI X Charts: Your radar axis tries to display values for the metric "${metric}" which does not exist.`, `Either add this metric to your radar, or pick one from the existing metrics: ${existingMetrics.join(', ')}`]);
   }
   const anglesWithDefault = angle !== undefined ? degToRad(angle) : rotationScale(metric) ?? 0;

package/RadarChart/RadarChart.js

@@ -151,11 +151,11 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    */
   highlightedItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['radar']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['radar']).isRequired
   })]),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -256,11 +256,11 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
     labelFormatter: _propTypes.default.func,
     labelGap: _propTypes.default.number,
     max: _propTypes.default.number,
-    metrics: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.shape({
+    metrics: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
       max: _propTypes.default.number,
       min: _propTypes.default.number,
       name: _propTypes.default.string.isRequired
-    }))]).isRequired,
+    })), _propTypes.default.arrayOf(_propTypes.default.string)]).isRequired,
     startAngle: _propTypes.default.number
   }).isRequired,
   /**
@@ -313,11 +313,11 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    */
   tooltipItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['radar']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['radar']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/RadarChart/RadarChart.mjs

@@ -144,11 +144,11 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    */
   highlightedItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['radar']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['radar']).isRequired
   })]),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -249,11 +249,11 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
     labelFormatter: PropTypes.func,
     labelGap: PropTypes.number,
     max: PropTypes.number,
-    metrics: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.shape({
+    metrics: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
       max: PropTypes.number,
       min: PropTypes.number,
       name: PropTypes.string.isRequired
-    }))]).isRequired,
+    })), PropTypes.arrayOf(PropTypes.string)]).isRequired,
     startAngle: PropTypes.number
   }).isRequired,
   /**
@@ -306,11 +306,11 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    */
   tooltipItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['radar']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['radar']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.js

@@ -69,7 +69,9 @@ function RadarSeriesArea(props) {
       if (hidden) {
         return null;
       }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({}, getPathProps({
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
+        "data-series": id
+      }, getPathProps({
         seriesId: id,
         points,
         color,

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.mjs

@@ -60,7 +60,9 @@ function RadarSeriesArea(props) {
       if (hidden) {
         return null;
       }
-      return /*#__PURE__*/_jsx("path", _extends({}, getPathProps({
+      return /*#__PURE__*/_jsx("path", _extends({
+        "data-series": id
+      }, getPathProps({
         seriesId: id,
         points,
         color,

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.js

@@ -64,6 +64,7 @@ function RadarSeriesMarks(props) {
         return null;
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        "data-series": id,
         children: points.map((point, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({}, getCircleProps({
           seriesId: id,
           point,

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.mjs

@@ -55,6 +55,7 @@ function RadarSeriesMarks(props) {
         return null;
       }
       return /*#__PURE__*/_jsx("g", {
+        "data-series": id,
         children: points.map((point, index) => /*#__PURE__*/_jsx("circle", _extends({}, getCircleProps({
           seriesId: id,
           point,

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -43,6 +43,7 @@ function RadarSeriesPlot(props) {
         return null;
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+        "data-series": seriesId,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({}, (0, _RadarSeriesArea.getPathProps)({
           seriesId,
           points,

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.mjs

@@ -36,6 +36,7 @@ function RadarSeriesPlot(props) {
         return null;
       }
       return /*#__PURE__*/_jsxs("g", {
+        "data-series": seriesId,
         children: [/*#__PURE__*/_jsx("path", _extends({}, getPathProps({
           seriesId,
           points,

package/ScatterChart/BatchScatter.d.mts

@@ -2,23 +2,17 @@ import { type DefaultizedScatterSeriesType } from "../models/seriesType/scatter.
 import { type D3Scale } from "../models/axis.mjs";
 import type { ScatterClasses } from "./scatterClasses.mjs";
 import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+import type { ScatterSizeGetter } from "./seriesConfig/getMarkerSize.mjs";
 export interface BatchScatterProps {
   series: DefaultizedScatterSeriesType;
   xScale: D3Scale;
   yScale: D3Scale;
   color: string;
   colorGetter?: ColorGetter<'scatter'>;
+  sizeGetter?: ScatterSizeGetter;
   classes?: Partial<ScatterClasses>;
   className?: string;
 }
-export interface BatchScatterPathsProps {
-  series: DefaultizedScatterSeriesType;
-  xScale: D3Scale;
-  yScale: D3Scale;
-  color: string;
-  colorGetter?: ColorGetter<'scatter'>;
-  markerSize: number;
-}
 /**
  * @internal
  * A batch version of the Scatter component that uses SVG paths to render points.

package/ScatterChart/BatchScatter.d.ts

@@ -2,23 +2,17 @@ import { type DefaultizedScatterSeriesType } from "../models/seriesType/scatter.
 import { type D3Scale } from "../models/axis.js";
 import type { ScatterClasses } from "./scatterClasses.js";
 import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
+import type { ScatterSizeGetter } from "./seriesConfig/getMarkerSize.js";
 export interface BatchScatterProps {
   series: DefaultizedScatterSeriesType;
   xScale: D3Scale;
   yScale: D3Scale;
   color: string;
   colorGetter?: ColorGetter<'scatter'>;
+  sizeGetter?: ScatterSizeGetter;
   classes?: Partial<ScatterClasses>;
   className?: string;
 }
-export interface BatchScatterPathsProps {
-  series: DefaultizedScatterSeriesType;
-  xScale: D3Scale;
-  yScale: D3Scale;
-  color: string;
-  colorGetter?: ColorGetter<'scatter'>;
-  markerSize: number;
-}
 /**
  * @internal
  * A batch version of the Scatter component that uses SVG paths to render points.

package/ScatterChart/BatchScatter.js

@@ -23,7 +23,7 @@ const ALMOST_ZERO = 0.01;
 function createPath(x, y, markerSize) {
   return `M${x - markerSize} ${y} a${markerSize} ${markerSize} 0 1 1 0 ${ALMOST_ZERO}`;
 }
-function useCreatePaths(seriesData, markerSize, xScale, yScale, color, colorGetter) {
+function useCreatePaths(seriesData, markerSize, xScale, yScale, color, colorGetter, sizeGetter) {
   const {
     instance
   } = (0, _ChartsProvider.useChartsContext)();
@@ -38,7 +38,8 @@ function useCreatePaths(seriesData, markerSize, xScale, yScale, color, colorGett
     if (!instance.isPointInside(x, y)) {
       continue;
     }
-    const path = createPath(x, y, markerSize);
+    const radius = sizeGetter ? sizeGetter(i) : markerSize;
+    const path = createPath(x, y, radius);
     const fill = colorGetter ? colorGetter(i) : color;
     const tempPath = (0, _appendAtKey.appendAtKey)(temporaryPaths, fill, path);
     if (tempPath.length >= MAX_POINTS_PER_PATH) {
@@ -60,9 +61,10 @@ function BatchScatterPaths(props) {
     yScale,
     color,
     colorGetter,
-    markerSize
+    markerSize,
+    sizeGetter
   } = props;
-  const paths = useCreatePaths(series.data, markerSize, xScale, yScale, color, colorGetter);
+  const paths = useCreatePaths(series.data, markerSize, xScale, yScale, color, colorGetter, sizeGetter);
   const children = [];
   let i = 0;
   for (const [fill, dArray] of paths.entries()) {
@@ -115,6 +117,7 @@ function BatchScatter(props) {
     yScale,
     color,
     colorGetter,
+    sizeGetter,
     className
   } = props;
   const {
@@ -122,20 +125,21 @@ function BatchScatter(props) {
   } = (0, _ChartsProvider.useChartsContext)();
   const isSeriesHighlighted = store.use(_useChartHighlight.selectorChartIsSeriesHighlighted, series.id);
   const isSeriesFaded = store.use(_useChartHighlight.selectorChartIsSeriesFaded, series.id);
-  const seriesHighlightedItem = store.use(_useChartHighlight.selectorChartSeriesHighlightedItem, series.id);
+  const seriesHighlightedItemDataIndex = store.use(_useChartHighlight.selectorChartSeriesHighlightedItem, series.id);
   const seriesUnfadedItem = store.use(_useChartHighlight.selectorChartSeriesUnfadedItem, series.id);
   const highlightedModifier = 1.2;
-  const markerSize = series.markerSize * (isSeriesHighlighted ? highlightedModifier : 1);
+  const highlightMultiplier = isSeriesHighlighted ? highlightedModifier : 1;
+  const getMarkerRadius = index => (sizeGetter ? sizeGetter(index) : series.markerSize) * highlightMultiplier;
   const classes = (0, _scatterClasses.useUtilityClasses)(props);
   const siblings = [];
-  if (seriesHighlightedItem != null) {
-    const datum = series.data[seriesHighlightedItem];
+  if (seriesHighlightedItemDataIndex != null) {
+    const datum = series.data[seriesHighlightedItemDataIndex];
     const getXPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(xScale);
     const getYPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(yScale);
     siblings.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      fill: colorGetter ? colorGetter(seriesHighlightedItem) : color,
+      fill: colorGetter ? colorGetter(seriesHighlightedItemDataIndex) : color,
       "data-highlighted": true,
-      d: createPath(getXPosition(datum.x), getYPosition(datum.y), markerSize * highlightedModifier)
+      d: createPath(getXPosition(datum.x), getYPosition(datum.y), getMarkerRadius(seriesHighlightedItemDataIndex) * highlightedModifier)
     }, `highlighted-${series.id}`));
   }
   if (seriesUnfadedItem != null) {
@@ -144,7 +148,7 @@ function BatchScatter(props) {
     const getYPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(yScale);
     siblings.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
       fill: colorGetter ? colorGetter(seriesUnfadedItem) : color,
-      d: createPath(getXPosition(datum.x), getYPosition(datum.y), markerSize)
+      d: createPath(getXPosition(datum.x), getYPosition(datum.y), getMarkerRadius(seriesUnfadedItem))
     }, `unfaded-${series.id}`));
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
@@ -159,7 +163,8 @@ function BatchScatter(props) {
         yScale: yScale,
         color: color,
         colorGetter: colorGetter,
-        markerSize: markerSize
+        sizeGetter: getMarkerRadius,
+        markerSize: series.markerSize
       })
     }), siblings]
   });

package/ScatterChart/BatchScatter.mjs

@@ -16,7 +16,7 @@ const ALMOST_ZERO = 0.01;
 function createPath(x, y, markerSize) {
   return `M${x - markerSize} ${y} a${markerSize} ${markerSize} 0 1 1 0 ${ALMOST_ZERO}`;
 }
-function useCreatePaths(seriesData, markerSize, xScale, yScale, color, colorGetter) {
+function useCreatePaths(seriesData, markerSize, xScale, yScale, color, colorGetter, sizeGetter) {
   const {
     instance
   } = useChartsContext();
@@ -31,7 +31,8 @@ function useCreatePaths(seriesData, markerSize, xScale, yScale, color, colorGett
     if (!instance.isPointInside(x, y)) {
       continue;
     }
-    const path = createPath(x, y, markerSize);
+    const radius = sizeGetter ? sizeGetter(i) : markerSize;
+    const path = createPath(x, y, radius);
     const fill = colorGetter ? colorGetter(i) : color;
     const tempPath = appendAtKey(temporaryPaths, fill, path);
     if (tempPath.length >= MAX_POINTS_PER_PATH) {
@@ -53,9 +54,10 @@ function BatchScatterPaths(props) {
     yScale,
     color,
     colorGetter,
-    markerSize
+    markerSize,
+    sizeGetter
   } = props;
-  const paths = useCreatePaths(series.data, markerSize, xScale, yScale, color, colorGetter);
+  const paths = useCreatePaths(series.data, markerSize, xScale, yScale, color, colorGetter, sizeGetter);
   const children = [];
   let i = 0;
   for (const [fill, dArray] of paths.entries()) {
@@ -108,6 +110,7 @@ export function BatchScatter(props) {
     yScale,
     color,
     colorGetter,
+    sizeGetter,
     className
   } = props;
   const {
@@ -115,20 +118,21 @@ export function BatchScatter(props) {
   } = useChartsContext();
   const isSeriesHighlighted = store.use(selectorChartIsSeriesHighlighted, series.id);
   const isSeriesFaded = store.use(selectorChartIsSeriesFaded, series.id);
-  const seriesHighlightedItem = store.use(selectorChartSeriesHighlightedItem, series.id);
+  const seriesHighlightedItemDataIndex = store.use(selectorChartSeriesHighlightedItem, series.id);
   const seriesUnfadedItem = store.use(selectorChartSeriesUnfadedItem, series.id);
   const highlightedModifier = 1.2;
-  const markerSize = series.markerSize * (isSeriesHighlighted ? highlightedModifier : 1);
+  const highlightMultiplier = isSeriesHighlighted ? highlightedModifier : 1;
+  const getMarkerRadius = index => (sizeGetter ? sizeGetter(index) : series.markerSize) * highlightMultiplier;
   const classes = useUtilityClasses(props);
   const siblings = [];
-  if (seriesHighlightedItem != null) {
-    const datum = series.data[seriesHighlightedItem];
+  if (seriesHighlightedItemDataIndex != null) {
+    const datum = series.data[seriesHighlightedItemDataIndex];
     const getXPosition = getValueToPositionMapper(xScale);
     const getYPosition = getValueToPositionMapper(yScale);
     siblings.push(/*#__PURE__*/_jsx("path", {
-      fill: colorGetter ? colorGetter(seriesHighlightedItem) : color,
+      fill: colorGetter ? colorGetter(seriesHighlightedItemDataIndex) : color,
       "data-highlighted": true,
-      d: createPath(getXPosition(datum.x), getYPosition(datum.y), markerSize * highlightedModifier)
+      d: createPath(getXPosition(datum.x), getYPosition(datum.y), getMarkerRadius(seriesHighlightedItemDataIndex) * highlightedModifier)
     }, `highlighted-${series.id}`));
   }
   if (seriesUnfadedItem != null) {
@@ -137,7 +141,7 @@ export function BatchScatter(props) {
     const getYPosition = getValueToPositionMapper(yScale);
     siblings.push(/*#__PURE__*/_jsx("path", {
       fill: colorGetter ? colorGetter(seriesUnfadedItem) : color,
-      d: createPath(getXPosition(datum.x), getYPosition(datum.y), markerSize)
+      d: createPath(getXPosition(datum.x), getYPosition(datum.y), getMarkerRadius(seriesUnfadedItem))
     }, `unfaded-${series.id}`));
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
@@ -152,7 +156,8 @@ export function BatchScatter(props) {
         yScale: yScale,
         color: color,
         colorGetter: colorGetter,
-        markerSize: markerSize
+        sizeGetter: getMarkerRadius,
+        markerSize: series.markerSize
       })
     }), siblings]
   });

package/ScatterChart/FocusedScatterMark.js

@@ -32,9 +32,9 @@ function FocusedScatterMark(_ref) {
   const {
     cx,
     cy,
-    series
+    markerSize
   } = resolved;
-  const size = series.markerSize + 3;
+  const size = markerSize + 3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
     className: (0, _clsx.default)(classes.focusedMark, className),
     fill: "none",

package/ScatterChart/FocusedScatterMark.mjs

@@ -25,9 +25,9 @@ export function FocusedScatterMark(_ref) {
   const {
     cx,
     cy,
-    series
+    markerSize
   } = resolved;
-  const size = series.markerSize + 3;
+  const size = markerSize + 3;
   return /*#__PURE__*/_jsx("rect", _extends({
     className: clsx(classes.focusedMark, className),
     fill: "none",

package/ScatterChart/HighlightedScatterMark.js

@@ -46,12 +46,12 @@ function HighlightedScatterMark(_ref) {
   const {
     cx,
     cy,
-    series
+    markerSize
   } = resolved;
 
   // Allow a markerSize margin around the drawing area so the highlight ring stays
   // visible at the edges (e.g. during keyboard navigation) without needing a clip-path.
-  const margin = series.markerSize;
+  const margin = markerSize;
   if (cx < drawingArea.left - margin || cx > drawingArea.left + drawingArea.width + margin || cy < drawingArea.top - margin || cy > drawingArea.top + drawingArea.height + margin) {
     return null;
   }
@@ -62,7 +62,7 @@ function HighlightedScatterMark(_ref) {
     strokeWidth: 1,
     cx: cx,
     cy: cy,
-    r: series.markerSize,
+    r: markerSize,
     pointerEvents: "none"
   }, props));
 }

package/ScatterChart/HighlightedScatterMark.mjs

@@ -40,12 +40,12 @@ export function HighlightedScatterMark(_ref) {
   const {
     cx,
     cy,
-    series
+    markerSize
   } = resolved;
 
   // Allow a markerSize margin around the drawing area so the highlight ring stays
   // visible at the edges (e.g. during keyboard navigation) without needing a clip-path.
-  const margin = series.markerSize;
+  const margin = markerSize;
   if (cx < drawingArea.left - margin || cx > drawingArea.left + drawingArea.width + margin || cy < drawingArea.top - margin || cy > drawingArea.top + drawingArea.height + margin) {
     return null;
   }
@@ -56,7 +56,7 @@ export function HighlightedScatterMark(_ref) {
     strokeWidth: 1,
     cx: cx,
     cy: cy,
-    r: series.markerSize,
+    r: markerSize,
     pointerEvents: "none"
   }, props));
 }

package/ScatterChart/Scatter.d.mts

@@ -3,6 +3,7 @@ import { type ScatterMarkerSlotProps, type ScatterMarkerSlots } from "./ScatterM
 import { type DefaultizedScatterSeriesType, type ScatterItemIdentifier } from "../models/seriesType/scatter.mjs";
 import { type D3Scale } from "../models/axis.mjs";
 import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+import type { ScatterSizeGetter } from "./seriesConfig/getMarkerSize.mjs";
 import type { ScatterClasses } from "./scatterClasses.mjs";
 /**
  * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
@@ -18,6 +19,10 @@ export interface ScatterProps {
    * If provided, the color for the specific scatter item is returned.
    */
   colorGetter: ColorGetter<'scatter'>;
+  /**
+   * Function to get the marker size of a scatter item given its data index.
+   */
+  sizeGetter: ScatterSizeGetter;
   /**
    * Callback fired when clicking on a scatter item.
    * @param {MouseEvent} event Mouse event recorded on the `<svg/>` element.

package/ScatterChart/Scatter.d.ts

@@ -3,6 +3,7 @@ import { type ScatterMarkerSlotProps, type ScatterMarkerSlots } from "./ScatterM
 import { type DefaultizedScatterSeriesType, type ScatterItemIdentifier } from "../models/seriesType/scatter.js";
 import { type D3Scale } from "../models/axis.js";
 import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
+import type { ScatterSizeGetter } from "./seriesConfig/getMarkerSize.js";
 import type { ScatterClasses } from "./scatterClasses.js";
 /**
  * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
@@ -18,6 +19,10 @@ export interface ScatterProps {
    * If provided, the color for the specific scatter item is returned.
    */
   colorGetter: ColorGetter<'scatter'>;
+  /**
+   * Function to get the marker size of a scatter item given its data index.
+   */
+  sizeGetter: ScatterSizeGetter;
   /**
    * Callback fired when clicking on a scatter item.
    * @param {MouseEvent} event Mouse event recorded on the `<svg/>` element.

package/ScatterChart/Scatter.js

@@ -50,6 +50,7 @@ function Scatter(props) {
     xScale,
     yScale,
     colorGetter,
+    sizeGetter,
     onItemClick,
     classes: inClasses,
     slots,
@@ -68,8 +69,7 @@ function Scatter(props) {
       elementType: Marker,
       externalSlotProps: slotProps?.marker,
       additionalProps: {
-        seriesId: series.id,
-        size: series.markerSize
+        seriesId: series.id
       },
       ownerState: {}
     }),
@@ -88,6 +88,7 @@ function Scatter(props) {
         className: (0, _clsx.default)(classes.marker, markerProps.className),
         dataIndex: dataPoint.dataIndex,
         color: colorGetter(dataPoint.dataIndex),
+        size: sizeGetter(dataPoint.dataIndex),
         isHighlighted: isItemHighlighted,
         isFaded: isItemFaded,
         x: dataPoint.x,
@@ -123,6 +124,10 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
    */
   onItemClick: _propTypes.default.func,
   series: _propTypes.default.object.isRequired,
+  /**
+   * Function to get the marker size of a scatter item given its data index.
+   */
+  sizeGetter: _propTypes.default.func.isRequired,
   slotProps: _propTypes.default.object,
   slots: _propTypes.default.object,
   xScale: _propTypes.default.func.isRequired,