@mui/x-charts 9.8.0 → 9.10.0

package/LineChart/MarkPlot.js

@@ -135,7 +135,7 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes /* remove-proptypes *
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
+   * @param {LineItemClickIdentifier} lineItemIdentifier The line mark item identifier.
    */
   onItemClick: _propTypes.default.func,
   /**

package/LineChart/MarkPlot.mjs

@@ -128,7 +128,7 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes /* remove-proptypes *
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
+   * @param {LineItemClickIdentifier} lineItemIdentifier The line mark item identifier.
    */
   onItemClick: PropTypes.func,
   /**

package/LineChart/lineClasses.d.mts

@@ -22,4 +22,4 @@ export interface UseUtilityClassesOptions {
   skipAnimation?: boolean;
   classes?: Partial<LineClasses>;
 }
-export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"line" | "area" | "mark" | "highlight" | "areaPlot" | "linePlot" | "markPlot", string>;
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"area" | "areaPlot" | "highlight" | "line" | "linePlot" | "mark" | "markPlot", string>;

package/LineChart/lineClasses.d.ts

@@ -22,4 +22,4 @@ export interface UseUtilityClassesOptions {
   skipAnimation?: boolean;
   classes?: Partial<LineClasses>;
 }
-export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"line" | "area" | "mark" | "highlight" | "areaPlot" | "linePlot" | "markPlot", string>;
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"area" | "areaPlot" | "highlight" | "line" | "linePlot" | "mark" | "markPlot", string>;

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/useLineItemClickHandler.d.mts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { LineItemClickIdentifier } from "../models/seriesType/line.mjs";
+import type { SeriesId } from "../models/seriesType/common.mjs";
+/**
+ * Creates a click handler for line and area paths that enriches the item
+ * identifier with the `dataIndex` of the closest data point along the x-axis.
+ *
+ * The index is derived from the click position, using the same logic as the
+ * axis interaction (tooltip, highlight, `onAxisClick`). The callback is not
+ * fired when the click position cannot be associated with a data point.
+ */
+export declare function useLineItemClickHandler(onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void): ((event: React.MouseEvent<SVGElement, MouseEvent>, seriesId: SeriesId) => void) | undefined;

package/LineChart/useLineItemClickHandler.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { LineItemClickIdentifier } from "../models/seriesType/line.js";
+import type { SeriesId } from "../models/seriesType/common.js";
+/**
+ * Creates a click handler for line and area paths that enriches the item
+ * identifier with the `dataIndex` of the closest data point along the x-axis.
+ *
+ * The index is derived from the click position, using the same logic as the
+ * axis interaction (tooltip, highlight, `onAxisClick`). The callback is not
+ * fired when the click position cannot be associated with a data point.
+ */
+export declare function useLineItemClickHandler(onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void): ((event: React.MouseEvent<SVGElement, MouseEvent>, seriesId: SeriesId) => void) | undefined;

package/LineChart/useLineItemClickHandler.js

@@ -0,0 +1,54 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLineItemClickHandler = useLineItemClickHandler;
+var React = _interopRequireWildcard(require("react"));
+var _useChartsLayerContainerRef = require("../hooks/useChartsLayerContainerRef");
+var _useAxis = require("../hooks/useAxis");
+var _useLineSeries = require("../hooks/useLineSeries");
+var _getChartPoint = require("../internals/getChartPoint");
+var _getAxisValue = require("../internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue");
+/**
+ * Creates a click handler for line and area paths that enriches the item
+ * identifier with the `dataIndex` of the closest data point along the x-axis.
+ *
+ * The index is derived from the click position, using the same logic as the
+ * axis interaction (tooltip, highlight, `onAxisClick`). The callback is not
+ * fired when the click position cannot be associated with a data point.
+ */
+function useLineItemClickHandler(onItemClick) {
+  const chartsLayerContainerRef = (0, _useChartsLayerContainerRef.useChartsLayerContainerRef)();
+  const {
+    xAxis: xAxes,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const seriesData = (0, _useLineSeries.useLineSeriesContext)();
+  const defaultXAxisId = xAxisIds[0];
+  return React.useMemo(() => {
+    if (!onItemClick) {
+      return undefined;
+    }
+    return (event, seriesId) => {
+      const element = chartsLayerContainerRef.current;
+      const xAxisId = seriesData?.series[seriesId]?.xAxisId ?? defaultXAxisId;
+      const xAxis = xAxisId === undefined ? undefined : xAxes[xAxisId];
+      if (element === null || xAxis === undefined) {
+        return;
+      }
+      const point = (0, _getChartPoint.getChartPoint)(element, event);
+      const dataIndex = (0, _getAxisValue.getAxisIndex)(xAxis, point.x);
+      if (dataIndex === -1) {
+        return;
+      }
+      onItemClick(event, {
+        type: 'line',
+        seriesId,
+        dataIndex
+      });
+    };
+  }, [onItemClick, chartsLayerContainerRef, seriesData, defaultXAxisId, xAxes]);
+}

package/LineChart/useLineItemClickHandler.mjs

@@ -0,0 +1,48 @@
+'use client';
+
+import * as React from 'react';
+import { useChartsLayerContainerRef } from "../hooks/useChartsLayerContainerRef.mjs";
+import { useXAxes } from "../hooks/useAxis.mjs";
+import { useLineSeriesContext } from "../hooks/useLineSeries.mjs";
+import { getChartPoint } from "../internals/getChartPoint.mjs";
+import { getAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.mjs";
+/**
+ * Creates a click handler for line and area paths that enriches the item
+ * identifier with the `dataIndex` of the closest data point along the x-axis.
+ *
+ * The index is derived from the click position, using the same logic as the
+ * axis interaction (tooltip, highlight, `onAxisClick`). The callback is not
+ * fired when the click position cannot be associated with a data point.
+ */
+export function useLineItemClickHandler(onItemClick) {
+  const chartsLayerContainerRef = useChartsLayerContainerRef();
+  const {
+    xAxis: xAxes,
+    xAxisIds
+  } = useXAxes();
+  const seriesData = useLineSeriesContext();
+  const defaultXAxisId = xAxisIds[0];
+  return React.useMemo(() => {
+    if (!onItemClick) {
+      return undefined;
+    }
+    return (event, seriesId) => {
+      const element = chartsLayerContainerRef.current;
+      const xAxisId = seriesData?.series[seriesId]?.xAxisId ?? defaultXAxisId;
+      const xAxis = xAxisId === undefined ? undefined : xAxes[xAxisId];
+      if (element === null || xAxis === undefined) {
+        return;
+      }
+      const point = getChartPoint(element, event);
+      const dataIndex = getAxisIndex(xAxis, point.x);
+      if (dataIndex === -1) {
+        return;
+      }
+      onItemClick(event, {
+        type: 'line',
+        seriesId,
+        dataIndex
+      });
+    };
+  }, [onItemClick, chartsLayerContainerRef, seriesData, defaultXAxisId, xAxes]);
+}

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;
 }