@mui/x-charts-pro 8.26.0 → 9.0.0-alpha.0

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -4,7 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["axisId", "axisDirection", "reverse", "onSelectStart", "onSelectEnd"];
 import * as React from 'react';
-import { useChartContext, getSVGPoint, selectorChartAxisZoomOptionsLookup, useStore } from '@mui/x-charts/internals';
+import { useChartContext, getChartPoint, selectorChartAxisZoomOptionsLookup, useStore } from '@mui/x-charts/internals';
 import { styled } from '@mui/material/styles';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { shouldForwardProp } from '@mui/system';
@@ -51,9 +51,11 @@ export function ChartAxisZoomSliderTrack(_ref) {
     other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const ref = React.useRef(null);
   const {
-    instance,
-    svgRef
+    instance
   } = useChartContext();
+  const {
+    svgRef
+  } = instance;
   const store = useStore();
   const [isSelecting, setIsSelecting] = React.useState(false);
   const classes = useUtilityClasses({
@@ -65,13 +67,13 @@ export function ChartAxisZoomSliderTrack(_ref) {
     if (!rect || !element) {
       return;
     }
-    const pointerDownPoint = getSVGPoint(element, event);
+    const pointerDownPoint = getChartPoint(element, event);
     const zoomFromPointerDown = calculateZoomFromPoint(store.state, axisId, pointerDownPoint);
     if (zoomFromPointerDown === null) {
       return;
     }
     const onPointerMove = rafThrottle(function onPointerMove(pointerMoveEvent) {
-      const pointerMovePoint = getSVGPoint(element, pointerMoveEvent);
+      const pointerMovePoint = getChartPoint(element, pointerMoveEvent);
       const zoomFromPointerMove = calculateZoomFromPoint(store.state, axisId, pointerMovePoint);
       if (zoomFromPointerMove === null) {
         return;

package/esm/ChartZoomSlider/internals/previews/AreaPreviewPlot.d.ts

@@ -6,7 +6,7 @@ export declare function AreaPreviewPlot({
   axisId
 }: AreaPreviewPlotProps): import("react/jsx-runtime").JSX.Element;
 export interface PreviewAreaElementProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
-  id: SeriesId;
+  seriesId: SeriesId;
   gradientId?: string;
   color: string;
   d: string;

package/esm/ChartZoomSlider/internals/previews/AreaPreviewPlot.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "color", "gradientId", "onClick"];
+const _excluded = ["seriesId", "color", "gradientId", "onClick"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { useStore, useAreaPlotData, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis } from '@mui/x-charts/internals';
@@ -21,7 +21,7 @@ export function AreaPreviewPlot({
       area,
       gradientId
     }) => !!area && /*#__PURE__*/_jsx(PreviewAreaElement, {
-      id: seriesId,
+      seriesId: seriesId,
       d: d,
       color: color,
       gradientId: gradientId
@@ -34,7 +34,7 @@ export function AreaPreviewPlot({
  */
 function PreviewAreaElement(_ref) {
   let {
-      id,
+      seriesId,
       color,
       gradientId
     } = _ref,
@@ -42,7 +42,7 @@ function PreviewAreaElement(_ref) {
   return /*#__PURE__*/_jsx("path", _extends({
     fill: gradientId ? `url(#${gradientId})` : color,
     stroke: "none",
-    "data-series": id
+    "data-series": seriesId
   }, other));
 }
 function useAreaPreviewData(axisId) {

package/esm/ChartZoomSlider/internals/previews/BarPreviewPlot.js

@@ -32,7 +32,7 @@ export function BarPreviewPlot(props) {
         height
       }) => {
         return /*#__PURE__*/_jsx(BarElement, {
-          id: seriesId,
+          seriesId: seriesId,
           dataIndex: dataIndex,
           color: color,
           skipAnimation: true,

package/esm/ChartZoomSlider/internals/previews/LinePreviewPlot.d.ts

@@ -6,7 +6,7 @@ export declare function LinePreviewPlot({
   axisId
 }: LinePreviewPlotProps): import("react/jsx-runtime").JSX.Element;
 export interface PreviewLineElementProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
-  id: SeriesId;
+  seriesId: SeriesId;
   gradientId?: string;
   color: string;
   d: string;

package/esm/ChartZoomSlider/internals/previews/LinePreviewPlot.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "color", "gradientId", "onClick"];
+const _excluded = ["seriesId", "color", "gradientId", "onClick"];
 import * as React from 'react';
 import { useStore, useLinePlotData, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis } from '@mui/x-charts/internals';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,7 +16,7 @@ export function LinePreviewPlot({
       gradientId
     }) => {
       return /*#__PURE__*/_jsx(PreviewLineElement, {
-        id: seriesId,
+        seriesId: seriesId,
         d: d,
         color: color,
         gradientId: gradientId
@@ -30,7 +30,7 @@ export function LinePreviewPlot({
  */
 function PreviewLineElement(_ref) {
   let {
-      id,
+      seriesId,
       color,
       gradientId
     } = _ref,
@@ -40,7 +40,7 @@ function PreviewLineElement(_ref) {
     strokeWidth: 2,
     strokeLinejoin: "round",
     fill: "none",
-    "data-series": id
+    "data-series": seriesId
   }, other));
 }
 function useLinePreviewData(axisId) {

package/esm/ChartsContainer/index.d.ts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/ChartsContainer';

package/esm/ChartsContainer/index.js

@@ -0,0 +1,2 @@
+// Re-export automatically generated, to customize, simply remove this line.
+export * from '@mui/x-charts/ChartsContainer';

package/esm/ChartsContainerPro/ChartsContainerPro.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { type ChartsSurfaceProps } from '@mui/x-charts/ChartsSurface';
+import { type ChartAnyPluginSignature, type ChartSeriesType } from '@mui/x-charts/internals';
+import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { type ChartDataProviderProProps } from "../ChartDataProviderPro/index.js";
+export interface ChartsContainerProSlots {}
+export interface ChartsContainerProSlotProps {}
+export type ChartsContainerProProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartDataProviderProProps<TSeries, TSignatures> & ChartsSurfaceProps;
+type ChartsContainerProComponent = <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartsContainerProProps<TSeries, TSignatures> & {
+  ref?: React.ForwardedRef<SVGSVGElement>;
+}) => React.JSX.Element;
+/**
+ * It sets up the data providers as well as the `<svg>` for the chart.
+ *
+ * This is a combination of both the `ChartDataProviderPro` and `ChartsSurface` components.
+ *
+ * Demos:
+ *
+ * - [Composition](https://mui.com/x/api/charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsContainerPro API](https://mui.com/x/api/charts/charts-container-pro/)
+ *
+ * @example
+ * ```jsx
+ * <ChartsContainerPro
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *    <BarPlot />
+ *    <ChartsXAxis axisId="x-axis" />
+ * </ChartsContainerPro>
+ * ```
+ */
+declare const ChartsContainerPro: ChartsContainerProComponent;
+export { ChartsContainerPro };

package/esm/ChartsContainerPro/ChartsContainerPro.js

@@ -0,0 +1,181 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { useChartsContainerProProps } from "./useChartsContainerProProps.js";
+import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * It sets up the data providers as well as the `<svg>` for the chart.
+ *
+ * This is a combination of both the `ChartDataProviderPro` and `ChartsSurface` components.
+ *
+ * Demos:
+ *
+ * - [Composition](https://mui.com/x/api/charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsContainerPro API](https://mui.com/x/api/charts/charts-container-pro/)
+ *
+ * @example
+ * ```jsx
+ * <ChartsContainerPro
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *    <BarPlot />
+ *    <ChartsXAxis axisId="x-axis" />
+ * </ChartsContainerPro>
+ * ```
+ */
+const ChartsContainerPro = /*#__PURE__*/React.forwardRef(function ChartsContainerProInner(props, ref) {
+  const {
+    chartDataProviderProProps,
+    children,
+    chartsSurfaceProps
+  } = useChartsContainerProProps(props, ref);
+  return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
+    children: /*#__PURE__*/_jsx(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: children
+    }))
+  }));
+});
+
+// @ts-expect-error the type coercion breaks the prop types
+if (process.env.NODE_ENV !== "production") ChartsContainerPro.displayName = "ChartsContainerPro";
+process.env.NODE_ENV !== "production" ? ChartsContainerPro.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.shape({
+      setZoomData: PropTypes.func.isRequired
+    })
+  }),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /**
+   * Color palette used to colorize multiple series.
+   * @default blueberryTwilightPalette
+   */
+  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset: PropTypes.arrayOf(PropTypes.object),
+  desc: PropTypes.string,
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener: PropTypes.bool,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: PropTypes.number,
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+  }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
+  /**
+   * The list of zoom data related to each axis.
+   */
+  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.number.isRequired
+  })),
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin: PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
+  /**
+   * Callback fired when the zoom has changed.
+   *
+   * @param {ZoomData[]} zoomData Updated zoom data.
+   */
+  onZoomChange: PropTypes.func,
+  /**
+   * The array of series to display.
+   * Each type of series has its own specificity.
+   * Please refer to the appropriate docs page to learn more about it.
+   */
+  series: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: PropTypes.bool,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  theme: PropTypes.oneOf(['dark', 'light']),
+  title: PropTypes.string,
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   */
+  width: PropTypes.number,
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * The configuration of the z-axes.
+   */
+  zAxis: PropTypes.arrayOf(PropTypes.shape({
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), 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
+    })]),
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    id: PropTypes.string,
+    max: PropTypes.number,
+    min: PropTypes.number
+  }))
+} : void 0;
+export { ChartsContainerPro };

package/esm/ChartsContainerPro/index.d.ts

@@ -0,0 +1,9 @@
+import "../typeOverloads/index.js";
+import type { ChartAnyPluginSignature } from '@mui/x-charts/internals';
+import type { ChartProApi as ChartProApiOriginal, ProPluginsPerSeriesType } from "../context/ChartProApi.js";
+import type { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+export * from "./ChartsContainerPro.js";
+/**
+ * @deprecated Use `ChartProApi` from `@mui/x-charts/context` instead.
+ */
+export type ChartProApi<ChartType extends keyof ProPluginsPerSeriesType | undefined = undefined, Signatures extends readonly ChartAnyPluginSignature[] = (ChartType extends keyof ProPluginsPerSeriesType ? ProPluginsPerSeriesType[ChartType] : AllPluginSignatures)> = ChartProApiOriginal<ChartType, Signatures>;

package/esm/ChartsContainerPro/index.js

@@ -0,0 +1,6 @@
+import "../typeOverloads/index.js";
+export * from "./ChartsContainerPro.js";
+
+/**
+ * @deprecated Use `ChartProApi` from `@mui/x-charts/context` instead.
+ */

package/esm/ChartsContainerPro/useChartsContainerProProps.d.ts

@@ -0,0 +1,9 @@
+import { type ChartAnyPluginSignature, type ChartSeriesType, type UseChartsContainerPropsReturnValue } from '@mui/x-charts/internals';
+import type * as React from 'react';
+import type { ChartDataProviderProProps } from "../ChartDataProviderPro/index.js";
+import type { ChartsContainerProProps } from "./ChartsContainerPro.js";
+import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+export type UseChartsContainerProPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = Pick<UseChartsContainerPropsReturnValue<TSeries, TSignatures>, 'chartsSurfaceProps' | 'children'> & {
+  chartDataProviderProProps: ChartDataProviderProProps<TSeries, TSignatures>;
+};
+export declare const useChartsContainerProProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartsContainerProProps<TSeries, TSignatures>, ref: React.Ref<SVGSVGElement>) => UseChartsContainerProPropsReturnValue<TSeries, TSignatures>;

package/esm/ChartsContainerPro/useChartsContainerProProps.js

@@ -0,0 +1,37 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "zoomInteractionConfig", "plugins", "apiRef"];
+import { useChartsContainerProps } from '@mui/x-charts/internals';
+import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
+export const useChartsContainerProProps = (props, ref) => {
+  const _ref = props,
+    {
+      initialZoom,
+      zoomData,
+      onZoomChange,
+      zoomInteractionConfig,
+      plugins,
+      apiRef
+    } = _ref,
+    baseProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    chartDataProviderProps,
+    chartsSurfaceProps,
+    children
+  } = useChartsContainerProps(baseProps, ref);
+  const chartDataProviderProProps = _extends({}, chartDataProviderProps, {
+    initialZoom,
+    zoomData,
+    onZoomChange,
+    zoomInteractionConfig,
+    apiRef,
+    plugins: plugins ?? DEFAULT_PLUGINS
+  });
+  return {
+    chartDataProviderProProps,
+    chartsSurfaceProps,
+    children
+  };
+};

package/esm/FunnelChart/FunnelChart.js

@@ -208,7 +208,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['funnel']).isRequired
   })),
   /**
@@ -222,7 +222,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -252,7 +252,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['funnel']).isRequired
   })),
   /**
@@ -335,7 +335,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['funnel']).isRequired
   }),
   /**

package/esm/FunnelChart/FunnelSection.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
 import { type FunnelSectionClasses } from "./funnelSectionClasses.js";
-export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> {
+export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>, 'ref'> {
   seriesId: SeriesId;
   dataIndex: number;
   color: string;

package/esm/FunnelChart/funnel.types.d.ts

@@ -27,7 +27,7 @@ export type FunnelValueType = {
    */
   labelMarkType?: ChartsLabelMarkProps['type'];
 };
-export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType>, 'color' | 'colorGetter'>, CartesianSeriesType {
+export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType, 'funnel'>, 'color' | 'colorGetter'>, CartesianSeriesType {
   type: 'funnel';
   /**
    * Data associated to the funnel section.

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.js

@@ -3,15 +3,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { warnOnce } from '@mui/x-internals/warning';
-import { getSVGPoint, getCartesianAxisIndex, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartsInteractionIsInitialized, defaultizeXAxis, defaultizeYAxis } from '@mui/x-charts/internals';
+import { getChartPoint, getCartesianAxisIndex, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartsInteractionIsInitialized, defaultizeXAxis, defaultizeYAxis } from '@mui/x-charts/internals';
 import { selectorChartXAxis, selectorChartYAxis } from "./useChartFunnelAxisRendering.selectors.js";
 export const useChartFunnelAxis = ({
   params,
   store,
-  seriesConfig,
-  svgRef,
   instance
 }) => {
+  const {
+    svgRef
+  } = instance;
   const {
     xAxis,
     yAxis,
@@ -38,11 +39,12 @@ export const useChartFunnelAxis = ({
         gap: gap ?? 0
       },
       cartesianAxis: {
-        x: defaultizeXAxis(xAxis, dataset),
-        y: defaultizeYAxis(yAxis, dataset)
+        axesGap: 0,
+        x: defaultizeXAxis(xAxis, dataset, 0),
+        y: defaultizeYAxis(yAxis, dataset, 0)
       }
     });
-  }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store, gap]);
+  }, [drawingArea, xAxis, yAxis, dataset, store, gap]);
   React.useEffect(() => {
     const element = svgRef.current;
     if (!isInteractionEnabled || !element || params.disableAxisListener) {
@@ -68,7 +70,7 @@ export const useChartFunnelAxis = ({
     const gestureHandler = event => {
       const srvEvent = event.detail.srcEvent;
       const target = event.detail.target;
-      const svgPoint = getSVGPoint(element, srvEvent);
+      const svgPoint = getChartPoint(element, srvEvent);
       // Release the pointer capture if we are panning, as this would cause the tooltip to
       // be locked to the first "section" it touches.
       if (event.detail.srcEvent.buttons >= 1 && target?.hasPointerCapture(event.detail.srcEvent.pointerId)) {
@@ -112,7 +114,7 @@ export const useChartFunnelAxis = ({
       const usedYAxis = yAxisIds[0];
       let dataIndex = null;
       let isXAxis = false;
-      const svgPoint = getSVGPoint(element, event.detail.srcEvent);
+      const svgPoint = getChartPoint(element, event.detail.srcEvent);
       const xIndex = getCartesianAxisIndex(xAxisWithScale[usedXAxis], svgPoint.x);
       isXAxis = xIndex !== -1;
       dataIndex = isXAxis ? xIndex : getCartesianAxisIndex(yAxisWithScale[usedYAxis], svgPoint.y);
@@ -158,8 +160,8 @@ useChartFunnelAxis.getDefaultizedParams = ({
 }) => {
   return _extends({}, params, {
     gap: params.gap ?? 0,
-    defaultizedXAxis: defaultizeXAxis(params.xAxis, params.dataset),
-    defaultizedYAxis: defaultizeYAxis(params.yAxis, params.dataset)
+    defaultizedXAxis: defaultizeXAxis(params.xAxis, params.dataset, 0),
+    defaultizedYAxis: defaultizeYAxis(params.yAxis, params.dataset, 0)
   });
 };
 useChartFunnelAxis.getInitialState = params => {
@@ -168,6 +170,7 @@ useChartFunnelAxis.getInitialState = params => {
       gap: params.gap ?? 0
     },
     cartesianAxis: {
+      axesGap: 0,
       x: params.defaultizedXAxis,
       y: params.defaultizedYAxis
     }

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.types.d.ts

@@ -1,6 +1,6 @@
 import { type ChartPluginSignature, type UseChartCartesianAxisDefaultizedParameters, type UseChartCartesianAxisParameters, type UseChartCartesianAxisState, type UseChartInteractionSignature, type UseChartSeriesSignature, type ChartsAxisData } from '@mui/x-charts/internals';
 export type UseChartFunnelAxisSignature = ChartPluginSignature<{
-  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis'> & {
+  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis' | 'axesGap'> & {
     /**
      * The gap, in pixels, between funnel sections.
      * @default 0
@@ -14,8 +14,9 @@ export type UseChartFunnelAxisSignature = ChartPluginSignature<{
      */
     onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
   };
-  defaultizedParams: UseChartCartesianAxisDefaultizedParameters & {
+  defaultizedParams: Omit<UseChartCartesianAxisDefaultizedParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis' | 'axesGap'> & {
     gap: number;
+    onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
   };
   state: Pick<UseChartCartesianAxisState, 'cartesianAxis'> & {
     funnel: {

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.d.ts

@@ -3,16 +3,16 @@ import { type UseChartFunnelAxisSignature } from "./useChartFunnelAxis.types.js"
 export declare const selectorFunnel: (state: ChartState<[], [UseChartFunnelAxisSignature]>) => {
   gap: number;
 } | undefined;
-export declare const selectorFunnelGap: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<Pick<import("@mui/x-charts/internals").UseChartCartesianAxisState, "cartesianAxis"> & {
+export declare const selectorFunnelGap: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<Pick<import("@mui/x-charts/internals").UseChartCartesianAxisState, "cartesianAxis"> & {
   funnel: {
     gap: number;
   };
 }> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => number;
-export declare const selectorChartXAxis: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartXAxis: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => import("./computeAxisValue.js").ComputeResult<import("@mui/x-charts").ChartsXAxisProps>;
-export declare const selectorChartYAxis: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartYAxis: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => import("./computeAxisValue.js").ComputeResult<import("@mui/x-charts").ChartsYAxisProps>;

package/esm/FunnelChart/index.d.ts

@@ -5,6 +5,7 @@ export { FunnelChart } from "./FunnelChart.js";
 export declare const Unstable_FunnelChart: import("react").ForwardRefExoticComponent<import("./FunnelChart.js").FunnelChartProps & import("react").RefAttributes<SVGSVGElement>>;
 export type { FunnelChartProps, FunnelSeries } from "./FunnelChart.js";
 export * from "./FunnelPlot.js";
+export * from "./funnelPlotSlots.types.js";
 export * from "./FocusedFunnelSection.js";
 export * from "./funnel.types.js";
 export * from "./categoryAxis.types.js";

package/esm/FunnelChart/index.js

@@ -6,6 +6,7 @@ export { FunnelChart } from "./FunnelChart.js";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const Unstable_FunnelChart = FunnelChart;
 export * from "./FunnelPlot.js";
+export * from "./funnelPlotSlots.types.js";
 export * from "./FocusedFunnelSection.js";
 export * from "./funnel.types.js";
 export * from "./categoryAxis.types.js";

package/esm/FunnelChart/seriesConfig/index.js

@@ -1,4 +1,4 @@
-import { identifierSerializerSeriesIdDataIndex } from '@mui/x-charts/internals';
+import { identifierSerializerSeriesIdDataIndex, identifierCleanerSeriesIdDataIndex } from '@mui/x-charts/internals';
 import { getExtremumX, getExtremumY } from "./extremums.js";
 import seriesProcessor from "./seriesProcessor.js";
 import getColor from "./getColor.js";
@@ -17,5 +17,6 @@ export const funnelSeriesConfig = {
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues,
   keyboardFocusHandler,
-  identifierSerializer: identifierSerializerSeriesIdDataIndex
+  identifierSerializer: identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: identifierCleanerSeriesIdDataIndex
 };