@mui/x-charts 8.5.3 → 8.7.0

package/esm/LineChart/LinePlot.js

@@ -1,23 +1,16 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { warnOnce } from '@mui/x-internals/warning';
-import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
 import { LineElement, lineElementClasses } from "./LineElement.js";
-import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { getCurveFactory } from "../internals/getCurve.js";
-import { isBandScale } from "../internals/isBandScale.js";
-import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
-import { useLineSeriesContext } from "../hooks/useLineSeries.js";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
-import { useChartGradientIdBuilder } from "../hooks/useChartGradientId.js";
 import { useXAxes, useYAxes } from "../hooks/index.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
+import { useLinePlotData } from "./useLinePlotData.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const LinePlotRoot = styled('g', {
   name: 'MuiAreaPlot',
@@ -28,100 +21,13 @@ const LinePlotRoot = styled('g', {
   }
 });
 const useAggregatedData = () => {
-  const seriesData = useLineSeriesContext();
   const {
-    xAxis,
-    xAxisIds
+    xAxis: xAxes
   } = useXAxes();
   const {
-    yAxis,
-    yAxisIds
+    yAxis: yAxes
   } = useYAxes();
-  const getGradientId = useChartGradientIdBuilder();
-
-  // This memo prevents odd line chart behavior when hydrating.
-  const allData = React.useMemo(() => {
-    if (seriesData === undefined) {
-      return [];
-    }
-    const {
-      series,
-      stackingGroups
-    } = seriesData;
-    const defaultXAxisId = xAxisIds[0];
-    const defaultYAxisId = yAxisIds[0];
-    return stackingGroups.flatMap(({
-      ids: groupIds
-    }) => {
-      return groupIds.flatMap(seriesId => {
-        const {
-          xAxisId = defaultXAxisId,
-          yAxisId = defaultYAxisId,
-          stackedData,
-          data,
-          connectNulls,
-          curve,
-          strictStepCurve
-        } = series[seriesId];
-        const xScale = xAxis[xAxisId].scale;
-        const xPosition = getValueToPositionMapper(xScale);
-        const yScale = yAxis[yAxisId].scale;
-        const xData = xAxis[xAxisId].data;
-        const gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
-        if (process.env.NODE_ENV !== 'production') {
-          if (xData === undefined) {
-            throw new Error(`MUI X Charts: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
-          }
-          if (xData.length < stackedData.length) {
-            warnOnce(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
-          }
-        }
-        const shouldExpand = curve?.includes('step') && !strictStepCurve && isBandScale(xScale);
-        const formattedData = xData?.flatMap((x, index) => {
-          const nullData = data[index] == null;
-          if (shouldExpand) {
-            const rep = [{
-              x,
-              y: stackedData[index],
-              nullData,
-              isExtension: false
-            }];
-            if (!nullData && (index === 0 || data[index - 1] == null)) {
-              rep.unshift({
-                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
-                y: stackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
-              rep.push({
-                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
-                y: stackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            return rep;
-          }
-          return {
-            x,
-            y: stackedData[index],
-            nullData
-          };
-        }) ?? [];
-        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
-        const linePath = d3Line().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => yScale(d.y[1]));
-        const d = linePath.curve(getCurveFactory(curve))(d3Data) || '';
-        return _extends({}, series[seriesId], {
-          gradientId,
-          d,
-          seriesId
-        });
-      });
-    });
-  }, [seriesData, xAxisIds, yAxisIds, xAxis, yAxis, getGradientId]);
-  return allData;
+  return useLinePlotData(xAxes, yAxes);
 };
 
 /**

package/esm/LineChart/MarkElement.js

@@ -77,7 +77,10 @@ function MarkElement(props) {
     d: d3Symbol(d3SymbolsFill[getSymbol(shape)])(),
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset'
-  }, interactionProps));
+  }, interactionProps, {
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined
+  }));
 }
 process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
   // ----------------------------- Warning --------------------------------

package/esm/LineChart/MarkPlot.js

@@ -102,6 +102,7 @@ function MarkPlot(props) {
         });
         return /*#__PURE__*/_jsx("g", {
           clipPath: `url(#${clipId})`,
+          "data-series": seriesId,
           children: xData?.map((x, index) => {
             const value = data[index] == null ? null : stackedData[index][1];
             return {

package/esm/LineChart/useAreaPlotData.d.ts

@@ -0,0 +1,12 @@
+import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
+import { SeriesId } from "../models/seriesType/common.js";
+interface AreaPlotDataPoint {
+  d: string;
+  seriesId: SeriesId;
+  color: string;
+  area?: boolean;
+  gradientId?: string;
+}
+export declare function useAreaPlotData(xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): AreaPlotDataPoint[];
+export {};

package/esm/LineChart/useAreaPlotData.js

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { area as d3Area } from '@mui/x-charts-vendor/d3-shape';
+import { useChartGradientIdBuilder } from "../hooks/useChartGradientId.js";
+import { isBandScale } from "../internals/isBandScale.js";
+import { getCurveFactory } from "../internals/getCurve.js";
+import { getValueToPositionMapper, useLineSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+export function useAreaPlotData(xAxes, yAxes) {
+  const seriesData = useLineSeriesContext();
+  const defaultXAxisId = useXAxes().xAxisIds[0];
+  const defaultYAxisId = useYAxes().yAxisIds[0];
+  const getGradientId = useChartGradientIdBuilder();
+
+  // This memo prevents odd line chart behavior when hydrating.
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const areaPlotData = [];
+    for (const stackingGroup of stackingGroups) {
+      const groupIds = stackingGroup.ids;
+      for (let i = groupIds.length - 1; i >= 0; i -= 1) {
+        const seriesId = groupIds[i];
+        const {
+          xAxisId = defaultXAxisId,
+          yAxisId = defaultYAxisId,
+          stackedData,
+          data,
+          connectNulls,
+          baseline,
+          curve,
+          strictStepCurve
+        } = series[seriesId];
+        if (!(xAxisId in xAxes) || !(yAxisId in yAxes)) {
+          continue;
+        }
+        const xScale = xAxes[xAxisId].scale;
+        const xPosition = getValueToPositionMapper(xScale);
+        const yScale = yAxes[yAxisId].scale;
+        const xData = xAxes[xAxisId].data;
+        const gradientId = yAxes[yAxisId].colorScale && getGradientId(yAxisId) || xAxes[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X Charts: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          }
+        }
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && isBandScale(xScale);
+        const formattedData = xData?.flatMap((x, index) => {
+          const nullData = data[index] == null;
+          if (shouldExpand) {
+            const rep = [{
+              x,
+              y: stackedData[index],
+              nullData,
+              isExtension: false
+            }];
+            if (!nullData && (index === 0 || data[index - 1] == null)) {
+              rep.unshift({
+                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
+              rep.push({
+                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            return rep;
+          }
+          return {
+            x,
+            y: stackedData[index],
+            nullData
+          };
+        }) ?? [];
+        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
+        const areaPath = d3Area().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y0(d => {
+          if (typeof baseline === 'number') {
+            return yScale(baseline);
+          }
+          if (baseline === 'max') {
+            return yScale.range()[1];
+          }
+          if (baseline === 'min') {
+            return yScale.range()[0];
+          }
+          const value = d.y && yScale(d.y[0]);
+          if (Number.isNaN(value)) {
+            return yScale.range()[0];
+          }
+          return value;
+        }).y1(d => d.y && yScale(d.y[1]));
+        const d = areaPath.curve(getCurveFactory(curve))(d3Data) || '';
+        areaPlotData.push({
+          area: series[seriesId].area,
+          color: series[seriesId].color,
+          gradientId,
+          d,
+          seriesId
+        });
+      }
+    }
+    return areaPlotData;
+  }, [seriesData, defaultXAxisId, defaultYAxisId, xAxes, yAxes, getGradientId]);
+  return allData;
+}

package/esm/LineChart/useLinePlotData.d.ts

@@ -0,0 +1,11 @@
+import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
+import { SeriesId } from "../models/seriesType/common.js";
+interface LinePlotDataPoint {
+  d: string;
+  seriesId: SeriesId;
+  color: string;
+  gradientId?: string;
+}
+export declare function useLinePlotData(xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): LinePlotDataPoint[];
+export {};

package/esm/LineChart/useLinePlotData.js

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
+import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
+import { useChartGradientIdBuilder } from "../hooks/useChartGradientId.js";
+import { isBandScale } from "../internals/isBandScale.js";
+import { getCurveFactory } from "../internals/getCurve.js";
+import { getValueToPositionMapper, useLineSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+export function useLinePlotData(xAxes, yAxes) {
+  const seriesData = useLineSeriesContext();
+  const defaultXAxisId = useXAxes().xAxisIds[0];
+  const defaultYAxisId = useYAxes().yAxisIds[0];
+  const getGradientId = useChartGradientIdBuilder();
+
+  // This memo prevents odd line chart behavior when hydrating.
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const linePlotData = [];
+    for (const stackingGroup of stackingGroups) {
+      const groupIds = stackingGroup.ids;
+      for (const seriesId of groupIds) {
+        const {
+          xAxisId = defaultXAxisId,
+          yAxisId = defaultYAxisId,
+          stackedData,
+          data,
+          connectNulls,
+          curve,
+          strictStepCurve
+        } = series[seriesId];
+        if (!(xAxisId in xAxes) || !(yAxisId in yAxes)) {
+          continue;
+        }
+        const xScale = xAxes[xAxisId].scale;
+        const xPosition = getValueToPositionMapper(xScale);
+        const yScale = yAxes[yAxisId].scale;
+        const xData = xAxes[xAxisId].data;
+        const gradientId = yAxes[yAxisId].colorScale && getGradientId(yAxisId) || xAxes[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X Charts: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            warnOnce(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
+          }
+        }
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && isBandScale(xScale);
+        const formattedData = xData?.flatMap((x, index) => {
+          const nullData = data[index] == null;
+          if (shouldExpand) {
+            const rep = [{
+              x,
+              y: stackedData[index],
+              nullData,
+              isExtension: false
+            }];
+            if (!nullData && (index === 0 || data[index - 1] == null)) {
+              rep.unshift({
+                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
+              rep.push({
+                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            return rep;
+          }
+          return {
+            x,
+            y: stackedData[index],
+            nullData
+          };
+        }) ?? [];
+        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
+        const linePath = d3Line().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => yScale(d.y[1]));
+        const d = linePath.curve(getCurveFactory(curve))(d3Data) || '';
+        linePlotData.push({
+          color: series[seriesId].color,
+          gradientId,
+          d,
+          seriesId
+        });
+      }
+    }
+    return linePlotData;
+  }, [seriesData, defaultXAxisId, defaultYAxisId, xAxes, yAxes, getGradientId]);
+  return allData;
+}

package/esm/PieChart/PieArc.js

@@ -94,7 +94,9 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
     opacity: ownerState.isFaded ? 0.3 : 1,
     filter: ownerState.isHighlighted ? 'brightness(120%)' : 'none',
     strokeWidth: 1,
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    "data-highlighted": ownerState.isHighlighted || undefined,
+    "data-faded": ownerState.isFaded || undefined
   }, other, interactionProps, animatedProps));
 });
 if (process.env.NODE_ENV !== "production") PieArc.displayName = "PieArc";

package/esm/PieChart/PiePlot.js

@@ -9,6 +9,7 @@ import { getPieCoordinates } from "./getPieCoordinates.js";
 import { usePieSeriesContext } from "../hooks/usePieSeries.js";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useDrawingArea } from "../hooks/index.js";
+import { useUtilityClasses } from "./pieClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -35,6 +36,7 @@ function PiePlot(props) {
     height
   } = useDrawingArea();
   const skipAnimation = useSkipAnimation(inSkipAnimation);
+  const classes = useUtilityClasses();
   if (seriesData === undefined) {
     return null;
   }
@@ -69,7 +71,9 @@ function PiePlot(props) {
       const outerRadius = getPercentageValue(outerRadiusParam ?? availableRadius, availableRadius);
       const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius);
       return /*#__PURE__*/_jsx("g", {
+        className: classes.series,
         transform: `translate(${left + cx}, ${top + cy})`,
+        "data-series": seriesId,
         children: /*#__PURE__*/_jsx(PieArcPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius,
@@ -113,7 +117,9 @@ function PiePlot(props) {
       const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius);
       const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : getPercentageValue(arcLabelRadiusParam, availableRadius);
       return /*#__PURE__*/_jsx("g", {
+        className: classes.seriesLabels,
         transform: `translate(${left + cx}, ${top + cy})`,
+        "data-series": seriesId,
         children: /*#__PURE__*/_jsx(PieArcLabelPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius ?? availableRadius,

package/esm/PieChart/index.d.ts

@@ -4,4 +4,6 @@ export * from "./PieArcPlot.js";
 export * from "./PieArcLabelPlot.js";
 export * from "./PieArc.js";
 export * from "./PieArcLabel.js";
-export * from "./getPieCoordinates.js";
+export * from "./getPieCoordinates.js";
+export { pieClasses } from "./pieClasses.js";
+export type { PieClasses, PieClassKey } from "./pieClasses.js";

package/esm/PieChart/index.js

@@ -4,4 +4,5 @@ export * from "./PieArcPlot.js";
 export * from "./PieArcLabelPlot.js";
 export * from "./PieArc.js";
 export * from "./PieArcLabel.js";
-export * from "./getPieCoordinates.js";
+export * from "./getPieCoordinates.js";
+export { pieClasses } from "./pieClasses.js";

package/esm/PieChart/pieClasses.d.ts

@@ -0,0 +1,12 @@
+export interface PieClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the `g` element that contains all pie arcs of a series. */
+  series: string;
+  /** Styles applied to the `g` element that contains all pie arc labels of a series. */
+  seriesLabels: string;
+}
+export type PieClassKey = keyof PieClasses;
+export declare function getPieUtilityClass(slot: string): string;
+export declare const pieClasses: PieClasses;
+export declare const useUtilityClasses: (classes?: Partial<PieClasses>) => Record<"root" | "series" | "seriesLabels", string>;

package/esm/PieChart/pieClasses.js

@@ -0,0 +1,15 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getPieUtilityClass(slot) {
+  return generateUtilityClass('MuiPieChart', slot);
+}
+export const pieClasses = generateUtilityClasses('MuiPieChart', ['root', 'series', 'seriesLabels']);
+export const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    series: ['series'],
+    seriesLabels: ['seriesLabels']
+  };
+  return composeClasses(slots, getPieUtilityClass, classes);
+};

package/esm/ScatterChart/Scatter.js

@@ -6,15 +6,15 @@ const _excluded = ["ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { useInteractionAllItemProps } from "../hooks/useInteractionItemProps.js";
+import { getInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useStore } from "../internals/store/useStore.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useItemHighlightedGetter } from "../hooks/useItemHighlightedGetter.js";
 import { selectorChartsVoronoiIsVoronoiEnabled } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
-import { useChartContext } from "../context/ChartProvider/index.js";
 import { ScatterMarker } from "./ScatterMarker.js";
 import { useUtilityClasses } from "./scatterClasses.js";
+import { useScatterPlotData } from "./useScatterPlotData.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -48,37 +48,7 @@ function Scatter(props) {
     isFaded,
     isHighlighted
   } = useItemHighlightedGetter();
-  const cleanData = React.useMemo(() => {
-    const getXPosition = getValueToPositionMapper(xScale);
-    const getYPosition = getValueToPositionMapper(yScale);
-    const temp = [];
-    for (let i = 0; i < series.data.length; i += 1) {
-      const scatterPoint = series.data[i];
-      const x = getXPosition(scatterPoint.x);
-      const y = getYPosition(scatterPoint.y);
-      const isInRange = instance.isPointInside(x, y);
-      if (isInRange) {
-        const currentItem = {
-          seriesId: series.id,
-          dataIndex: i
-        };
-        const isItemHighlighted = isHighlighted(currentItem);
-        temp.push({
-          x,
-          y,
-          isHighlighted: isItemHighlighted,
-          isFaded: !isItemHighlighted && isFaded(currentItem),
-          id: scatterPoint.id,
-          seriesId: series.id,
-          type: 'scatter',
-          dataIndex: i,
-          color: colorGetter ? colorGetter(i) : color
-        });
-      }
-    }
-    return temp;
-  }, [xScale, yScale, series.data, series.id, isHighlighted, isFaded, colorGetter, color, instance]);
-  const interactionItemProps = useInteractionAllItemProps(cleanData, skipInteractionHandlers);
+  const scatterPlotData = useScatterPlotData(series, xScale, yScale, instance.isPointInside);
   const Marker = slots?.marker ?? ScatterMarker;
   const _useSlotProps = useSlotProps({
       elementType: Marker,
@@ -94,21 +64,25 @@ function Scatter(props) {
   return /*#__PURE__*/_jsx("g", {
     "data-series": series.id,
     className: classes.root,
-    children: cleanData.map((dataPoint, i) => /*#__PURE__*/_jsx(Marker, _extends({
-      dataIndex: dataPoint.dataIndex,
-      color: dataPoint.color,
-      isHighlighted: dataPoint.isHighlighted,
-      isFaded: dataPoint.isFaded,
-      x: dataPoint.x,
-      y: dataPoint.y,
-      onClick: onItemClick && (event => onItemClick(event, {
-        type: 'scatter',
-        seriesId: series.id,
-        dataIndex: dataPoint.dataIndex
-      })),
-      "data-highlighted": dataPoint.isHighlighted || undefined,
-      "data-faded": dataPoint.isFaded || undefined
-    }, interactionItemProps[i], markerProps), dataPoint.id ?? dataPoint.dataIndex))
+    children: scatterPlotData.map((dataPoint, i) => {
+      const isItemHighlighted = isHighlighted(dataPoint);
+      const isItemFaded = !isItemHighlighted && isFaded(dataPoint);
+      return /*#__PURE__*/_jsx(Marker, _extends({
+        dataIndex: dataPoint.dataIndex,
+        color: colorGetter ? colorGetter(i) : color,
+        isHighlighted: isItemHighlighted,
+        isFaded: isItemFaded,
+        x: dataPoint.x,
+        y: dataPoint.y,
+        onClick: onItemClick && (event => onItemClick(event, {
+          type: 'scatter',
+          seriesId: series.id,
+          dataIndex: dataPoint.dataIndex
+        })),
+        "data-highlighted": isItemHighlighted || undefined,
+        "data-faded": isItemFaded || undefined
+      }, skipInteractionHandlers ? undefined : getInteractionItemProps(instance, dataPoint), markerProps), dataPoint.id ?? dataPoint.dataIndex);
+    })
   });
 }
 process.env.NODE_ENV !== "production" ? Scatter.propTypes = {

package/esm/ScatterChart/useScatterPlotData.d.ts

@@ -0,0 +1,8 @@
+import { SeriesId } from "../models/seriesType/common.js";
+import { D3Scale } from "../models/axis.js";
+import { DefaultizedScatterSeriesType, ScatterValueType } from "../models/index.js";
+export declare function useScatterPlotData(series: DefaultizedScatterSeriesType, xScale: D3Scale, yScale: D3Scale, isPointInside: (x: number, y: number) => boolean): (ScatterValueType & {
+  dataIndex: number;
+  seriesId: SeriesId;
+  type: "scatter";
+})[];

package/esm/ScatterChart/useScatterPlotData.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { getValueToPositionMapper } from "../hooks/index.js";
+export function useScatterPlotData(series, xScale, yScale, isPointInside) {
+  return React.useMemo(() => {
+    const getXPosition = getValueToPositionMapper(xScale);
+    const getYPosition = getValueToPositionMapper(yScale);
+    const temp = [];
+    for (let i = 0; i < series.data.length; i += 1) {
+      const scatterPoint = series.data[i];
+      const x = getXPosition(scatterPoint.x);
+      const y = getYPosition(scatterPoint.y);
+      const isInRange = isPointInside(x, y);
+      if (isInRange) {
+        temp.push({
+          x,
+          y,
+          id: scatterPoint.id,
+          seriesId: series.id,
+          type: 'scatter',
+          dataIndex: i
+        });
+      }
+    }
+    return temp;
+  }, [xScale, yScale, series.data, series.id, isPointInside]);
+}

package/esm/Toolbar/ToolbarButton.js

@@ -44,10 +44,12 @@ process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
   // ----------------------------------------------------------------------
   className: PropTypes.string,
   disabled: PropTypes.bool,
+  id: PropTypes.string,
   /**
    * A function to customize the rendering of the component.
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
   style: PropTypes.object,
   tabIndex: PropTypes.number
 } : void 0;

package/esm/context/ChartApi.d.ts

@@ -0,0 +1,22 @@
+import type { PieChartPluginSignatures } from "../PieChart/PieChart.plugins.js";
+import type { BarChartPluginsSignatures } from "../BarChart/BarChart.plugins.js";
+import type { ScatterChartPluginsSignatures } from "../ScatterChart/ScatterChart.plugins.js";
+import type { LineChartPluginsSignatures } from "../LineChart/LineChart.plugins.js";
+import type { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
+import type { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
+import type { ChartPublicAPI } from "../internals/plugins/models/index.js";
+export type PluginsPerSeriesType = {
+  line: LineChartPluginsSignatures;
+  scatter: ScatterChartPluginsSignatures;
+  bar: BarChartPluginsSignatures;
+  pie: PieChartPluginSignatures;
+  composition: DefaultPluginSignatures;
+};
+/**
+ * The API of the chart `apiRef` object.
+ * The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+ * @example ChartApi<'bar'>
+ * If the chart is being created using composition, the `composition` value can be used.
+ * @example ChartApi<'composition'>
+ */
+export type ChartApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;