@mui/x-charts 8.9.0 → 8.10.0

package/esm/ChartsXAxis/useAxisProps.js

@@ -0,0 +1,98 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["scale", "tickNumber", "reverse"];
+import useSlotProps from '@mui/utils/useSlotProps';
+import { useThemeProps, useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
+import { ChartsText } from "../ChartsText/index.js";
+import { useXAxes } from "../hooks/useAxis.js";
+import { getDefaultBaseline, getDefaultTextAnchor } from "../ChartsText/defaultTextPlacement.js";
+import { invertTextAnchor } from "../internals/invertTextAnchor.js";
+import { defaultProps, useUtilityClasses } from "./utilities.js";
+import { isBandScale } from "../internals/isBandScale.js";
+import { isInfinity } from "../internals/isInfinity.js";
+export const useAxisProps = inProps => {
+  const {
+    xAxis,
+    xAxisIds
+  } = useXAxes();
+  const _xAxis = xAxis[inProps.axisId ?? xAxisIds[0]],
+    {
+      scale: xScale,
+      tickNumber,
+      reverse
+    } = _xAxis,
+    settings = _objectWithoutPropertiesLoose(_xAxis, _excluded);
+
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  const themedProps = useThemeProps({
+    props: _extends({}, settings, inProps),
+    name: 'MuiChartsXAxis'
+  });
+  const defaultizedProps = _extends({}, defaultProps, themedProps);
+  const {
+    position,
+    tickLabelStyle,
+    labelStyle,
+    slots,
+    slotProps
+  } = defaultizedProps;
+  const theme = useTheme();
+  const isRtl = useRtl();
+  const classes = useUtilityClasses(defaultizedProps);
+  const positionSign = position === 'bottom' ? 1 : -1;
+  const Line = slots?.axisLine ?? 'line';
+  const Tick = slots?.axisTick ?? 'line';
+  const TickLabel = slots?.axisTickLabel ?? ChartsText;
+  const Label = slots?.axisLabel ?? ChartsText;
+  const defaultTextAnchor = getDefaultTextAnchor((position === 'bottom' ? 0 : 180) - (tickLabelStyle?.angle ?? 0));
+  const defaultDominantBaseline = getDefaultBaseline((position === 'bottom' ? 0 : 180) - (tickLabelStyle?.angle ?? 0));
+  const axisTickLabelProps = useSlotProps({
+    elementType: TickLabel,
+    externalSlotProps: slotProps?.axisTickLabel,
+    additionalProps: {
+      style: _extends({}, theme.typography.caption, {
+        fontSize: 12,
+        lineHeight: 1.25,
+        textAnchor: isRtl ? invertTextAnchor(defaultTextAnchor) : defaultTextAnchor,
+        dominantBaseline: defaultDominantBaseline
+      }, tickLabelStyle)
+    },
+    className: classes.tickLabel,
+    ownerState: {}
+  });
+  const axisLabelProps = useSlotProps({
+    elementType: Label,
+    externalSlotProps: slotProps?.axisLabel,
+    additionalProps: {
+      style: _extends({}, theme.typography.body1, {
+        lineHeight: 1,
+        fontSize: 14,
+        textAnchor: 'middle',
+        dominantBaseline: position === 'bottom' ? 'text-after-edge' : 'text-before-edge'
+      }, labelStyle)
+    },
+    ownerState: {}
+  });
+  const domain = xScale.domain();
+  const isScaleBand = isBandScale(xScale);
+  const skipAxisRendering = isScaleBand && domain.length === 0 || !isScaleBand && domain.some(isInfinity) || position === 'none';
+  return {
+    xScale,
+    defaultizedProps,
+    tickNumber,
+    positionSign,
+    skipAxisRendering,
+    classes,
+    Line,
+    Tick,
+    TickLabel,
+    Label,
+    axisTickLabelProps,
+    axisLabelProps,
+    reverse,
+    isRtl
+  };
+};

package/esm/ChartsXAxis/utilities.d.ts

@@ -0,0 +1,11 @@
+import { AxisConfig, ChartsXAxisProps } from "../models/axis.js";
+export declare const useUtilityClasses: (ownerState: AxisConfig<any, any, ChartsXAxisProps>) => Record<"root" | "line" | "label" | "tickContainer" | "tick" | "tickLabel", string>;
+export declare const TICK_LABEL_GAP = 3;
+export declare const AXIS_LABEL_TICK_LABEL_GAP = 4;
+export declare const XAxisRoot: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, keyof import("react").SVGProps<SVGGElement> | keyof import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const defaultProps: {
+  readonly disableLine: false;
+  readonly disableTicks: false;
+  readonly tickSize: 6;
+  readonly tickLabelMinGap: 4;
+};

package/esm/ChartsXAxis/utilities.js

@@ -0,0 +1,35 @@
+import composeClasses from '@mui/utils/composeClasses';
+import { styled } from '@mui/material/styles';
+import { getAxisUtilityClass } from "../ChartsAxis/axisClasses.js";
+import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
+export const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    position,
+    id
+  } = ownerState;
+  const slots = {
+    root: ['root', 'directionX', position, `id-${id}`],
+    line: ['line'],
+    tickContainer: ['tickContainer'],
+    tick: ['tick'],
+    tickLabel: ['tickLabel'],
+    label: ['label']
+  };
+  return composeClasses(slots, getAxisUtilityClass, classes);
+};
+
+/* Gap between a tick and its label. */
+export const TICK_LABEL_GAP = 3;
+/* Gap between the axis label and tick labels. */
+export const AXIS_LABEL_TICK_LABEL_GAP = 4;
+export const XAxisRoot = styled(AxisRoot, {
+  name: 'MuiChartsXAxis',
+  slot: 'Root'
+})({});
+export const defaultProps = {
+  disableLine: false,
+  disableTicks: false,
+  tickSize: 6,
+  tickLabelMinGap: 4
+};

package/esm/LineChart/LineChart.js

@@ -19,7 +19,7 @@ import { useLineChartProps } from "./useLineChartProps.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
-import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
+import { ChartsWrapper } from "../ChartsWrapper/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -270,6 +270,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -321,6 +325,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -394,6 +402,53 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
+  }), PropTypes.shape({
+    axis: PropTypes.oneOf(['x']),
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    constant: PropTypes.number,
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
+    fill: PropTypes.string,
+    height: PropTypes.number,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
+    label: PropTypes.string,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'none', 'top']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['symlog']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelMinGap: PropTypes.number,
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
@@ -656,6 +711,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -706,6 +765,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -777,6 +840,52 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
+  }), PropTypes.shape({
+    axis: PropTypes.oneOf(['y']),
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    constant: PropTypes.number,
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
+    fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
+    label: PropTypes.string,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'none', 'right']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['symlog']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func,
+    width: PropTypes.number
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,

package/esm/LineChart/seriesConfig/extremums.js

@@ -1,10 +1,9 @@
+import { findMinMax } from "../../internals/findMinMax.js";
 export const getExtremumX = params => {
   const {
     axis
   } = params;
-  const minX = Math.min(...(axis.data ?? []));
-  const maxX = Math.max(...(axis.data ?? []));
-  return [minX, maxX];
+  return findMinMax(axis.data ?? []);
 };
 function getSeriesExtremums(getValues, data, stackedData, filter) {
   return stackedData.reduce((seriesAcc, stackedValue, index) => {

package/esm/LineChart/useLineChartProps.d.ts

@@ -11,7 +11,7 @@ import type { LineChartProps } from "./LineChart.js";
 import { LineHighlightPlotProps } from "./LineHighlightPlot.js";
 import { LinePlotProps } from "./LinePlot.js";
 import { MarkPlotProps } from "./MarkPlot.js";
-import type { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
+import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
 import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
 /**
  * A helper function that extracts LineChartProps from the input props

package/esm/PieChart/PieChart.js

@@ -14,7 +14,7 @@ import { ChartsOverlay } from "../ChartsOverlay/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
-import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
+import { ChartsWrapper } from "../ChartsWrapper/index.js";
 import { PIE_CHART_PLUGINS } from "./PieChart.plugins.js";
 import { defaultizeMargin } from "../internals/defaultizeMargin.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/RadarChart/RadarChart.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ChartsLegendSlotProps, ChartsLegendSlots } from "../ChartsLegend/index.js";
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/ChartsOverlay.js";
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
+import { ChartsWrapperProps } from "../ChartsWrapper/index.js";
 import { RadarGridProps } from "./RadarGrid/index.js";
 import { RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js";
 import { RadarSeriesPlotProps } from "./RadarSeriesPlot/index.js";

package/esm/RadarChart/RadarChart.js

@@ -8,7 +8,7 @@ import { ChartsLegend } from "../ChartsLegend/index.js";
 import { ChartsOverlay } from "../ChartsOverlay/ChartsOverlay.js";
 import { useRadarChartProps } from "./useRadarChartProps.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
-import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
+import { ChartsWrapper } from "../ChartsWrapper/index.js";
 import { RadarGrid } from "./RadarGrid/index.js";
 import { RadarDataProvider } from "./RadarDataProvider/RadarDataProvider.js";
 import { RadarSeriesArea, RadarSeriesMarks } from "./RadarSeriesPlot/index.js";

package/esm/RadarChart/index.d.ts

@@ -1,7 +1,14 @@
-export { RadarChart as Unstable_RadarChart } from "./RadarChart.js";
+import { RadarDataProvider } from "./RadarDataProvider/index.js";
 export { RadarChart } from "./RadarChart.js";
-export { RadarDataProvider as Unstable_RadarDataProvider } from "./RadarDataProvider/index.js";
+/**
+ * @deprecated radar chart is now stable, import `RadarChart` instead
+ */
+export declare const Unstable_RadarChart: import("react").ForwardRefExoticComponent<import("./RadarChart.js").RadarChartProps & import("react").RefAttributes<SVGSVGElement>>;
 export { RadarDataProvider } from "./RadarDataProvider/index.js";
+/**
+ * @deprecated radar data provider is now stable, import `RadarDataProvider` instead
+ */
+export declare const Unstable_RadarDataProvider: typeof RadarDataProvider;
 export type { RadarChartProps, RadarChartSlots, RadarChartSlotProps } from "./RadarChart.js";
 export type { RadarDataProviderProps, RadarSeries } from "./RadarDataProvider/index.js";
 export * from "./RadarGrid/index.js";

package/esm/RadarChart/index.js

@@ -1,7 +1,17 @@
-export { RadarChart as Unstable_RadarChart } from "./RadarChart.js";
+import { RadarChart } from "./RadarChart.js";
+import { RadarDataProvider } from "./RadarDataProvider/index.js";
 export { RadarChart } from "./RadarChart.js";
-export { RadarDataProvider as Unstable_RadarDataProvider } from "./RadarDataProvider/index.js";
+/**
+ * @deprecated radar chart is now stable, import `RadarChart` instead
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Unstable_RadarChart = RadarChart;
 export { RadarDataProvider } from "./RadarDataProvider/index.js";
+/**
+ * @deprecated radar data provider is now stable, import `RadarDataProvider` instead
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Unstable_RadarDataProvider = RadarDataProvider;
 export * from "./RadarGrid/index.js";
 export * from "./RadarAxisHighlight/index.js";
 export * from "./RadarMetricLabels/index.js";

package/esm/RadarChart/useRadarChartProps.d.ts

@@ -1,7 +1,7 @@
 import type { RadarChartProps } from "./RadarChart.js";
 import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
 import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
-import type { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
+import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
 import { RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js";
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { RadarGridProps } from "./RadarGrid/index.js";

package/esm/ScatterChart/ScatterChart.d.ts

@@ -6,6 +6,7 @@ import { ScatterPlotProps, ScatterPlotSlotProps, ScatterPlotSlots } from "./Scat
 import { ChartContainerProps } from "../ChartContainer/index.js";
 import { ChartsAxisProps } from "../ChartsAxis/index.js";
 import { ScatterSeriesType } from "../models/seriesType/scatter.js";
+import { ChartsTooltipProps } from "../ChartsTooltip/index.js";
 import { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
 import { ChartsLegendSlotProps, ChartsLegendSlots } from "../ChartsLegend/index.js";
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/index.js";
@@ -15,7 +16,13 @@ import { ChartsGridProps } from "../ChartsGrid/index.js";
 import { UseChartVoronoiSignature } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
 import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
 export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
-export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, Omit<ChartsTooltipSlotProps, 'tooltip'>, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {
+  /**
+   * Slot props for the tooltip component.
+   * @default {}
+   */
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+}
 export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
 export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginsSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**

package/esm/ScatterChart/ScatterChart.js

@@ -15,7 +15,7 @@ import { useScatterChartProps } from "./useScatterChartProps.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
-import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
+import { ChartsWrapper } from "../ChartsWrapper/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -239,6 +239,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -290,6 +294,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -363,6 +371,53 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
+  }), PropTypes.shape({
+    axis: PropTypes.oneOf(['x']),
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    constant: PropTypes.number,
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
+    fill: PropTypes.string,
+    height: PropTypes.number,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
+    label: PropTypes.string,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'none', 'top']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['symlog']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelMinGap: PropTypes.number,
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
@@ -625,6 +680,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -675,6 +734,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -746,6 +809,52 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
+  }), PropTypes.shape({
+    axis: PropTypes.oneOf(['y']),
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    constant: PropTypes.number,
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
+    fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
+    label: PropTypes.string,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'none', 'right']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['symlog']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func,
+    width: PropTypes.number
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,