@mui/x-charts 9.0.0-beta.0 → 9.0.0-rc.0

package/ChartsYAxis/useAxisTicksProps.d.mts

@@ -3479,18 +3479,18 @@ export declare function useAxisTicksProps(inProps: ChartsYAxisProps): {
     onFocusCapture?: import("react").FocusEventHandler<SVGTextElement> | undefined;
     onBlur?: import("react").FocusEventHandler<SVGTextElement> | undefined;
     onBlurCapture?: import("react").FocusEventHandler<SVGTextElement> | undefined;
-    onChange?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onChangeCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
+    onChange?: import("react").ChangeEventHandler<SVGTextElement, Element> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<SVGTextElement, Element> | undefined;
     onBeforeInput?: import("react").InputEventHandler<SVGTextElement> | undefined;
-    onBeforeInputCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInput?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInputCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onReset?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onResetCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onSubmit?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onSubmitCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInvalid?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInvalidCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onInput?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onInputCapture?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onReset?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onSubmit?: import("react").SubmitEventHandler<SVGTextElement> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<SVGTextElement> | undefined;
+    onInvalid?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onLoad?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onLoadCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onError?: import("react").ReactEventHandler<SVGTextElement> | undefined;

package/ChartsYAxis/useAxisTicksProps.d.ts

@@ -3479,18 +3479,18 @@ export declare function useAxisTicksProps(inProps: ChartsYAxisProps): {
     onFocusCapture?: import("react").FocusEventHandler<SVGTextElement> | undefined;
     onBlur?: import("react").FocusEventHandler<SVGTextElement> | undefined;
     onBlurCapture?: import("react").FocusEventHandler<SVGTextElement> | undefined;
-    onChange?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onChangeCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
+    onChange?: import("react").ChangeEventHandler<SVGTextElement, Element> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<SVGTextElement, Element> | undefined;
     onBeforeInput?: import("react").InputEventHandler<SVGTextElement> | undefined;
-    onBeforeInputCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInput?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInputCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onReset?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onResetCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onSubmit?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onSubmitCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInvalid?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInvalidCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onInput?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onInputCapture?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onReset?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onSubmit?: import("react").SubmitEventHandler<SVGTextElement> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<SVGTextElement> | undefined;
+    onInvalid?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onLoad?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onLoadCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onError?: import("react").ReactEventHandler<SVGTextElement> | undefined;

package/LineChart/LineHighlightPlot.js

@@ -80,9 +80,10 @@ function LineHighlightPlot(props) {
           visibleStackedData,
           data,
           disableHighlight,
-          shape = 'circle'
+          shape = 'circle',
+          hidden
         } = series[seriesId];
-        if (disableHighlight || data[highlightedIndex] == null) {
+        if (hidden || disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
         if (highlightedAxisId !== xAxisId) {

package/LineChart/LineHighlightPlot.mjs

@@ -73,9 +73,10 @@ function LineHighlightPlot(props) {
           visibleStackedData,
           data,
           disableHighlight,
-          shape = 'circle'
+          shape = 'circle',
+          hidden
         } = series[seriesId];
-        if (disableHighlight || data[highlightedIndex] == null) {
+        if (hidden || disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
         if (highlightedAxisId !== xAxisId) {

package/LineChart/useLinePlotData.js

@@ -96,7 +96,7 @@ function useLinePlotData(xAxes, yAxes) {
         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 => {
           if (hidden) {
-            return yScale(yScale.domain()[0]);
+            return yScale(d.y[0]);
           }
           return yScale(d.y[1]);
         });

package/LineChart/useLinePlotData.mjs

@@ -89,7 +89,7 @@ export function useLinePlotData(xAxes, yAxes) {
         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 => {
           if (hidden) {
-            return yScale(yScale.domain()[0]);
+            return yScale(d.y[0]);
           }
           return yScale(d.y[1]);
         });

package/LineChart/useMarkPlotData.js

@@ -67,9 +67,9 @@ function useMarkPlotData(xAxes, yAxes) {
               continue;
             }
 
-            // The line fade animation move all the values to the min.
+            // The line fade animation move all the values to the series baseline.
             // So we need to do the same with mark in order for it to look nice.
-            const y = yScale(hidden ? yScale.domain()[0] : value);
+            const y = yScale(hidden ? visibleStackedData[index][0] : value);
             const xPos = xScale(x);
             if (!instance.isPointInside(xPos, y)) {
               continue;

package/LineChart/useMarkPlotData.mjs

@@ -59,9 +59,9 @@ export function useMarkPlotData(xAxes, yAxes) {
               continue;
             }
 
-            // The line fade animation move all the values to the min.
+            // The line fade animation move all the values to the series baseline.
             // So we need to do the same with mark in order for it to look nice.
-            const y = yScale(hidden ? yScale.domain()[0] : value);
+            const y = yScale(hidden ? visibleStackedData[index][0] : value);
             const xPos = xScale(x);
             if (!instance.isPointInside(xPos, y)) {
               continue;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.0.0-beta.0
+ * @mui/x-charts v9.0.0-rc.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.0.0-beta.0
+ * @mui/x-charts v9.0.0-rc.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/configInit.mjs

@@ -2,7 +2,7 @@ import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 let cartesianInstance;
 let polarInstance;
 class CartesianSeriesTypes {
-  types = (() => new Set())();
+  types = new Set();
   constructor() {
     if (cartesianInstance) {
       throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Charts: Only one CartesianSeriesTypes instance can be created. ' + 'This is a singleton class used internally for series type registration. ' + 'Use the existing instance instead of creating a new one.' : _formatErrorMessage(24));
@@ -17,7 +17,7 @@ class CartesianSeriesTypes {
   }
 }
 class PolarSeriesTypes {
-  types = (() => new Set())();
+  types = new Set();
   constructor() {
     if (polarInstance) {
       throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Charts: Only one PolarSeriesTypes instance can be created. ' + 'This is a singleton class used internally for series type registration. ' + 'Use the existing instance instead of creating a new one.' : _formatErrorMessage(25));

package/internals/plugins/corePlugins/useChartSeries/processSeries.d.mts

@@ -14,10 +14,12 @@ import type { IsItemVisibleFunction } from "../../featurePlugins/useChartVisibil
 export declare const defaultizeSeries: <SeriesType extends ChartSeriesType>({
   series,
   colors,
+  theme,
   seriesConfig
 }: {
   series: Readonly<AllSeriesType<SeriesType>[]>;
   colors: readonly string[];
+  theme: "light" | "dark";
   seriesConfig: ChartSeriesConfig<SeriesType>;
 }) => {
   defaultizedSeries: DefaultizedSeriesGroups<SeriesType>;

package/internals/plugins/corePlugins/useChartSeries/processSeries.d.ts

@@ -14,10 +14,12 @@ import type { IsItemVisibleFunction } from "../../featurePlugins/useChartVisibil
 export declare const defaultizeSeries: <SeriesType extends ChartSeriesType>({
   series,
   colors,
+  theme,
   seriesConfig
 }: {
   series: Readonly<AllSeriesType<SeriesType>[]>;
   colors: readonly string[];
+  theme: "light" | "dark";
   seriesConfig: ChartSeriesConfig<SeriesType>;
 }) => {
   defaultizedSeries: DefaultizedSeriesGroups<SeriesType>;

package/internals/plugins/corePlugins/useChartSeries/processSeries.js

@@ -16,13 +16,14 @@ var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/form
 const defaultizeSeries = ({
   series,
   colors,
+  theme,
   seriesConfig
 }) => {
   // Group series by type
   const seriesGroups = {};
   const idToType = new Map();
   series.forEach((seriesData, seriesIndex) => {
-    const seriesWithDefaultValues = seriesConfig[seriesData.type].getSeriesWithDefaultValues(seriesData, seriesIndex, colors);
+    const seriesWithDefaultValues = seriesConfig[seriesData.type].getSeriesWithDefaultValues(seriesData, seriesIndex, colors, theme);
     const id = seriesWithDefaultValues.id;
     if (seriesGroups[seriesData.type] === undefined) {
       seriesGroups[seriesData.type] = {

package/internals/plugins/corePlugins/useChartSeries/processSeries.mjs

@@ -9,13 +9,14 @@ import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 export const defaultizeSeries = ({
   series,
   colors,
+  theme,
   seriesConfig
 }) => {
   // Group series by type
   const seriesGroups = {};
   const idToType = new Map();
   series.forEach((seriesData, seriesIndex) => {
-    const seriesWithDefaultValues = seriesConfig[seriesData.type].getSeriesWithDefaultValues(seriesData, seriesIndex, colors);
+    const seriesWithDefaultValues = seriesConfig[seriesData.type].getSeriesWithDefaultValues(seriesData, seriesIndex, colors, theme);
     const id = seriesWithDefaultValues.id;
     if (seriesGroups[seriesData.type] === undefined) {
       seriesGroups[seriesData.type] = {

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.js

@@ -47,6 +47,7 @@ const useChartSeries = ({
     } = (0, _processSeries.defaultizeSeries)({
       series,
       colors: typeof colors === 'function' ? colors(theme) : colors,
+      theme,
       seriesConfig: store.state.seriesConfig.config
     });
     store.set('series', (0, _extends2.default)({}, store.state.series, {
@@ -90,6 +91,7 @@ useChartSeries.getInitialState = ({
   } = (0, _processSeries.defaultizeSeries)({
     series,
     colors: typeof colors === 'function' ? colors(theme) : colors,
+    theme,
     seriesConfig
   });
   return {

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.mjs

@@ -40,6 +40,7 @@ export const useChartSeries = ({
     } = defaultizeSeries({
       series,
       colors: typeof colors === 'function' ? colors(theme) : colors,
+      theme,
       seriesConfig: store.state.seriesConfig.config
     });
     store.set('series', _extends({}, store.state.series, {
@@ -82,6 +83,7 @@ useChartSeries.getInitialState = ({
   } = defaultizeSeries({
     series,
     colors: typeof colors === 'function' ? colors(theme) : colors,
+    theme,
     seriesConfig
   });
   return {

package/internals/plugins/corePlugins/useChartSeriesConfig/types/getSeriesWithDefaultValues.types.d.mts

@@ -1,3 +1,3 @@
 import type { ChartSeries, ChartSeriesType } from "../../../../../models/seriesType/config.mjs";
 import type { AllSeriesType } from "../../../../../models/seriesType/index.mjs";
-export type GetSeriesWithDefaultValues<SeriesType extends ChartSeriesType> = (series: AllSeriesType<SeriesType>, seriesIndex: number, colors: readonly string[]) => ChartSeries<SeriesType>;
+export type GetSeriesWithDefaultValues<SeriesType extends ChartSeriesType> = (series: AllSeriesType<SeriesType>, seriesIndex: number, colors: readonly string[], theme: 'light' | 'dark') => ChartSeries<SeriesType>;

package/internals/plugins/corePlugins/useChartSeriesConfig/types/getSeriesWithDefaultValues.types.d.ts

@@ -1,3 +1,3 @@
 import type { ChartSeries, ChartSeriesType } from "../../../../../models/seriesType/config.js";
 import type { AllSeriesType } from "../../../../../models/seriesType/index.js";
-export type GetSeriesWithDefaultValues<SeriesType extends ChartSeriesType> = (series: AllSeriesType<SeriesType>, seriesIndex: number, colors: readonly string[]) => ChartSeries<SeriesType>;
+export type GetSeriesWithDefaultValues<SeriesType extends ChartSeriesType> = (series: AllSeriesType<SeriesType>, seriesIndex: number, colors: readonly string[], theme: 'light' | 'dark') => ChartSeries<SeriesType>;

package/internals/plugins/corePlugins/useChartSeriesConfig/types/tooltipGetter.types.d.mts

@@ -12,11 +12,21 @@ export interface ItemTooltipValue<SeriesType extends ChartSeriesType> {
   /**
    * The value.
    */
-  value: SeriesType extends 'heatmap' ? number | null : ChartsSeriesConfig[SeriesType]['valueType'];
+  value: SeriesType extends 'heatmap' ? number | null : SeriesType extends 'ohlc' ? {
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+  } | null : ChartsSeriesConfig[SeriesType]['valueType'];
   /**
    * The value formatted with context set to "tooltip".
    */
-  formattedValue: string | null;
+  formattedValue: SeriesType extends 'ohlc' ? {
+    open: string | null;
+    high: string | null;
+    low: string | null;
+    close: string | null;
+  } : string | null;
   /**
    * The series mark type.
    */

package/internals/plugins/corePlugins/useChartSeriesConfig/types/tooltipGetter.types.d.ts

@@ -12,11 +12,21 @@ export interface ItemTooltipValue<SeriesType extends ChartSeriesType> {
   /**
    * The value.
    */
-  value: SeriesType extends 'heatmap' ? number | null : ChartsSeriesConfig[SeriesType]['valueType'];
+  value: SeriesType extends 'heatmap' ? number | null : SeriesType extends 'ohlc' ? {
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+  } | null : ChartsSeriesConfig[SeriesType]['valueType'];
   /**
    * The value formatted with context set to "tooltip".
    */
-  formattedValue: string | null;
+  formattedValue: SeriesType extends 'ohlc' ? {
+    open: string | null;
+    high: string | null;
+    low: string | null;
+    close: string | null;
+  } : string | null;
   /**
    * The series mark type.
    */

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.d.mts

@@ -2,7 +2,7 @@ import type { ChartPluginSignature } from "../../models/index.mjs";
 import type { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.mjs";
 import type { ComputedAxis, ScaleName, AxisId, ChartsAxisData, YAxis, XAxis, DefaultedXAxis, DefaultedYAxis, AxisItemIdentifier } from "../../../../models/axis.mjs";
 import type { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.mjs";
-import type { ZoomData, ZoomOptions, ZoomSliderShowTooltip } from "./zoom.types.mjs";
+import type { ZoomData, ZoomOptions, ZoomSliderPreviewOptions, ZoomSliderShowTooltip } from "./zoom.types.mjs";
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.mjs";
 import type { ChartsAxisProps } from "../../../../ChartsAxis/index.mjs";
 import type { UseChartBrushSignature } from "../useChartBrush/index.mjs";
@@ -79,8 +79,9 @@ export type UseChartCartesianAxisDefaultizedParameters<S extends ScaleName = Sca
   defaultizedXAxis: DefaultedXAxis<S>[];
   defaultizedYAxis: DefaultedYAxis<S>[];
 };
-export interface DefaultedZoomSliderOptions extends Omit<NonNullable<Required<ZoomOptions['slider']>>, 'showTooltip'> {
+export interface DefaultedZoomSliderOptions extends Omit<NonNullable<Required<ZoomOptions['slider']>>, 'showTooltip' | 'preview'> {
   showTooltip: ZoomSliderShowTooltip;
+  preview: boolean | ZoomSliderPreviewOptions;
 }
 export interface DefaultizedZoomOptions extends Required<Omit<ZoomOptions, 'slider'>> {
   axisId: AxisId;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.d.ts

@@ -2,7 +2,7 @@ import type { ChartPluginSignature } from "../../models/index.js";
 import type { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.js";
 import type { ComputedAxis, ScaleName, AxisId, ChartsAxisData, YAxis, XAxis, DefaultedXAxis, DefaultedYAxis, AxisItemIdentifier } from "../../../../models/axis.js";
 import type { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.js";
-import type { ZoomData, ZoomOptions, ZoomSliderShowTooltip } from "./zoom.types.js";
+import type { ZoomData, ZoomOptions, ZoomSliderPreviewOptions, ZoomSliderShowTooltip } from "./zoom.types.js";
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.js";
 import type { ChartsAxisProps } from "../../../../ChartsAxis/index.js";
 import type { UseChartBrushSignature } from "../useChartBrush/index.js";
@@ -79,8 +79,9 @@ export type UseChartCartesianAxisDefaultizedParameters<S extends ScaleName = Sca
   defaultizedXAxis: DefaultedXAxis<S>[];
   defaultizedYAxis: DefaultedYAxis<S>[];
 };
-export interface DefaultedZoomSliderOptions extends Omit<NonNullable<Required<ZoomOptions['slider']>>, 'showTooltip'> {
+export interface DefaultedZoomSliderOptions extends Omit<NonNullable<Required<ZoomOptions['slider']>>, 'showTooltip' | 'preview'> {
   showTooltip: ZoomSliderShowTooltip;
+  preview: boolean | ZoomSliderPreviewOptions;
 }
 export interface DefaultizedZoomOptions extends Required<Omit<ZoomOptions, 'slider'>> {
   axisId: AxisId;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPreview.selectors.js

@@ -32,14 +32,16 @@ function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
     bottom: mainChartDrawingArea.height
   };
 }
-const selectorChartPreviewXScales = exports.selectorChartPreviewXScales = (0, _store.createSelectorMemoized)(_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartNormalizedXScales, function selectorChartPreviewXScales(xAxes, chartDrawingArea, zoomOptions, normalizedXScales, axisId) {
+const selectorChartPreviewXScales = exports.selectorChartPreviewXScales = (0, _store.createSelectorMemoized)(_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartXAxisWithDomains, function selectorChartPreviewXScales(xAxes, chartDrawingArea, zoomOptions, {
+  domains: unfilteredDomains
+}, axisId) {
   const hasAxis = xAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'x' : 'y', chartDrawingArea);
   const options = zoomOptions[axisId];
   const scales = {};
   xAxes?.forEach(eachAxis => {
     const axis = eachAxis;
-    const scale = normalizedXScales[axis.id].copy();
+    const scale = (0, _getAxisScale.getNormalizedAxisScale)(axis, unfilteredDomains[axis.id].domain);
     const range = (0, _getAxisScale.getRange)(drawingArea, 'x', axis);
     const zoomedRange = (0, _zoom.zoomScaleRange)(range, [options.minStart, options.maxEnd]);
     scale.range(zoomedRange);
@@ -76,14 +78,16 @@ const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXA
   }
   return computedAxes.axis;
 });
-const selectorChartPreviewYScales = exports.selectorChartPreviewYScales = (0, _store.createSelectorMemoized)(_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartNormalizedYScales, function selectorChartPreviewYScales(yAxes, chartDrawingArea, zoomOptions, normalizedYScales, axisId) {
+const selectorChartPreviewYScales = exports.selectorChartPreviewYScales = (0, _store.createSelectorMemoized)(_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartYAxisWithDomains, function selectorChartPreviewYScales(yAxes, chartDrawingArea, zoomOptions, {
+  domains: unfilteredDomains
+}, axisId) {
   const hasAxis = yAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'y' : 'x', chartDrawingArea);
   const options = zoomOptions[axisId];
   const scales = {};
   yAxes?.forEach(eachAxis => {
     const axis = eachAxis;
-    const scale = normalizedYScales[axis.id].copy();
+    const scale = (0, _getAxisScale.getNormalizedAxisScale)(axis, unfilteredDomains[axis.id].domain);
     let range = (0, _getAxisScale.getRange)(drawingArea, 'y', axis);
     if ((0, _scaleGuards.isOrdinalScale)(scale)) {
       range = range.reverse();

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPreview.selectors.mjs

@@ -2,10 +2,10 @@ import { createSelectorMemoized } from '@mui/x-internals/store';
 import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.mjs";
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.mjs";
 import { computeAxisValue } from "./computeAxisValue.mjs";
-import { selectorChartNormalizedXScales, selectorChartNormalizedYScales, selectorChartXAxisWithDomains, selectorChartYAxisWithDomains, selectorChartZoomOptionsLookup } from "./useChartCartesianAxisRendering.selectors.mjs";
+import { selectorChartXAxisWithDomains, selectorChartYAxisWithDomains, selectorChartZoomOptionsLookup } from "./useChartCartesianAxisRendering.selectors.mjs";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.mjs";
 import { ZOOM_SLIDER_PREVIEW_SIZE } from "../../../constants.mjs";
-import { getRange } from "./getAxisScale.mjs";
+import { getNormalizedAxisScale, getRange } from "./getAxisScale.mjs";
 import { zoomScaleRange } from "./zoom.mjs";
 import { isOrdinalScale } from "../../../scaleGuards.mjs";
 import { selectorChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.mjs";
@@ -26,14 +26,16 @@ function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
     bottom: mainChartDrawingArea.height
   };
 }
-export const selectorChartPreviewXScales = createSelectorMemoized(selectorChartRawXAxis, selectorChartDrawingArea, selectorChartZoomOptionsLookup, selectorChartNormalizedXScales, function selectorChartPreviewXScales(xAxes, chartDrawingArea, zoomOptions, normalizedXScales, axisId) {
+export const selectorChartPreviewXScales = createSelectorMemoized(selectorChartRawXAxis, selectorChartDrawingArea, selectorChartZoomOptionsLookup, selectorChartXAxisWithDomains, function selectorChartPreviewXScales(xAxes, chartDrawingArea, zoomOptions, {
+  domains: unfilteredDomains
+}, axisId) {
   const hasAxis = xAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'x' : 'y', chartDrawingArea);
   const options = zoomOptions[axisId];
   const scales = {};
   xAxes?.forEach(eachAxis => {
     const axis = eachAxis;
-    const scale = normalizedXScales[axis.id].copy();
+    const scale = getNormalizedAxisScale(axis, unfilteredDomains[axis.id].domain);
     const range = getRange(drawingArea, 'x', axis);
     const zoomedRange = zoomScaleRange(range, [options.minStart, options.maxEnd]);
     scale.range(zoomedRange);
@@ -70,14 +72,16 @@ export const selectorChartPreviewComputedXAxis = createSelectorMemoized(selector
   }
   return computedAxes.axis;
 });
-export const selectorChartPreviewYScales = createSelectorMemoized(selectorChartRawYAxis, selectorChartDrawingArea, selectorChartZoomOptionsLookup, selectorChartNormalizedYScales, function selectorChartPreviewYScales(yAxes, chartDrawingArea, zoomOptions, normalizedYScales, axisId) {
+export const selectorChartPreviewYScales = createSelectorMemoized(selectorChartRawYAxis, selectorChartDrawingArea, selectorChartZoomOptionsLookup, selectorChartYAxisWithDomains, function selectorChartPreviewYScales(yAxes, chartDrawingArea, zoomOptions, {
+  domains: unfilteredDomains
+}, axisId) {
   const hasAxis = yAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'y' : 'x', chartDrawingArea);
   const options = zoomOptions[axisId];
   const scales = {};
   yAxes?.forEach(eachAxis => {
     const axis = eachAxis;
-    const scale = normalizedYScales[axis.id].copy();
+    const scale = getNormalizedAxisScale(axis, unfilteredDomains[axis.id].domain);
     let range = getRange(drawingArea, 'y', axis);
     if (isOrdinalScale(scale)) {
       range = range.reverse();

package/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.d.mts

@@ -1,4 +1,5 @@
 import { type AxisId } from "../../../../models/axis.mjs";
+import { type SeriesId } from "../../../../models/seriesType/common.mjs";
 import type { ExtremumFilter } from "./useChartCartesianAxis.types.mjs";
 export type ZoomData = {
   /**
@@ -96,8 +97,16 @@ export interface ZoomSliderOptions {
   showTooltip?: ZoomSliderShowTooltip;
   /**
    * If `true`, a preview of the chart will be shown in the slider.
+   * Can also be an object to configure which series are shown in the preview.
    */
-  preview?: boolean;
+  preview?: boolean | ZoomSliderPreviewOptions;
+}
+export interface ZoomSliderPreviewOptions {
+  /**
+   * The series IDs to display in the preview.
+   * If not provided, all series attached to this axis will be shown.
+   */
+  seriesIds?: SeriesId[];
 }
 export type ZoomAxisFilters = Record<AxisId, ExtremumFilter>;
 export type ZoomMap = Map<AxisId, ZoomData>;

package/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.d.ts

@@ -1,4 +1,5 @@
 import { type AxisId } from "../../../../models/axis.js";
+import { type SeriesId } from "../../../../models/seriesType/common.js";
 import type { ExtremumFilter } from "./useChartCartesianAxis.types.js";
 export type ZoomData = {
   /**
@@ -96,8 +97,16 @@ export interface ZoomSliderOptions {
   showTooltip?: ZoomSliderShowTooltip;
   /**
    * If `true`, a preview of the chart will be shown in the slider.
+   * Can also be an object to configure which series are shown in the preview.
    */
-  preview?: boolean;
+  preview?: boolean | ZoomSliderPreviewOptions;
+}
+export interface ZoomSliderPreviewOptions {
+  /**
+   * The series IDs to display in the preview.
+   * If not provided, all series attached to this axis will be shown.
+   */
+  seriesIds?: SeriesId[];
 }
 export type ZoomAxisFilters = Record<AxisId, ExtremumFilter>;
 export type ZoomMap = Map<AxisId, ZoomData>;

package/locales/elGR.d.mts

@@ -184,6 +184,10 @@ export declare const elGR: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/elGR.d.ts

@@ -184,6 +184,10 @@ export declare const elGR: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/elGR.js

@@ -204,11 +204,15 @@ const elGRLocaleText = exports.elGRLocaleText = {
   //   high,
   //   low,
   //   close,
+  //   formattedOpen,
+  //   formattedHigh,
+  //   formattedLow,
+  //   formattedClose,
   //   formattedDate,
   //   seriesLabel
   // }) {
   //   const hasValues = open !== null && high !== null && low !== null && close !== null;
-  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   // },
 };
 const elGR = exports.elGR = (0, _getChartsLocalization.getChartsLocalization)(elGRLocaleText);

package/locales/elGR.mjs

@@ -198,11 +198,15 @@ export const elGRLocaleText = {
   //   high,
   //   low,
   //   close,
+  //   formattedOpen,
+  //   formattedHigh,
+  //   formattedLow,
+  //   formattedClose,
   //   formattedDate,
   //   seriesLabel
   // }) {
   //   const hasValues = open !== null && high !== null && low !== null && close !== null;
-  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   // },
 };
 export const elGR = getChartsLocalization(elGRLocaleText);

package/locales/enUS.d.mts

@@ -185,6 +185,10 @@ export declare const enUS: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/enUS.d.ts

@@ -185,6 +185,10 @@ export declare const enUS: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/enUS.js

@@ -204,11 +204,15 @@ const enUSLocaleText = exports.enUSLocaleText = {
     high,
     low,
     close,
+    formattedOpen,
+    formattedHigh,
+    formattedLow,
+    formattedClose,
     formattedDate,
     seriesLabel
   }) {
     const hasValues = open !== null && high !== null && low !== null && close !== null;
-    return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+    return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   }
 };
 const DEFAULT_LOCALE = exports.DEFAULT_LOCALE = enUSLocaleText;