@mui/x-charts 9.3.0 → 9.4.0

package/PieChart/PieArcPlot.d.mts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { type PieArcProps } from "./PieArc.mjs";
 import { type ComputedPieRadius, type DefaultizedPieSeriesType, type DefaultizedPieValueType, type PieItemIdentifier } from "../models/seriesType/pie.mjs";
+import type { PieArcPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface PieArcPlotSlots {
-  pieArc?: React.JSXElementConstructor<PieArcProps>;
+  pieArc?: React.JSXElementConstructor<PieArcProps & PieArcPropsOverrides>;
 }
 export interface PieArcPlotSlotProps {
-  pieArc?: Partial<PieArcProps>;
+  pieArc?: Partial<PieArcProps> & PieArcPropsOverrides;
 }
 export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle'>, ComputedPieRadius {
   /**

package/PieChart/PieArcPlot.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { type PieArcProps } from "./PieArc.js";
 import { type ComputedPieRadius, type DefaultizedPieSeriesType, type DefaultizedPieValueType, type PieItemIdentifier } from "../models/seriesType/pie.js";
+import type { PieArcPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface PieArcPlotSlots {
-  pieArc?: React.JSXElementConstructor<PieArcProps>;
+  pieArc?: React.JSXElementConstructor<PieArcProps & PieArcPropsOverrides>;
 }
 export interface PieArcPlotSlotProps {
-  pieArc?: Partial<PieArcProps>;
+  pieArc?: Partial<PieArcProps> & PieArcPropsOverrides;
 }
 export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle'>, ComputedPieRadius {
   /**

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/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,

package/ScatterChart/Scatter.mjs

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

package/ScatterChart/ScatterChart.d.mts

@@ -7,6 +7,7 @@ import { type ChartsContainerProps } from "../ChartsContainer/index.mjs";
 import { type ScatterSeriesType } from "../models/seriesType/scatter.mjs";
 import { type ChartsTooltipProps } from "../ChartsTooltip/index.mjs";
 import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.mjs";
+import type { TooltipPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 import { type ChartsLegendSlotProps, type ChartsLegendSlots } from "../ChartsLegend/index.mjs";
 import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from "../ChartsOverlay/index.mjs";
 import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.mjs";
@@ -20,7 +21,7 @@ export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotS
    * Slot props for the tooltip component.
    * @default {}
    */
-  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>> & TooltipPropsOverrides;
 }
 export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
 export interface ScatterChartProps extends Omit<ChartsContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {

package/ScatterChart/ScatterChart.d.ts

@@ -7,6 +7,7 @@ import { type ChartsContainerProps } from "../ChartsContainer/index.js";
 import { type ScatterSeriesType } from "../models/seriesType/scatter.js";
 import { type ChartsTooltipProps } from "../ChartsTooltip/index.js";
 import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
+import type { TooltipPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 import { type ChartsLegendSlotProps, type ChartsLegendSlots } from "../ChartsLegend/index.js";
 import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from "../ChartsOverlay/index.js";
 import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
@@ -20,7 +21,7 @@ export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotS
    * Slot props for the tooltip component.
    * @default {}
    */
-  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>> & TooltipPropsOverrides;
 }
 export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
 export interface ScatterChartProps extends Omit<ChartsContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {

package/ScatterChart/ScatterChart.js

@@ -406,6 +406,27 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     id: _propTypes.default.string,
     max: _propTypes.default.number,
     min: _propTypes.default.number,
+    sizeMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      interpolator: _propTypes.default.oneOf(['linear', 'log', 'sqrt']),
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      size: _propTypes.default.arrayOf(_propTypes.default.number.isRequired).isRequired,
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      size: _propTypes.default.func.isRequired,
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownSize: _propTypes.default.number,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    })]),
     valueGetter: _propTypes.default.func
   }))
 } : void 0;

package/ScatterChart/ScatterChart.mjs

@@ -399,6 +399,27 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     id: PropTypes.string,
     max: PropTypes.number,
     min: PropTypes.number,
+    sizeMap: PropTypes.oneOfType([PropTypes.shape({
+      interpolator: PropTypes.oneOf(['linear', 'log', 'sqrt']),
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      size: PropTypes.arrayOf(PropTypes.number.isRequired).isRequired,
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      size: PropTypes.func.isRequired,
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownSize: PropTypes.number,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    })]),
     valueGetter: PropTypes.func
   }))
 } : void 0;

package/ScatterChart/ScatterMarker.types.d.mts

@@ -1,14 +1,15 @@
 import type * as React from 'react';
 import type { ScatterMarkerProps } from "./ScatterMarker.mjs";
+import type { MarkerPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface ScatterMarkerSlots {
   /**
    * The component that renders the marker for a scatter point.
    * @default ScatterMarker
    */
-  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+  marker?: React.JSXElementConstructor<ScatterMarkerProps & MarkerPropsOverrides>;
 }
 export interface ScatterMarkerSlotProps {
-  marker?: ScatterMarkerProps;
+  marker?: Partial<ScatterMarkerProps> & MarkerPropsOverrides;
 }
 export interface ScatterMarkerSlotExtension {
   /**

package/ScatterChart/ScatterMarker.types.d.ts

@@ -1,14 +1,15 @@
 import type * as React from 'react';
 import type { ScatterMarkerProps } from "./ScatterMarker.js";
+import type { MarkerPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface ScatterMarkerSlots {
   /**
    * The component that renders the marker for a scatter point.
    * @default ScatterMarker
    */
-  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+  marker?: React.JSXElementConstructor<ScatterMarkerProps & MarkerPropsOverrides>;
 }
 export interface ScatterMarkerSlotProps {
-  marker?: ScatterMarkerProps;
+  marker?: Partial<ScatterMarkerProps> & MarkerPropsOverrides;
 }
 export interface ScatterMarkerSlotExtension {
   /**

package/ScatterChart/ScatterPlot.d.mts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { type ScatterProps, type ScatterSlotProps, type ScatterSlots } from "./Scatter.mjs";
+import type { ScatterPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface ScatterPlotSlots extends ScatterSlots {
-  scatter?: React.JSXElementConstructor<ScatterProps>;
+  scatter?: React.JSXElementConstructor<ScatterProps & ScatterPropsOverrides>;
 }
 export interface ScatterPlotSlotProps extends ScatterSlotProps {
-  scatter?: Partial<ScatterProps>;
+  scatter?: Partial<ScatterProps> & ScatterPropsOverrides;
 }
 export type RendererType = 'svg-single' | 'svg-batch';
 export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick' | 'classes'> {

package/ScatterChart/ScatterPlot.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { type ScatterProps, type ScatterSlotProps, type ScatterSlots } from "./Scatter.js";
+import type { ScatterPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface ScatterPlotSlots extends ScatterSlots {
-  scatter?: React.JSXElementConstructor<ScatterProps>;
+  scatter?: React.JSXElementConstructor<ScatterProps & ScatterPropsOverrides>;
 }
 export interface ScatterPlotSlotProps extends ScatterSlotProps {
-  scatter?: Partial<ScatterProps>;
+  scatter?: Partial<ScatterProps> & ScatterPropsOverrides;
 }
 export type RendererType = 'svg-single' | 'svg-batch';
 export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick' | 'classes'> {