@mui/x-charts 9.8.0 → 9.9.0

package/LineChart/LinePlot.mjs

@@ -66,7 +66,8 @@ function LinePlot(props) {
       seriesId,
       color,
       gradientId,
-      hidden
+      hidden,
+      isSampled
     }) => {
       return /*#__PURE__*/_jsx(LineElement, {
         seriesId: seriesId,
@@ -74,7 +75,7 @@ function LinePlot(props) {
         color: color,
         gradientId: gradientId,
         hidden: hidden,
-        skipAnimation: skipAnimation,
+        skipAnimation: skipAnimation || isSampled,
         slots: slots,
         slotProps: slotProps,
         onClick: onItemClick && (event => onItemClick(event, {

package/LineChart/MarkElement.d.mts

@@ -48,7 +48,7 @@ export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighli
  *
  * - [MarkElement API](https://mui.com/x/api/charts/mark-element/)
  */
-declare function MarkElement(props: MarkElementProps): import("react/jsx-runtime").JSX.Element;
+declare function MarkElement(props: MarkElementProps): React.JSX.Element;
 declare namespace MarkElement {
   var propTypes: any;
 }

package/LineChart/MarkElement.d.ts

@@ -48,7 +48,7 @@ export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighli
  *
  * - [MarkElement API](https://mui.com/x/api/charts/mark-element/)
  */
-declare function MarkElement(props: MarkElementProps): import("react/jsx-runtime").JSX.Element;
+declare function MarkElement(props: MarkElementProps): React.JSX.Element;
 declare namespace MarkElement {
   var propTypes: any;
 }

package/LineChart/MarkPlot.d.mts

@@ -36,7 +36,7 @@ export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<
  *
  * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
  */
-declare function MarkPlot(props: MarkPlotProps): import("react/jsx-runtime").JSX.Element;
+declare function MarkPlot(props: MarkPlotProps): React.JSX.Element;
 declare namespace MarkPlot {
   var propTypes: any;
 }

package/LineChart/MarkPlot.d.ts

@@ -36,7 +36,7 @@ export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<
  *
  * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
  */
-declare function MarkPlot(props: MarkPlotProps): import("react/jsx-runtime").JSX.Element;
+declare function MarkPlot(props: MarkPlotProps): React.JSX.Element;
 declare namespace MarkPlot {
   var propTypes: any;
 }

package/LineChart/seriesConfig/index.js

@@ -12,7 +12,7 @@ var _getColor = _interopRequireDefault(require("./getColor"));
 var _legend = _interopRequireDefault(require("./legend"));
 var _tooltip = _interopRequireWildcard(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
-var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _tooltipPosition = require("./tooltipPosition");
 var _getItemAtPosition = _interopRequireDefault(require("./getItemAtPosition"));
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _identifierSerializer = require("../../internals/identifierSerializer");
@@ -24,7 +24,7 @@ const lineSeriesConfig = exports.lineSeriesConfig = {
   seriesProcessor: _seriesProcessor.default,
   legendGetter: _legend.default,
   tooltipGetter: _tooltip.default,
-  tooltipItemPositionGetter: _tooltipPosition.default,
+  selectorTooltipItemPosition: _tooltipPosition.selectorTooltipItemPosition,
   axisTooltipGetter: _tooltip.axisTooltipGetter,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,

package/LineChart/seriesConfig/index.mjs

@@ -4,7 +4,7 @@ import getColor from "./getColor.mjs";
 import legendGetter from "./legend.mjs";
 import tooltipGetter, { axisTooltipGetter } from "./tooltip.mjs";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.mjs";
-import tooltipItemPositionGetter from "./tooltipPosition.mjs";
+import { selectorTooltipItemPosition } from "./tooltipPosition.mjs";
 import getItemAtPosition from "./getItemAtPosition.mjs";
 import keyboardFocusHandler from "./keyboardFocusHandler.mjs";
 import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.mjs";
@@ -16,7 +16,7 @@ export const lineSeriesConfig = {
   seriesProcessor,
   legendGetter,
   tooltipGetter,
-  tooltipItemPositionGetter,
+  selectorTooltipItemPosition,
   axisTooltipGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,

package/LineChart/seriesConfig/tooltipPosition.d.mts

@@ -1,3 +1,2 @@
-import type { TooltipItemPositionGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
-declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'line'>;
-export default tooltipItemPositionGetter;
+import type { TooltipItemPositionSelector } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+export declare const selectorTooltipItemPosition: TooltipItemPositionSelector<'line'>;

package/LineChart/seriesConfig/tooltipPosition.d.ts

@@ -1,3 +1,2 @@
-import type { TooltipItemPositionGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
-declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'line'>;
-export default tooltipItemPositionGetter;
+import type { TooltipItemPositionSelector } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
+export declare const selectorTooltipItemPosition: TooltipItemPositionSelector<'line'>;

package/LineChart/seriesConfig/tooltipPosition.js

@@ -3,31 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-const tooltipItemPositionGetter = params => {
-  const {
-    series,
-    identifier,
-    axesConfig
-  } = params;
-  if (!identifier || identifier.dataIndex === undefined) {
+exports.selectorTooltipItemPosition = void 0;
+var _store = require("@mui/x-internals/store");
+var _useChartTooltip = require("../../internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.selectors");
+var _useChartSeries = require("../../internals/plugins/corePlugins/useChartSeries");
+var _useChartCartesianAxisRendering = require("../../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors");
+const selectorTooltipItemPosition = exports.selectorTooltipItemPosition = (0, _store.createSelectorMemoized)(_useChartTooltip.selectorChartsTooltipItem, _useChartSeries.selectorChartSeriesProcessed, _useChartCartesianAxisRendering.selectorChartXAxis, _useChartCartesianAxisRendering.selectorChartYAxis, function selectorTooltipItemPosition(identifier, series, xAxes, yAxes) {
+  if (!identifier || identifier.type !== 'line' || identifier.dataIndex === undefined) {
     return null;
   }
   const itemSeries = series.line?.series[identifier.seriesId];
   if (itemSeries == null) {
     return null;
   }
-  if (axesConfig.x === undefined || axesConfig.y === undefined) {
+  const xAxis = xAxes.axis[itemSeries.xAxisId ?? xAxes.axisIds[0]];
+  const yAxis = yAxes.axis[itemSeries.yAxisId ?? yAxes.axisIds[0]];
+  if (xAxis === undefined || yAxis === undefined) {
     return null;
   }
-  const xValue = axesConfig.x.data?.[identifier.dataIndex];
+  const xValue = xAxis.data?.[identifier.dataIndex];
   const yValue = itemSeries.data[identifier.dataIndex] == null ? null : itemSeries.visibleStackedData[identifier.dataIndex][1];
   if (xValue == null || yValue == null) {
     return null;
   }
   return {
-    x: axesConfig.x.scale(xValue),
-    y: axesConfig.y.scale(yValue)
+    x: xAxis.scale(xValue),
+    y: yAxis.scale(yValue)
   };
-};
-var _default = exports.default = tooltipItemPositionGetter;
+});

package/LineChart/seriesConfig/tooltipPosition.mjs

@@ -1,27 +1,27 @@
-const tooltipItemPositionGetter = params => {
-  const {
-    series,
-    identifier,
-    axesConfig
-  } = params;
-  if (!identifier || identifier.dataIndex === undefined) {
+import { createSelectorMemoized } from '@mui/x-internals/store';
+import { selectorChartsTooltipItem } from "../../internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.selectors.mjs";
+import { selectorChartSeriesProcessed } from "../../internals/plugins/corePlugins/useChartSeries/index.mjs";
+import { selectorChartXAxis, selectorChartYAxis } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.mjs";
+export const selectorTooltipItemPosition = createSelectorMemoized(selectorChartsTooltipItem, selectorChartSeriesProcessed, selectorChartXAxis, selectorChartYAxis, function selectorTooltipItemPosition(identifier, series, xAxes, yAxes) {
+  if (!identifier || identifier.type !== 'line' || identifier.dataIndex === undefined) {
     return null;
   }
   const itemSeries = series.line?.series[identifier.seriesId];
   if (itemSeries == null) {
     return null;
   }
-  if (axesConfig.x === undefined || axesConfig.y === undefined) {
+  const xAxis = xAxes.axis[itemSeries.xAxisId ?? xAxes.axisIds[0]];
+  const yAxis = yAxes.axis[itemSeries.yAxisId ?? yAxes.axisIds[0]];
+  if (xAxis === undefined || yAxis === undefined) {
     return null;
   }
-  const xValue = axesConfig.x.data?.[identifier.dataIndex];
+  const xValue = xAxis.data?.[identifier.dataIndex];
   const yValue = itemSeries.data[identifier.dataIndex] == null ? null : itemSeries.visibleStackedData[identifier.dataIndex][1];
   if (xValue == null || yValue == null) {
     return null;
   }
   return {
-    x: axesConfig.x.scale(xValue),
-    y: axesConfig.y.scale(yValue)
+    x: xAxis.scale(xValue),
+    y: yAxis.scale(yValue)
   };
-};
-export default tooltipItemPositionGetter;
+});

package/LineChart/useLinePlotData.d.mts

@@ -1,4 +1,5 @@
 import type { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
+import type { ZoomMap } from "../internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.mjs";
 import type { ChartsXAxisProps, ChartsYAxisProps } from "../models/index.mjs";
 import type { SeriesId } from "../models/seriesType/common.mjs";
 interface LinePlotDataPoint {
@@ -7,6 +8,17 @@ interface LinePlotDataPoint {
   color: string;
   gradientId?: string;
   hidden: boolean;
+  /** Skip the path animation: morphing between different sampled point counts looks wrong. */
+  isSampled: boolean;
 }
-export declare function useLinePlotData(xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): LinePlotDataPoint[];
+export declare function useLinePlotData(xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>,
+/**
+ * Overrides the zoom span and pixel size used for sampling. The zoom-slider preview passes its
+ * full-range zoom and own width so its density stays stable while the main chart zooms, instead
+ * of reading the active zoom from the store.
+ */
+samplingOverride?: {
+  zoomMap: ZoomMap;
+  availableSize: number;
+}): LinePlotDataPoint[];
 export {};

package/LineChart/useLinePlotData.d.ts

@@ -1,4 +1,5 @@
 import type { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import type { ZoomMap } from "../internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.js";
 import type { ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
 import type { SeriesId } from "../models/seriesType/common.js";
 interface LinePlotDataPoint {
@@ -7,6 +8,17 @@ interface LinePlotDataPoint {
   color: string;
   gradientId?: string;
   hidden: boolean;
+  /** Skip the path animation: morphing between different sampled point counts looks wrong. */
+  isSampled: boolean;
 }
-export declare function useLinePlotData(xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): LinePlotDataPoint[];
+export declare function useLinePlotData(xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>,
+/**
+ * Overrides the zoom span and pixel size used for sampling. The zoom-slider preview passes its
+ * full-range zoom and own width so its density stays stable while the main chart zooms, instead
+ * of reading the active zoom from the store.
+ */
+samplingOverride?: {
+  zoomMap: ZoomMap;
+  availableSize: number;
+}): LinePlotDataPoint[];
 export {};

package/LineChart/useLinePlotData.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -10,14 +11,43 @@ var _warning = require("@mui/x-internals/warning");
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _useChartGradientId = require("../hooks/useChartGradientId");
 var _scaleGuards = require("../internals/scaleGuards");
+var _sampling = require("../internals/plugins/featurePlugins/useChartCartesianAxis/sampling.selectors");
+var _useChartCartesianAxisRendering = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors");
+var _useChartSeriesConfig = require("../internals/plugins/corePlugins/useChartSeriesConfig");
+var _useStore = require("../internals/store/useStore");
 var _getCurve = require("../internals/getCurve");
 var _hooks = require("../hooks");
 var _constants = require("../constants");
-function useLinePlotData(xAxes, yAxes) {
+function useLinePlotData(xAxes, yAxes,
+/**
+ * Overrides the zoom span and pixel size used for sampling. The zoom-slider preview passes its
+ * full-range zoom and own width so its density stays stable while the main chart zooms, instead
+ * of reading the active zoom from the store.
+ */
+samplingOverride) {
   const seriesData = (0, _hooks.useLineSeriesContext)();
   const defaultXAxisId = (0, _hooks.useXAxes)().xAxisIds[0];
   const defaultYAxisId = (0, _hooks.useYAxes)().yAxisIds[0];
   const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();
+  const drawingArea = (0, _hooks.useDrawingArea)();
+  const store = (0, _useStore.useStore)();
+  const samplingState = store.use(_sampling.selectorChartSamplingState);
+  const sampledSeries = store.use(_sampling.selectorChartSamplingPyramids);
+  const activeZoomMap = store.use(_useChartCartesianAxisRendering.selectorChartZoomMap);
+  const zoomOptions = store.use(_useChartCartesianAxisRendering.selectorChartZoomOptionsLookup);
+  const sampler = store.use(_useChartSeriesConfig.selectorChartSeriesConfig).line?.sampler;
+  const zoomMap = samplingOverride?.zoomMap ?? activeZoomMap;
+  const samplingSize = samplingOverride?.availableSize ?? drawingArea.width;
+
+  // Skip the line animation while sampling is on, plus the first render after it turns off: the
+  // point count changes, so the path would morph.
+  const lineMethod = samplingState?.methods.line;
+  const samplingEnabled = lineMethod != null && lineMethod !== 'none';
+  const wasSamplingEnabled = React.useRef(samplingEnabled);
+  const skipSamplingAnimation = samplingEnabled || wasSamplingEnabled.current;
+  React.useEffect(() => {
+    wasSamplingEnabled.current = samplingEnabled;
+  }, [samplingEnabled]);
 
   // This memo prevents odd line chart behavior when hydrating.
   const allData = React.useMemo(() => {
@@ -61,39 +91,65 @@ function useLinePlotData(xAxes, yAxes) {
           }
         }
         const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _scaleGuards.isOrdinalScale)(xScale);
-        const formattedData = xData?.flatMap((x, index) => {
-          const nullData = data[index] == null;
-          if (shouldExpand) {
-            const rep = [{
-              x,
-              y: visibleStackedData[index],
-              nullData,
-              isExtension: false
-            }];
-            if (!nullData && (index === 0 || data[index - 1] == null)) {
-              rep.unshift({
-                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
-                y: visibleStackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
-              rep.push({
-                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+
+        // Only the plain (non-step) path is sampled; step expansion falls back to the full render.
+        const built = sampledSeries[seriesId];
+        const zoom = zoomMap?.get(xAxisId) ?? (built ? (0, _sampling.getFullRangeZoom)(xAxisId) : undefined);
+        let sampledBuckets = null;
+        if (samplingEnabled && built && zoom && !shouldExpand && xData) {
+          // Pro owns the sampling math; community flattens the buckets into a polyline.
+          sampledBuckets = sampler?.sample?.({
+            built,
+            zoom,
+            availableSize: samplingSize,
+            minSpan: zoomOptions[xAxisId]?.minSpan ?? 0,
+            algorithm: lineMethod,
+            getValues: () => Float64Array.from(visibleStackedData, point => point[1])
+          }) ?? null;
+        }
+        let formattedData;
+        if (sampledBuckets) {
+          // Buckets already hold the indices to render; flatten them.
+          formattedData = sampledBuckets.flatMap(bucket => Array.from(bucket.indices, index => ({
+            x: xData[index],
+            y: visibleStackedData[index],
+            nullData: data[index] == null
+          })));
+        } else {
+          formattedData = xData?.flatMap((x, index) => {
+            const nullData = data[index] == null;
+            if (shouldExpand) {
+              const rep = [{
+                x,
                 y: visibleStackedData[index],
                 nullData,
-                isExtension: true
-              });
+                isExtension: false
+              }];
+              if (!nullData && (index === 0 || data[index - 1] == null)) {
+                rep.unshift({
+                  x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
+                  y: visibleStackedData[index],
+                  nullData,
+                  isExtension: true
+                });
+              }
+              if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
+                rep.push({
+                  x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+                  y: visibleStackedData[index],
+                  nullData,
+                  isExtension: true
+                });
+              }
+              return rep;
             }
-            return rep;
-          }
-          return {
-            x,
-            y: visibleStackedData[index],
-            nullData
-          };
-        }) ?? [];
+            return {
+              x,
+              y: visibleStackedData[index],
+              nullData
+            };
+          }) ?? [];
+        }
         const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
         const hidden = series[seriesId].hidden;
         const linePath = (0, _d3Shape.line)().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => {
@@ -108,11 +164,12 @@ function useLinePlotData(xAxes, yAxes) {
           gradientId,
           d,
           seriesId,
-          hidden: series[seriesId].hidden
+          hidden: series[seriesId].hidden,
+          isSampled: skipSamplingAnimation
         });
       }
     }
     return linePlotData;
-  }, [seriesData, defaultXAxisId, defaultYAxisId, xAxes, yAxes, getGradientId]);
+  }, [seriesData, defaultXAxisId, defaultYAxisId, xAxes, yAxes, getGradientId, samplingEnabled, lineMethod, sampledSeries, zoomMap, samplingSize, zoomOptions, sampler, skipSamplingAnimation]);
   return allData;
 }

package/LineChart/useLinePlotData.mjs

@@ -1,16 +1,47 @@
+'use client';
+
 import * as React from 'react';
 import { warnOnce } from '@mui/x-internals/warning';
 import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
 import { useChartGradientIdBuilder } from "../hooks/useChartGradientId.mjs";
 import { isOrdinalScale } from "../internals/scaleGuards.mjs";
+import { selectorChartSamplingState, selectorChartSamplingPyramids, getFullRangeZoom } from "../internals/plugins/featurePlugins/useChartCartesianAxis/sampling.selectors.mjs";
+import { selectorChartZoomMap, selectorChartZoomOptionsLookup } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.mjs";
+import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+import { useStore } from "../internals/store/useStore.mjs";
 import { getCurveFactory } from "../internals/getCurve.mjs";
-import { getValueToPositionMapper, useLineSeriesContext, useXAxes, useYAxes } from "../hooks/index.mjs";
+import { getValueToPositionMapper, useDrawingArea, useLineSeriesContext, useXAxes, useYAxes } from "../hooks/index.mjs";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.mjs";
-export function useLinePlotData(xAxes, yAxes) {
+export function useLinePlotData(xAxes, yAxes,
+/**
+ * Overrides the zoom span and pixel size used for sampling. The zoom-slider preview passes its
+ * full-range zoom and own width so its density stays stable while the main chart zooms, instead
+ * of reading the active zoom from the store.
+ */
+samplingOverride) {
   const seriesData = useLineSeriesContext();
   const defaultXAxisId = useXAxes().xAxisIds[0];
   const defaultYAxisId = useYAxes().yAxisIds[0];
   const getGradientId = useChartGradientIdBuilder();
+  const drawingArea = useDrawingArea();
+  const store = useStore();
+  const samplingState = store.use(selectorChartSamplingState);
+  const sampledSeries = store.use(selectorChartSamplingPyramids);
+  const activeZoomMap = store.use(selectorChartZoomMap);
+  const zoomOptions = store.use(selectorChartZoomOptionsLookup);
+  const sampler = store.use(selectorChartSeriesConfig).line?.sampler;
+  const zoomMap = samplingOverride?.zoomMap ?? activeZoomMap;
+  const samplingSize = samplingOverride?.availableSize ?? drawingArea.width;
+
+  // Skip the line animation while sampling is on, plus the first render after it turns off: the
+  // point count changes, so the path would morph.
+  const lineMethod = samplingState?.methods.line;
+  const samplingEnabled = lineMethod != null && lineMethod !== 'none';
+  const wasSamplingEnabled = React.useRef(samplingEnabled);
+  const skipSamplingAnimation = samplingEnabled || wasSamplingEnabled.current;
+  React.useEffect(() => {
+    wasSamplingEnabled.current = samplingEnabled;
+  }, [samplingEnabled]);
 
   // This memo prevents odd line chart behavior when hydrating.
   const allData = React.useMemo(() => {
@@ -54,39 +85,65 @@ export function useLinePlotData(xAxes, yAxes) {
           }
         }
         const shouldExpand = curve?.includes('step') && !strictStepCurve && isOrdinalScale(xScale);
-        const formattedData = xData?.flatMap((x, index) => {
-          const nullData = data[index] == null;
-          if (shouldExpand) {
-            const rep = [{
-              x,
-              y: visibleStackedData[index],
-              nullData,
-              isExtension: false
-            }];
-            if (!nullData && (index === 0 || data[index - 1] == null)) {
-              rep.unshift({
-                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
-                y: visibleStackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
-              rep.push({
-                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+
+        // Only the plain (non-step) path is sampled; step expansion falls back to the full render.
+        const built = sampledSeries[seriesId];
+        const zoom = zoomMap?.get(xAxisId) ?? (built ? getFullRangeZoom(xAxisId) : undefined);
+        let sampledBuckets = null;
+        if (samplingEnabled && built && zoom && !shouldExpand && xData) {
+          // Pro owns the sampling math; community flattens the buckets into a polyline.
+          sampledBuckets = sampler?.sample?.({
+            built,
+            zoom,
+            availableSize: samplingSize,
+            minSpan: zoomOptions[xAxisId]?.minSpan ?? 0,
+            algorithm: lineMethod,
+            getValues: () => Float64Array.from(visibleStackedData, point => point[1])
+          }) ?? null;
+        }
+        let formattedData;
+        if (sampledBuckets) {
+          // Buckets already hold the indices to render; flatten them.
+          formattedData = sampledBuckets.flatMap(bucket => Array.from(bucket.indices, index => ({
+            x: xData[index],
+            y: visibleStackedData[index],
+            nullData: data[index] == null
+          })));
+        } else {
+          formattedData = xData?.flatMap((x, index) => {
+            const nullData = data[index] == null;
+            if (shouldExpand) {
+              const rep = [{
+                x,
                 y: visibleStackedData[index],
                 nullData,
-                isExtension: true
-              });
+                isExtension: false
+              }];
+              if (!nullData && (index === 0 || data[index - 1] == null)) {
+                rep.unshift({
+                  x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
+                  y: visibleStackedData[index],
+                  nullData,
+                  isExtension: true
+                });
+              }
+              if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
+                rep.push({
+                  x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+                  y: visibleStackedData[index],
+                  nullData,
+                  isExtension: true
+                });
+              }
+              return rep;
             }
-            return rep;
-          }
-          return {
-            x,
-            y: visibleStackedData[index],
-            nullData
-          };
-        }) ?? [];
+            return {
+              x,
+              y: visibleStackedData[index],
+              nullData
+            };
+          }) ?? [];
+        }
         const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
         const hidden = series[seriesId].hidden;
         const linePath = d3Line().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => {
@@ -101,11 +158,12 @@ export function useLinePlotData(xAxes, yAxes) {
           gradientId,
           d,
           seriesId,
-          hidden: series[seriesId].hidden
+          hidden: series[seriesId].hidden,
+          isSampled: skipSamplingAnimation
         });
       }
     }
     return linePlotData;
-  }, [seriesData, defaultXAxisId, defaultYAxisId, xAxes, yAxes, getGradientId]);
+  }, [seriesData, defaultXAxisId, defaultYAxisId, xAxes, yAxes, getGradientId, samplingEnabled, lineMethod, sampledSeries, zoomMap, samplingSize, zoomOptions, sampler, skipSamplingAnimation]);
   return allData;
 }

package/PieChart/FocusedPieArc.d.mts

@@ -1,5 +1,5 @@
 import type { PieArcProps } from "./PieArc.mjs";
-declare function FocusedPieArc(props: Partial<Omit<PieArcProps, 'startAngle' | 'endAngle' | 'seriesId' | 'dataIndex' | 'isFaded' | 'isHighlighted' | 'isFocused'>>): import("react/jsx-runtime").JSX.Element | null;
+declare function FocusedPieArc(props: Partial<Omit<PieArcProps, 'startAngle' | 'endAngle' | 'seriesId' | 'dataIndex' | 'isFaded' | 'isHighlighted' | 'isFocused'>>): import("react").JSX.Element | null;
 declare namespace FocusedPieArc {
   var propTypes: any;
 }

package/PieChart/FocusedPieArc.d.ts

@@ -1,5 +1,5 @@
 import type { PieArcProps } from "./PieArc.js";
-declare function FocusedPieArc(props: Partial<Omit<PieArcProps, 'startAngle' | 'endAngle' | 'seriesId' | 'dataIndex' | 'isFaded' | 'isHighlighted' | 'isFocused'>>): import("react/jsx-runtime").JSX.Element | null;
+declare function FocusedPieArc(props: Partial<Omit<PieArcProps, 'startAngle' | 'endAngle' | 'seriesId' | 'dataIndex' | 'isFaded' | 'isHighlighted' | 'isFocused'>>): import("react").JSX.Element | null;
 declare namespace FocusedPieArc {
   var propTypes: any;
 }

package/PieChart/PieArcLabelPlot.d.mts

@@ -34,7 +34,7 @@ export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'da
    */
   skipAnimation?: boolean;
 }
-declare function PieArcLabelPlot(props: PieArcLabelPlotProps): import("react/jsx-runtime").JSX.Element | null;
+declare function PieArcLabelPlot(props: PieArcLabelPlotProps): React.JSX.Element | null;
 declare namespace PieArcLabelPlot {
   var propTypes: any;
 }

package/PieChart/PieArcLabelPlot.d.ts

@@ -34,7 +34,7 @@ export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'da
    */
   skipAnimation?: boolean;
 }
-declare function PieArcLabelPlot(props: PieArcLabelPlotProps): import("react/jsx-runtime").JSX.Element | null;
+declare function PieArcLabelPlot(props: PieArcLabelPlotProps): React.JSX.Element | null;
 declare namespace PieArcLabelPlot {
   var propTypes: any;
 }

package/PieChart/PieArcPlot.d.mts

@@ -41,7 +41,7 @@ export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' |
    */
   skipAnimation?: boolean;
 }
-declare function PieArcPlot(props: PieArcPlotProps): import("react/jsx-runtime").JSX.Element | null;
+declare function PieArcPlot(props: PieArcPlotProps): React.JSX.Element | null;
 declare namespace PieArcPlot {
   var propTypes: any;
 }

package/PieChart/PieArcPlot.d.ts

@@ -41,7 +41,7 @@ export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' |
    */
   skipAnimation?: boolean;
 }
-declare function PieArcPlot(props: PieArcPlotProps): import("react/jsx-runtime").JSX.Element | null;
+declare function PieArcPlot(props: PieArcPlotProps): React.JSX.Element | null;
 declare namespace PieArcPlot {
   var propTypes: any;
 }