@mui/x-charts-pro 8.6.0 → 8.8.0

package/ChartZoomSlider/internals/previews/ScatterPreviewPlot.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScatterPreviewPlot = ScatterPreviewPlot;
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts/internals");
+var _hooks = require("@mui/x-charts/hooks");
+var _ScatterChart = require("@mui/x-charts/ScatterChart");
+var _jsxRuntime = require("react/jsx-runtime");
+function ScatterPreviewPlot({
+  axisId,
+  x,
+  y,
+  height,
+  width
+}) {
+  const store = (0, _internals.useStore)();
+  const seriesData = (0, _hooks.useScatterSeriesContext)();
+  const xAxes = (0, _internals.useSelector)(store, _internals.selectorChartPreviewComputedXAxis, [axisId]);
+  const yAxes = (0, _internals.useSelector)(store, _internals.selectorChartPreviewComputedYAxis, [axisId]);
+  const defaultXAxisId = (0, _hooks.useXAxes)().xAxisIds[0];
+  const defaultYAxisId = (0, _hooks.useYAxes)().yAxisIds[0];
+  const {
+    zAxis: zAxes,
+    zAxisIds
+  } = (0, _hooks.useZAxes)();
+  const defaultZAxisId = zAxisIds[0];
+  if (seriesData === undefined) {
+    return null;
+  }
+  const {
+    series,
+    seriesOrder
+  } = seriesData;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: seriesOrder.map(seriesId => {
+      const {
+        id,
+        xAxisId,
+        yAxisId,
+        zAxisId,
+        color
+      } = series[seriesId];
+      const colorGetter = _internals.scatterSeriesConfig.colorProcessor(series[seriesId], xAxes[xAxisId ?? defaultXAxisId], yAxes[yAxisId ?? defaultYAxisId], zAxes[zAxisId ?? defaultZAxisId]);
+      const xScale = xAxes[xAxisId ?? defaultXAxisId].scale;
+      const yScale = yAxes[yAxisId ?? defaultYAxisId].scale;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScatterPreviewItems, {
+        xScale: xScale,
+        yScale: yScale,
+        color: color,
+        colorGetter: colorGetter,
+        series: series[seriesId],
+        x: x,
+        y: y,
+        height: height,
+        width: width
+      }, id);
+    })
+  });
+}
+function ScatterPreviewItems(props) {
+  const {
+    series,
+    xScale,
+    yScale,
+    color,
+    colorGetter,
+    x,
+    y,
+    width,
+    height
+  } = props;
+  const isPointInside = React.useCallback((px, py) => px >= x && px <= x + width && py >= y && py <= y + height, [height, width, x, y]);
+  const scatterPlotData = (0, _internals.useScatterPlotData)(series, xScale, yScale, isPointInside);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    "data-series": series.id,
+    children: scatterPlotData.map((dataPoint, i) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterChart.ScatterMarker, {
+        dataIndex: dataPoint.dataIndex,
+        color: colorGetter ? colorGetter(i) : color,
+        x: dataPoint.x,
+        y: dataPoint.y,
+        seriesId: series.id,
+        size: series.preview.markerSize,
+        isHighlighted: false,
+        isFaded: false
+      }, dataPoint.id ?? dataPoint.dataIndex);
+    })
+  });
+}

package/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js

@@ -35,7 +35,7 @@ const ChartsToolbarImageExportTrigger = exports.ChartsToolbarImageExportTrigger
     slots,
     slotProps
   } = (0, _internals.useChartsSlots)();
-  const apiRef = (0, _context.useChartApiContext)();
+  const apiRef = (0, _context.useChartProApiContext)();
   const handleClick = event => {
     apiRef.current.exportAsImage(options);
     onClick?.(event);
@@ -64,7 +64,9 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.propType
    *   - [Export as Image](https://mui.com/x/react-charts/export/#export-as-image)
    */
   options: _propTypes.default.shape({
+    copyStyles: _propTypes.default.bool,
     fileName: _propTypes.default.string,
+    onBeforeExport: _propTypes.default.func,
     quality: _propTypes.default.number,
     type: _propTypes.default.string.isRequired
   }),

package/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js

@@ -35,7 +35,7 @@ const ChartsToolbarPrintExportTrigger = exports.ChartsToolbarPrintExportTrigger
     slots,
     slotProps
   } = (0, _internals.useChartsSlots)();
-  const apiRef = (0, _context.useChartApiContext)();
+  const apiRef = (0, _context.useChartProApiContext)();
   const handleClick = event => {
     apiRef.current.exportAsPrint(options);
     onClick?.(event);
@@ -64,7 +64,9 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPrintExportTrigger.propType
    *   - [Print/Export as PDF](https://mui.com/x/react-charts/export/#print-export-as-pdf)
    */
   options: _propTypes.default.shape({
-    fileName: _propTypes.default.string
+    copyStyles: _propTypes.default.bool,
+    fileName: _propTypes.default.string,
+    onBeforeExport: _propTypes.default.func
   }),
   /**
    * A function to customize the rendering of the component.

package/ChartsToolbarPro/ChartsToolbarPro.js

@@ -158,7 +158,9 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPro.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   imageExportOptions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    copyStyles: _propTypes.default.bool,
     fileName: _propTypes.default.string,
+    onBeforeExport: _propTypes.default.func,
     quality: _propTypes.default.number,
     type: _propTypes.default.string.isRequired
   })),

package/FunnelChart/FunnelChart.d.ts

@@ -8,7 +8,7 @@ import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { FunnelChartSlotExtension } from "./funnelSlots.types.js";
 import { CategoryAxis } from "./categoryAxis.types.js";
 import { FunnelChartPluginsSignatures } from "./FunnelChart.plugins.js";
-export interface FunnelChartProps extends Omit<ChartContainerProProps<'funnel', FunnelChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis' | 'zoom' | 'onZoomChange' | 'dataset' | 'yAxis' | 'xAxis' | 'rotationAxis' | 'radiusAxis' | 'slots' | 'slotProps'>, Omit<FunnelPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, FunnelChartSlotExtension {
+export interface FunnelChartProps extends Omit<ChartContainerProProps<'funnel', FunnelChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis' | 'zoom' | 'onZoomChange' | 'dataset' | 'yAxis' | 'xAxis' | 'rotationAxis' | 'radiusAxis' | 'slots' | 'slotProps' | 'experimentalFeatures'>, Omit<FunnelPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, FunnelChartSlotExtension {
   /**
    * The series to display in the funnel chart.
    * An array of [[FunnelSeriesType]] objects.

package/FunnelChart/FunnelPlot.js

@@ -94,7 +94,7 @@ const useAggregatedData = () => {
           seriesId,
           value: currentSeries.data[dataIndex].value
         }) : currentSeries.sectionLabel;
-        const isIncreasing = currentSeries.dataDirection === 'increasing';
+        const isIncreasing = currentSeries.funnelDirection === 'increasing';
         const curve = (0, _curves.getFunnelCurve)(currentSeries.curve, {
           isHorizontal,
           gap,

package/FunnelChart/funnel.types.d.ts

@@ -16,7 +16,7 @@ export type FunnelValueType = {
   /**
    * The label to display on the tooltip, funnel section, or the legend. It can be a string or a function.
    */
-  label?: string | ((location: 'tooltip' | 'legend' | 'section') => string);
+  label?: string | ((location: 'tooltip' | 'legend' | 'section') => string | undefined);
   /**
    * The color of the funnel section
    */
@@ -78,6 +78,17 @@ export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType>
    * @default 'filled'
    */
   variant?: 'filled' | 'outlined';
+  /**
+   * Controls how the funnel is drawn.
+   * Ignored on `step` and `linear-sharp` curves.
+   *
+   * This affects different curves in different ways:
+   * - `bump` & `linear`: Controls which section is the "starting" point of the funnel. This section has straight edges.
+   * - `pyramid` & `step-pyramid`: Fully changes the direction of the shape.
+   *
+   * @default 'auto'
+   */
+  funnelDirection?: 'increasing' | 'decreasing' | 'auto';
 }
 /**
  * An object that allows to identify a funnel item.
@@ -108,16 +119,10 @@ export type FunnelItem = {
    */
   value: number;
 };
-export interface DefaultizedFunnelSeriesType extends DefaultizedProps<FunnelSeriesType, CommonDefaultizedProps | 'layout'> {
+export interface DefaultizedFunnelSeriesType extends Omit<DefaultizedProps<FunnelSeriesType, CommonDefaultizedProps | 'layout'>, 'funnelDirection'> {
   dataPoints: FunnelDataPoints[][];
   data: Readonly<MakeRequired<FunnelValueType, 'id' | 'color'>[]>;
-  /**
-   * Denotes if the data is increasing, first data point is less than the last data point.
-   * While the data is decreasing if the first data point is greater than the last data point.
-   *
-   * This is used to determine the direction of the funnel.
-   */
-  dataDirection: 'increasing' | 'decreasing';
+  funnelDirection: 'increasing' | 'decreasing';
 }
 export type FunnelDataPoints = Record<'x' | 'y', number> & {
   useBandWidth: boolean;

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.js

@@ -52,39 +52,51 @@ const useChartFunnelAxis = ({
   }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store, gap]);
   React.useEffect(() => {
     const element = svgRef.current;
-    if (!isInteractionEnabled || element === null || params.disableAxisListener) {
+    if (!isInteractionEnabled || !element || params.disableAxisListener) {
       return () => {};
     }
-    const handleOut = () => {
-      instance.cleanInteraction?.();
-    };
-    const handleMove = event => {
-      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = (0, _internals.getSVGPoint)(element, target);
-      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
+
+    // Clean the interaction when the mouse leaves the chart.
+    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
+      if (!event.detail.activeGestures.pan) {
         instance.cleanInteraction?.();
-        return;
       }
-      instance.setPointerCoordinate?.(svgPoint);
-    };
-    const handleDown = event => {
-      const target = event.currentTarget;
-      if (!target) {
-        return;
+    });
+    const panEndHandler = instance.addInteractionListener('panEnd', event => {
+      if (!event.detail.activeGestures.move) {
+        instance.cleanInteraction?.();
       }
-      if ('hasPointerCapture' in target && target.hasPointerCapture(event.pointerId)) {
-        target.releasePointerCapture(event.pointerId);
+    });
+    const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
+      if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
+        instance.cleanInteraction?.();
+      }
+    });
+    const gestureHandler = event => {
+      const srvEvent = event.detail.srcEvent;
+      const target = event.detail.target;
+      const svgPoint = (0, _internals.getSVGPoint)(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)) {
+        target?.releasePointerCapture(event.detail.srcEvent.pointerId);
       }
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, target)) {
+        instance.cleanInteraction?.();
+        return;
+      }
+      instance.setPointerCoordinate?.(svgPoint);
     };
-    element.addEventListener('pointerdown', handleDown);
-    element.addEventListener('pointermove', handleMove);
-    element.addEventListener('pointercancel', handleOut);
-    element.addEventListener('pointerleave', handleOut);
+    const moveHandler = instance.addInteractionListener('move', gestureHandler);
+    const panHandler = instance.addInteractionListener('pan', gestureHandler);
+    const pressHandler = instance.addInteractionListener('quickPress', gestureHandler);
     return () => {
-      element.removeEventListener('pointerdown', handleDown);
-      element.removeEventListener('pointermove', handleMove);
-      element.removeEventListener('pointercancel', handleOut);
-      element.removeEventListener('pointerleave', handleOut);
+      moveHandler.cleanup();
+      moveEndHandler.cleanup();
+      panHandler.cleanup();
+      panEndHandler.cleanup();
+      pressHandler.cleanup();
+      pressEndHandler.cleanup();
     };
   }, [svgRef, instance, params.disableAxisListener, isInteractionEnabled]);
   React.useEffect(() => {
@@ -93,8 +105,7 @@ const useChartFunnelAxis = ({
     if (element === null || !onAxisClick) {
       return () => {};
     }
-    const handleMouseClick = event => {
-      event.preventDefault();
+    const axisClickHandler = instance.addInteractionListener('tap', event => {
       const {
         axis: xAxisWithScale,
         axisIds: xAxisIds
@@ -108,7 +119,7 @@ const useChartFunnelAxis = ({
       const usedYAxis = yAxisIds[0];
       let dataIndex = null;
       let isXAxis = false;
-      const svgPoint = (0, _internals.getSVGPoint)(element, event);
+      const svgPoint = (0, _internals.getSVGPoint)(element, event.detail.srcEvent);
       const xIndex = (0, _internals.getCartesianAxisIndex)(xAxisWithScale[usedXAxis], svgPoint.x);
       isXAxis = xIndex !== -1;
       dataIndex = isXAxis ? xIndex : (0, _internals.getCartesianAxisIndex)(yAxisWithScale[usedYAxis], svgPoint.y);
@@ -129,17 +140,16 @@ const useChartFunnelAxis = ({
           seriesValues[seriesId] = seriesItem.data[dataIndex].value;
         }
       });
-      onAxisClick(event, {
+      onAxisClick(event.detail.srcEvent, {
         dataIndex,
         axisValue,
         seriesValues
       });
-    };
-    element.addEventListener('click', handleMouseClick);
+    });
     return () => {
-      element.removeEventListener('click', handleMouseClick);
+      axisClickHandler.cleanup();
     };
-  }, [params.onAxisClick, svgRef, store]);
+  }, [params.onAxisClick, svgRef, store, instance]);
   return {};
 };
 exports.useChartFunnelAxis = useChartFunnelAxis;

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

@@ -1,6 +1,6 @@
 import { ChartPluginSignature, UseChartCartesianAxisDefaultizedParameters, UseChartCartesianAxisParameters, UseChartCartesianAxisState, UseChartInteractionSignature, UseChartSeriesSignature, ChartsAxisData } from '@mui/x-charts/internals';
 export type UseChartFunnelAxisSignature = ChartPluginSignature<{
-  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick'> & {
+  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis'> & {
     /**
      * The gap, in pixels, between funnel sections.
      * @default 0

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

@@ -3,7 +3,7 @@ import { UseChartFunnelAxisSignature } from "./useChartFunnelAxis.types.js";
 export declare const selectorFunnel: (state: ChartState<[], [UseChartFunnelAxisSignature]>) => {
   gap: number;
 } | undefined;
-export declare const selectorFunnelGap: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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 & Partial<Pick<import("@mui/x-charts/internals").UseChartCartesianAxisState, "cartesianAxis"> & {
+export declare const selectorFunnelGap: import("reselect").Selector<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"> & {
   funnel: {
     gap: number;
   };
@@ -12,7 +12,7 @@ export declare const selectorFunnelGap: import("reselect").Selector<import("@mui
 } & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, number, []>;
-export declare const selectorChartXAxis: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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 & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartXAxis: import("reselect").Selector<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> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
@@ -33,7 +33,7 @@ export declare const selectorChartXAxis: import("reselect").Selector<import("@mu
 }> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, import("./computeAxisValue.js").ComputeResult<import("@mui/x-charts").ChartsXAxisProps>, []>;
-export declare const selectorChartYAxis: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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 & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartYAxis: import("reselect").Selector<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> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;

package/FunnelChart/seriesConfig/seriesProcessor.js

@@ -23,6 +23,14 @@ const createPoint = ({
   useBandWidth,
   stackOffset
 };
+const getFunnelDirection = (funnelDirection, curve, firstValue, lastValue) => {
+  if (curve !== 'step' && curve !== 'linear-sharp' && (funnelDirection === 'increasing' || funnelDirection === 'decreasing')) {
+    return funnelDirection;
+  }
+
+  // Implicit check for null or undefined values
+  return firstValue != null && lastValue != null && firstValue < lastValue ? 'increasing' : 'decreasing';
+};
 const seriesProcessor = params => {
   const {
     seriesOrder,
@@ -34,7 +42,7 @@ const seriesProcessor = params => {
     const currentSeries = series[seriesId];
     const firstDataPoint = currentSeries.data.at(0);
     const lastDataPoint = currentSeries.data.at(-1);
-    const dataDirection = firstDataPoint !== undefined && lastDataPoint !== undefined && firstDataPoint.value < lastDataPoint.value ? 'increasing' : 'decreasing';
+    const funnelDirection = getFunnelDirection(currentSeries.funnelDirection, currentSeries.curve, firstDataPoint?.value, lastDataPoint?.value);
     completedSeries[seriesId] = (0, _extends2.default)({
       labelMarkType: 'square',
       layout: isHorizontal ? 'horizontal' : 'vertical',
@@ -43,7 +51,7 @@ const seriesProcessor = params => {
       data: currentSeries.data.map((v, i) => (0, _extends2.default)({
         id: `${seriesId}-funnel-item-${v.id ?? i}`
       }, v)),
-      dataDirection,
+      funnelDirection,
       dataPoints: []
     });
     const stackOffsets = completedSeries[seriesId].data.toReversed().map((_, i, array) => array.slice(0, i).reduce((acc, item) => acc + item.value, 0)).toReversed();
@@ -51,54 +59,22 @@ const seriesProcessor = params => {
       // Main = main axis, Other = other axis
       // For horizontal layout, main is y, other is x
       // For vertical layout, main is x, other is y
-      const isIncreasing = completedSeries[seriesId].dataDirection === 'increasing';
-      const currentMaxMain = item.value;
-      const getNextDataIndex = () => {
-        if (isIncreasing) {
-          return dataIndex === 0 ? dataIndex : dataIndex - 1;
-        }
-        return dataIndex === array.length - 1 ? dataIndex : dataIndex + 1;
-      };
-      const nextDataIndex = getNextDataIndex();
-      const nextMaxMain = array[nextDataIndex].value ?? 0;
-      const nextMaxOther = 0;
-      const currentMaxOther = completedSeries[seriesId].data[dataIndex].value;
-      const stackOffset = stackOffsets[dataIndex];
+      const isIncreasing = completedSeries[seriesId].funnelDirection === 'increasing';
+      let currentMaxMain = 0;
+      let nextMaxMain = 0;
+      let nextDataIndex = 0;
       if (isIncreasing) {
-        return [
-        // Top right (vertical) or Top left (horizontal)
-        createPoint({
-          main: nextMaxMain,
-          other: nextMaxOther,
-          inverse: isHorizontal,
-          useBandWidth: false,
-          stackOffset
-        }),
-        // Bottom right (vertical) or Top right (horizontal)
-        createPoint({
-          main: currentMaxMain,
-          other: currentMaxOther,
-          inverse: isHorizontal,
-          useBandWidth: true,
-          stackOffset
-        }),
-        // Bottom left (vertical) or Bottom right (horizontal)
-        createPoint({
-          main: -currentMaxMain,
-          other: currentMaxOther,
-          inverse: isHorizontal,
-          useBandWidth: true,
-          stackOffset
-        }),
-        // Top left (vertical) or Bottom left (horizontal)
-        createPoint({
-          main: -nextMaxMain,
-          other: nextMaxOther,
-          inverse: isHorizontal,
-          useBandWidth: false,
-          stackOffset
-        })];
+        nextDataIndex = dataIndex === 0 ? dataIndex : dataIndex - 1;
+        currentMaxMain = array[nextDataIndex].value ?? 0;
+        nextMaxMain = item.value;
+      } else {
+        nextDataIndex = dataIndex === array.length - 1 ? dataIndex : dataIndex + 1;
+        currentMaxMain = item.value;
+        nextMaxMain = array[nextDataIndex].value ?? 0;
       }
+      const stackOffset = stackOffsets[dataIndex];
+      const nextMaxOther = 0;
+      const currentMaxOther = completedSeries[seriesId].data[dataIndex].value;
       return [
       // Top right (vertical) or Top left (horizontal)
       createPoint({

package/Heatmap/Heatmap.d.ts

@@ -27,7 +27,7 @@ export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, Heatm
 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'> {
+export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginsSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'skipAnimation' | 'slots' | 'slotProps' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.

package/LineChartPro/LineChartPro.js

@@ -138,6 +138,12 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: _propTypes.default.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: _propTypes.default.shape({
+    preferStrictDomainInLineCharts: _propTypes.default.bool
+  }),
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -153,6 +159,14 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * If `true`, the legend is not rendered.
    */
   hideLegend: _propTypes.default.bool,
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The highlighted item.
    * Used when the highlight is controlled.
@@ -213,6 +227,14 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: _propTypes.default.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onHighlightedAxisChange: _propTypes.default.func,
   /**
    * Callback fired when a line element is clicked.
    */
@@ -326,6 +348,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -391,6 +414,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -451,6 +475,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -511,6 +536,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -571,6 +597,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -631,6 +658,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -691,6 +719,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -751,6 +780,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -823,6 +853,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -887,6 +918,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -946,6 +978,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1005,6 +1038,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1064,6 +1098,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1123,6 +1158,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1182,6 +1218,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1241,6 +1278,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),