@mui/x-charts-pro 8.5.1 → 8.5.3

package/FunnelChart/labelUtils.js

@@ -46,17 +46,21 @@ exports.alignLabel = alignLabel;
 const positionLabel = ({
   position,
   offset,
-  xPosition,
-  yPosition,
   isHorizontal,
-  values,
-  dataIndex,
-  baseScaleData
+  values
 }) => {
   const vertical = position?.vertical ?? 'middle';
   const horizontal = position?.horizontal ?? 'center';
   let x = 0;
   let y = 0;
+
+  // The min/max values are due to the sections possibly being sloped.
+  // Importance of values differs from the horizontal and vertical sections.
+  // Example (vertical):
+  // MaxL         MaxT         MaxR
+  //  \                          /
+  //   \                        /
+  //    MinL      MaxB      MinR
   let minTop = 0;
   let maxTop = 0;
   let minBottom = 0;
@@ -65,56 +69,51 @@ const positionLabel = ({
   let maxLeft = 0;
   let minRight = 0;
   let maxRight = 0;
-  let center = 0;
-  let leftCenter = 0;
-  let rightCenter = 0;
   let middle = 0;
-  let topMiddle = 0;
-  let bottomMiddle = 0;
+  let center = 0;
   const mv = typeof offset === 'number' ? offset : offset?.y ?? 0;
   const mh = typeof offset === 'number' ? offset : offset?.x ?? 0;
-  const stackOffset = values[0].stackOffset;
+
+  // Min ... Max
+  const Ys = values.map(v => v.y).toSorted((a, b) => a - b);
+  const Xs = values.map(v => v.x).toSorted((a, b) => a - b);
+
+  // Visualization of the points in a hierarchical order:
+  //              MaxT
+  //              MinT
+  // MaxL MinL  Cent/Mid  MinR MaxR
+  //              MinB
+  //              MaxB
   if (isHorizontal) {
-    maxTop = yPosition(values[0].y, baseScaleData[dataIndex], stackOffset) - mv;
-    minTop = yPosition(values[1].y, baseScaleData[dataIndex], stackOffset) - mv;
-    minBottom = yPosition(values[2].y, baseScaleData[dataIndex], stackOffset) + mv;
-    maxBottom = yPosition(values[3].y, baseScaleData[dataIndex], stackOffset) + mv;
-    minRight = 0;
-    maxRight = xPosition(Math.min(...values.map(v => v.x)), baseScaleData[dataIndex], stackOffset, true) + mh;
-    minLeft = 0;
-    maxLeft = xPosition(Math.max(...values.map(v => v.x)), baseScaleData[dataIndex], stackOffset) + mh;
-    center = maxRight - (maxRight - maxLeft) / 2;
-    leftCenter = 0;
-    rightCenter = 0;
-    middle = yPosition(0, baseScaleData[dataIndex], stackOffset) - mv;
-    topMiddle = yPosition(values[0].y - (values[0].y - values[1].y) / 2, baseScaleData[dataIndex], stackOffset) - mv;
-    bottomMiddle = yPosition(values[3].y - (values[3].y - values[2].y) / 2, baseScaleData[dataIndex], stackOffset) + mv;
+    maxTop = Ys.at(0) - mv;
+    minTop = Ys.at(1) - mv;
+    minBottom = Ys.at(2) + mv;
+    maxBottom = (Ys.at(3) ?? Ys.at(2)) + mv;
+    maxRight = (Xs.at(3) ?? Xs.at(2)) + mh;
+    // We don't need (minRight/minLeft) for horizontal
+    maxLeft = Xs.at(0) + mh;
+    center = (maxRight + maxLeft) / 2;
+    middle = (maxBottom + maxTop) / 2;
   } else {
-    minTop = 0;
-    maxTop = yPosition(Math.max(...values.map(v => v.y)), baseScaleData[dataIndex], stackOffset) - mv;
-    minBottom = 0;
-    maxBottom = yPosition(Math.min(...values.map(v => v.y)), baseScaleData[dataIndex], stackOffset, true) - mv;
-    maxRight = xPosition(values[0].x, baseScaleData[dataIndex], stackOffset) + mh;
-    minRight = xPosition(values[1].x, baseScaleData[dataIndex], stackOffset) + mh;
-    minLeft = xPosition(values[2].x, baseScaleData[dataIndex], stackOffset) - mh;
-    maxLeft = xPosition(values[3].x, baseScaleData[dataIndex], stackOffset) - mh;
-    center = xPosition(0, baseScaleData[dataIndex], stackOffset) - mh;
-    rightCenter = xPosition(values[0].x - (values[0].x - values[1].x) / 2, baseScaleData[dataIndex], stackOffset) + mh;
-    leftCenter = xPosition(values[3].x - (values[3].x - values[2].x) / 2, baseScaleData[dataIndex], stackOffset) - mh;
-    middle = yPosition(values[0].y - (values[0].y - values[1].y) / 2, baseScaleData[dataIndex], stackOffset);
-    middle = maxTop - (maxTop - maxBottom) / 2;
-    topMiddle = 0;
-    bottomMiddle = 0;
+    maxTop = Ys.at(0) - mv;
+    // We don't need (minTop/minBottom) for vertical
+    maxBottom = (Ys.at(3) ?? Ys.at(2)) - mv;
+    maxRight = (Xs.at(3) ?? Xs.at(2)) + mh;
+    minRight = Xs.at(2) + mh;
+    minLeft = Xs.at(1) - mh;
+    maxLeft = Xs.at(0) - mh;
+    center = (maxRight + maxLeft) / 2;
+    middle = (maxBottom + maxTop) / 2;
   }
   if (isHorizontal) {
     if (horizontal === 'center') {
       x = center;
       if (vertical === 'top') {
-        y = topMiddle;
+        y = (maxTop + minTop) / 2;
       } else if (vertical === 'middle') {
         y = middle;
       } else if (vertical === 'bottom') {
-        y = bottomMiddle;
+        y = (maxBottom + minBottom) / 2;
       }
     } else if (horizontal === 'start') {
       x = maxLeft;
@@ -140,11 +139,11 @@ const positionLabel = ({
     if (vertical === 'middle') {
       y = middle;
       if (horizontal === 'start') {
-        x = leftCenter;
+        x = (maxLeft + minLeft) / 2;
       } else if (horizontal === 'center') {
         x = center;
       } else if (horizontal === 'end') {
-        x = rightCenter;
+        x = (maxRight + minRight) / 2;
       }
     } else if (vertical === 'top') {
       y = maxTop;

package/FunnelChart/useFunnelChartProps.js

@@ -91,8 +91,7 @@ const useFunnelChartProps = props => {
       onHighlightChange,
       className,
       axisHighlight,
-      apiRef,
-      gap
+      apiRef
     } = props,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const margin = (0, _internals.defaultizeMargin)(marginProps, _constants.DEFAULT_MARGINS);
@@ -124,7 +123,6 @@ const useFunnelChartProps = props => {
     plugins: _FunnelChart.FUNNEL_CHART_PLUGINS
   });
   const funnelPlotProps = {
-    gap,
     onItemClick,
     slots,
     slotProps

package/Heatmap/Heatmap.d.ts

@@ -5,14 +5,14 @@ import { ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
 import { ChartsAxisSlots, ChartsAxisSlotProps, XAxis, YAxis } from '@mui/x-charts/internals';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
 import { ChartsLegendSlotProps, ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
-import { ChartsToolbarSlotProps, ChartsToolbarSlots } from '@mui/x-charts/Toolbar';
 import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { HeatmapSeriesType } from "../models/seriesType/heatmap.js";
 import { HeatmapTooltipProps } from "./HeatmapTooltip/index.js";
 import { HeatmapItemSlotProps, HeatmapItemSlots } from "./HeatmapItem.js";
 import { HeatmapPluginsSignatures } from "./Heatmap.plugins.js";
-export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots, ChartsToolbarSlots, Partial<ChartsSlotsPro> {
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
+export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {
   /**
    * Custom component for the tooltip.
    * @default ChartsTooltipRoot
@@ -24,7 +24,7 @@ export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, Heatm
    */
   legend?: ChartsLegendSlots['legend'];
 }
-export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps, ChartsLegendSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotPropsPro> {
+export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps, ChartsLegendSlotProps, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {
   tooltip?: Partial<HeatmapTooltipProps>;
 }
 export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginsSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'skipAnimation' | 'slots' | 'slotProps'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {

package/LineChartPro/LineChartPro.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { LineChartProps, LineChartSlots, LineChartSlotProps } from '@mui/x-charts/LineChart';
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
 import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { LineChartProPluginsSignatures } from "./LineChartPro.plugins.js";
-export interface LineChartProSlots extends LineChartSlots, Partial<ChartsSlotsPro> {}
-export interface LineChartProSlotProps extends LineChartSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface LineChartProSlots extends Omit<LineChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface LineChartProSlotProps extends Omit<LineChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
 export interface LineChartProProps extends Omit<LineChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'line', LineChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
   /**
    * Overridable component slots.

package/PieChartPro/PieChartPro.d.ts

@@ -3,8 +3,9 @@ import { PieChartProps, PieChartSlotProps, PieChartSlots } from '@mui/x-charts/P
 import { ChartsSlotsPro, ChartsSlotPropsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { PieChartProPluginSignatures } from "./PieChartPro.plugins.js";
-export interface PieChartProSlots extends PieChartSlots, Partial<ChartsSlotsPro> {}
-export interface PieChartProSlotProps extends PieChartSlotProps, Partial<ChartsSlotPropsPro> {}
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
+export interface PieChartProSlots extends Omit<PieChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface PieChartProSlotProps extends Omit<PieChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
 export interface PieChartProProps extends Omit<PieChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'pie', PieChartProPluginSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
   /**
    * Overridable component slots.

package/RadarChartPro/RadarChartPro.d.ts

@@ -1,7 +1,22 @@
 import * as React from 'react';
-import { RadarChartProps, RadarDataProviderProps } from '@mui/x-charts/RadarChart';
+import { RadarChartProps, RadarDataProviderProps, RadarChartSlotProps, RadarChartSlots } from '@mui/x-charts/RadarChart';
 import { RadarChartProPluginsSignatures } from "./RadarChartPro.plugins.js";
-export interface RadarChartProProps extends Omit<RadarChartProps, 'apiRef'>, Omit<RadarDataProviderProps<RadarChartProPluginsSignatures>, 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {}
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
+import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
+export interface RadarChartProSlots extends Omit<RadarChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface RadarChartProSlotProps extends Omit<RadarChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface RadarChartProProps extends Omit<RadarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<RadarDataProviderProps<RadarChartProPluginsSignatures>, 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RadarChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RadarChartProSlotProps;
+}
 /**
  * Demos:
  *

package/ScatterChartPro/ScatterChartPro.d.ts

@@ -3,8 +3,9 @@ import { ScatterChartProps, ScatterChartSlotProps, ScatterChartSlots } from '@mu
 import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/ChartContainerPro.js";
 import { ScatterChartProPluginsSignatures } from "./ScatterChartPro.plugins.js";
-export interface ScatterChartProSlots extends ScatterChartSlots, Partial<ChartsSlotsPro> {}
-export interface ScatterChartProSlotProps extends ScatterChartSlotProps, Partial<ChartsSlotPropsPro> {}
+import { ChartsToolbarProSlots, ChartsToolbarProSlotProps } from "../ChartsToolbarPro/Toolbar.types.js";
+export interface ScatterChartProSlots extends Omit<ScatterChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface ScatterChartProSlotProps extends Omit<ScatterChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
 export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick' | 'slots' | 'slotProps'> {
   /**
    * Overridable component slots.

package/esm/BarChartPro/BarChartPro.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { BarChartProps, BarChartSlotProps, BarChartSlots } from '@mui/x-charts/BarChart';
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
 import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { BarChartProPluginsSignatures } from "./BarChartPro.plugins.js";
-export interface BarChartProSlots extends BarChartSlots, Partial<ChartsSlotsPro> {}
-export interface BarChartProSlotProps extends BarChartSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface BarChartProSlots extends Omit<BarChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface BarChartProSlotProps extends Omit<BarChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
 export interface BarChartProProps extends Omit<BarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
   /**
    * Overridable component slots.

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -11,7 +11,7 @@ import { defaultSlotsMaterial } from "../internals/material/index.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc0OTA3MDgwMDAwMA==";
+const releaseInfo = "MTc1MDI4NDAwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/ChartZoomSlider/internals/ChartAxisZoomSlider.js

@@ -18,7 +18,7 @@ export function ChartAxisZoomSlider({
 }) {
   const store = useStore();
   const drawingArea = useDrawingArea();
-  const zoomData = useSelector(store, selectorChartAxisZoomData, axisId);
+  const zoomData = useSelector(store, selectorChartAxisZoomData, [axisId]);
   const [showTooltip, setShowTooltip] = React.useState(false);
   const {
     xAxis

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
-import { getSVGPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, selectorChartDrawingArea, useChartContext, useDrawingArea, useSelector, useStore } from '@mui/x-charts/internals';
+import { getSVGPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, useChartContext, useDrawingArea, useSelector, useStore } from '@mui/x-charts/internals';
 import * as React from 'react';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.js";
@@ -32,7 +32,7 @@ export function ChartAxisZoomSliderActiveTrack({
     svgRef
   } = useChartContext();
   const store = useStore();
-  const axis = useSelector(store, selectorChartAxis, axisId);
+  const axis = useSelector(store, selectorChartAxis, [axisId]);
   const drawingArea = useDrawingArea();
   const activePreviewRectRef = React.useRef(null);
   const [startThumbEl, setStartThumbEl] = React.useState(null);
@@ -48,10 +48,6 @@ export function ChartAxisZoomSliderActiveTrack({
     if (!activePreviewRect) {
       return;
     }
-
-    /* min and max values of zoom to ensure the pointer anchor in the slider is maintained  */
-    let pointerZoomMin;
-    let pointerZoomMax;
     let prevPointerZoom = 0;
     const onPointerMove = rafThrottle(event => {
       const element = svgRef.current;
@@ -59,11 +55,10 @@ export function ChartAxisZoomSliderActiveTrack({
         return;
       }
       const point = getSVGPoint(element, event);
-      let pointerZoom = calculateZoomFromPoint(store.getSnapshot(), axisId, point);
+      const pointerZoom = calculateZoomFromPoint(store.getSnapshot(), axisId, point);
       if (pointerZoom === null) {
         return;
       }
-      pointerZoom = Math.max(pointerZoomMin, Math.min(pointerZoomMax, pointerZoom));
       const deltaZoom = pointerZoom - prevPointerZoom;
       prevPointerZoom = pointerZoom;
       instance.moveZoomRange(axisId, deltaZoom);
@@ -87,8 +82,6 @@ export function ChartAxisZoomSliderActiveTrack({
         return;
       }
       prevPointerZoom = pointerDownZoom;
-      pointerZoomMin = pointerDownZoom - axisZoomData.start;
-      pointerZoomMax = 100 - (axisZoomData.end - pointerDownZoom);
       document.addEventListener('pointerup', onPointerUp);
       activePreviewRect.addEventListener('pointermove', onPointerMove);
     };
@@ -129,23 +122,12 @@ export function ChartAxisZoomSliderActiveTrack({
     }
     const point = getSVGPoint(element, event);
     instance.setZoomData(prevZoomData => {
-      const {
-        left,
-        top,
-        width,
-        height
-      } = selectorChartDrawingArea(store.getSnapshot());
       const zoomOptions = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), axisId);
       return prevZoomData.map(zoom => {
         if (zoom.axisId === axisId) {
-          let newEnd;
-          if (axisDirection === 'x') {
-            newEnd = (point.x - left) / width * 100;
-          } else {
-            newEnd = (top + height - point.y) / height * 100;
-          }
-          if (reverse) {
-            newEnd = 100 - newEnd;
+          const newEnd = calculateZoomFromPoint(store.getSnapshot(), axisId, point);
+          if (newEnd === null) {
+            return zoom;
           }
           return _extends({}, zoom, {
             end: calculateZoomEnd(newEnd, zoom, zoomOptions)
@@ -163,14 +145,21 @@ export function ChartAxisZoomSliderActiveTrack({
   let startThumbY;
   let endThumbX;
   let endThumbY;
+  const {
+    minStart,
+    maxEnd
+  } = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), axisId);
+  const range = maxEnd - minStart;
+  const zoomStart = Math.max(minStart, zoomData.start);
+  const zoomEnd = Math.min(zoomData.end, maxEnd);
   if (axisDirection === 'x') {
-    previewX = zoomData.start / 100 * drawingArea.width;
+    previewX = (zoomStart - minStart) / range * drawingArea.width;
     previewY = 0;
-    previewWidth = drawingArea.width * (zoomData.end - zoomData.start) / 100;
+    previewWidth = drawingArea.width * (zoomEnd - zoomStart) / range;
     previewHeight = ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
-    startThumbX = zoomData.start / 100 * drawingArea.width;
+    startThumbX = (zoomStart - minStart) / range * drawingArea.width;
     startThumbY = 0;
-    endThumbX = zoomData.end / 100 * drawingArea.width;
+    endThumbX = (zoomEnd - minStart) / range * drawingArea.width;
     endThumbY = 0;
     if (reverse) {
       previewX = drawingArea.width - previewX - previewWidth;
@@ -181,13 +170,13 @@ export function ChartAxisZoomSliderActiveTrack({
     endThumbX -= previewThumbWidth / 2;
   } else {
     previewX = 0;
-    previewY = drawingArea.height - zoomData.end / 100 * drawingArea.height;
+    previewY = drawingArea.height - (zoomEnd - minStart) / range * drawingArea.height;
     previewWidth = ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
-    previewHeight = drawingArea.height * (zoomData.end - zoomData.start) / 100;
+    previewHeight = drawingArea.height * (zoomEnd - zoomStart) / range;
     startThumbX = 0;
-    startThumbY = drawingArea.height - zoomData.start / 100 * drawingArea.height;
+    startThumbY = drawingArea.height - (zoomStart - minStart) / range * drawingArea.height;
     endThumbX = 0;
-    endThumbY = drawingArea.height - zoomData.end / 100 * drawingArea.height;
+    endThumbY = drawingArea.height - (zoomEnd - minStart) / range * drawingArea.height;
     if (reverse) {
       previewY = drawingArea.height - previewY - previewHeight;
       startThumbY = drawingArea.height - startThumbY;
@@ -249,7 +238,8 @@ function getZoomSliderTooltipsText(axis, drawingArea) {
   const formatValue = value => {
     if (axis.valueFormatter) {
       return axis.valueFormatter(value, {
-        location: 'zoom-slider-tooltip'
+        location: 'zoom-slider-tooltip',
+        scale: axis.scale
       });
     }
     return `${value}`;

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -55,17 +55,10 @@ export function ChartAxisZoomSliderTrack(_ref) {
       return;
     }
     const pointerDownPoint = getSVGPoint(element, event);
-    let zoomFromPointerDown = calculateZoomFromPoint(store.getSnapshot(), axisId, pointerDownPoint);
+    const zoomFromPointerDown = calculateZoomFromPoint(store.getSnapshot(), axisId, pointerDownPoint);
     if (zoomFromPointerDown === null) {
       return;
     }
-    const {
-      minStart,
-      maxEnd
-    } = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), axisId);
-
-    // Ensure the zoomFromPointerDown is within the min and max range
-    zoomFromPointerDown = Math.max(Math.min(zoomFromPointerDown, maxEnd), minStart);
     const onPointerMove = rafThrottle(function onPointerMove(pointerMoveEvent) {
       const pointerMovePoint = getSVGPoint(element, pointerMoveEvent);
       const zoomFromPointerMove = calculateZoomFromPoint(store.getSnapshot(), axisId, pointerMovePoint);

package/esm/ChartZoomSlider/internals/zoom-utils.d.ts

@@ -1,4 +1,6 @@
-import { AxisId, ChartState, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+import { AxisId, ChartState, DefaultedXAxis, DefaultedYAxis, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+import { ChartDrawingArea } from '@mui/x-charts/hooks';
 export declare function calculateZoomFromPoint(state: ChartState<any>, axisId: AxisId, point: DOMPoint): number | null;
+export declare function calculateZoomFromPointImpl(drawingArea: ChartDrawingArea, axis: Pick<DefaultedXAxis | DefaultedYAxis, 'position' | 'reverse'>, zoomOptions: Pick<DefaultizedZoomOptions, 'minStart' | 'maxEnd'>, point: Pick<DOMPoint, 'x' | 'y'>): number;
 export declare function calculateZoomStart(newStart: number, currentZoom: ZoomData, options: Pick<DefaultizedZoomOptions, 'minStart' | 'minSpan' | 'maxSpan'>): number;
 export declare function calculateZoomEnd(newEnd: number, currentZoom: ZoomData, options: Pick<DefaultizedZoomOptions, 'maxEnd' | 'minSpan' | 'maxSpan'>): number;

package/esm/ChartZoomSlider/internals/zoom-utils.js

@@ -1,24 +1,34 @@
-import { selectorChartDrawingArea, selectorChartRawAxis } from '@mui/x-charts/internals';
+import { selectorChartAxisZoomOptionsLookup, selectorChartDrawingArea, selectorChartRawAxis } from '@mui/x-charts/internals';
 export function calculateZoomFromPoint(state, axisId, point) {
+  const axis = selectorChartRawAxis(state, axisId);
+  if (!axis) {
+    return null;
+  }
+  return calculateZoomFromPointImpl(selectorChartDrawingArea(state), axis, selectorChartAxisZoomOptionsLookup(state, axisId), point);
+}
+export function calculateZoomFromPointImpl(drawingArea, axis, zoomOptions, point) {
   const {
     left,
     top,
     height,
     width
-  } = selectorChartDrawingArea(state);
-  const axis = selectorChartRawAxis(state, axisId);
-  if (!axis) {
-    return null;
-  }
+  } = drawingArea;
+  const {
+    minStart,
+    maxEnd
+  } = zoomOptions;
   const axisDirection = axis.position === 'right' || axis.position === 'left' ? 'y' : 'x';
+  const range = maxEnd - minStart;
   let pointerZoom;
   if (axisDirection === 'x') {
-    pointerZoom = (point.x - left) / width * 100;
+    pointerZoom = (point.x - left) / width * range;
   } else {
-    pointerZoom = (top + height - point.y) / height * 100;
+    pointerZoom = (top + height - point.y) / height * range;
   }
   if (axis.reverse) {
-    pointerZoom = 100 - pointerZoom;
+    pointerZoom = maxEnd - pointerZoom;
+  } else {
+    pointerZoom += minStart;
   }
   return pointerZoom;
 }

package/esm/ChartsToolbarPro/ChartsToolbarPro.d.ts

@@ -1,6 +1,7 @@
 import { ChartsToolbarProps } from '@mui/x-charts/Toolbar';
 import * as React from 'react';
+export interface ChartsToolbarProProps extends ChartsToolbarProps {}
 /**
  * The chart toolbar component for the pro package.
  */
-export declare function ChartsToolbarPro(props: ChartsToolbarProps): React.JSX.Element | null;
+export declare function ChartsToolbarPro(props: ChartsToolbarProProps): React.JSX.Element | null;

package/esm/ChartsToolbarPro/Toolbar.types.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ChartsToolbarProProps } from "./ChartsToolbarPro.js";
+export interface ChartsToolbarProSlots {
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<ChartsToolbarProProps>;
+}
+export interface ChartsToolbarProSlotProps {
+  /**
+   * Props for the toolbar component.
+   */
+  toolbar?: Partial<ChartsToolbarProProps>;
+}

package/esm/ChartsToolbarPro/Toolbar.types.js

@@ -0,0 +1 @@
+export {};

package/esm/FunnelChart/FunnelChart.js

@@ -16,6 +16,7 @@ import { useFunnelChartProps } from "./useFunnelChartProps.js";
 import { seriesConfig as funnelSeriesConfig } from "./seriesConfig/index.js";
 import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
+import { FUNNEL_CHART_PLUGINS } from "./FunnelChart.plugins.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const seriesConfig = {
   funnel: funnelSeriesConfig
@@ -41,7 +42,9 @@ const FunnelChart = /*#__PURE__*/React.forwardRef(function FunnelChart(props, re
   } = useChartContainerProProps(chartContainerProps, ref);
   const Tooltip = themedProps.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
+    gap: themedProps.gap,
     seriesConfig: seriesConfig,
+    plugins: FUNNEL_CHART_PLUGINS,
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [!themedProps.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(FunnelPlot, _extends({}, funnelPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), children]
@@ -88,16 +91,6 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
     size: PropTypes.number,
     tickLabelStyle: PropTypes.object,
     tickSize: PropTypes.number
-  }), PropTypes.shape({
-    categories: PropTypes.arrayOf(PropTypes.string),
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    position: PropTypes.oneOf(['bottom', 'left', 'none', 'right', 'top']),
-    scaleType: PropTypes.oneOf(['point']),
-    size: PropTypes.number,
-    tickLabelStyle: PropTypes.object,
-    tickSize: PropTypes.number
   }), PropTypes.shape({
     categories: PropTypes.arrayOf(PropTypes.string),
     disableLine: PropTypes.bool,
@@ -222,7 +215,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   })]),
   /**
    * The function called for onClick events.
-   * The second argument contains information about all line/bar elements at the current mouse position.
+   * The second argument contains information about all funnel elements at the current position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */

package/esm/FunnelChart/FunnelChart.plugins.d.ts

@@ -1,4 +1,5 @@
-import { ConvertSignaturesIntoPlugins, UseChartCartesianAxisSignature, UseChartHighlightSignature, UseChartInteractionSignature } from '@mui/x-charts/internals';
+import { ConvertSignaturesIntoPlugins, UseChartHighlightSignature, UseChartInteractionSignature } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
-export type FunnelChartPluginsSignatures = [UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
+import { UseChartFunnelAxisSignature } from "./funnelAxisPlugin/useChartFunnelAxis.types.js";
+export type FunnelChartPluginsSignatures = [UseChartFunnelAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
 export declare const FUNNEL_CHART_PLUGINS: ConvertSignaturesIntoPlugins<FunnelChartPluginsSignatures>;

package/esm/FunnelChart/FunnelChart.plugins.js

@@ -1,3 +1,4 @@
-import { useChartCartesianAxis, useChartHighlight, useChartInteraction } from '@mui/x-charts/internals';
+import { useChartHighlight, useChartInteraction } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
-export const FUNNEL_CHART_PLUGINS = [useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartProExport];
+import { useChartFunnelAxis } from "./funnelAxisPlugin/useChartFunnelAxis.js";
+export const FUNNEL_CHART_PLUGINS = [useChartFunnelAxis, useChartInteraction, useChartHighlight, useChartProExport];

package/esm/FunnelChart/FunnelPlot.d.ts

@@ -2,11 +2,6 @@ import * as React from 'react';
 import { FunnelItemIdentifier } from "./funnel.types.js";
 import { FunnelPlotSlotExtension } from "./funnelPlotSlots.types.js";
 export interface FunnelPlotProps extends FunnelPlotSlotExtension {
-  /**
-   * The gap, in pixels, between funnel sections.
-   * @default 0
-   */
-  gap?: number;
   /**
    * Callback fired when a funnel item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.