@mui/x-charts 8.27.0 → 9.0.0-alpha.1

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.js

@@ -1,16 +1,29 @@
 import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
-import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
-export const selectorChartLeftAxisSize = createSelector(selectorChartRawYAxis, function selectorChartLeftAxisSize(yAxis) {
-  return (yAxis ?? []).reduce((acc, axis) => axis.position === 'left' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0);
+import { selectorChartCartesianAxesGap, selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
+function selectAxisSize(axes, axesGap, position) {
+  let axesSize = 0;
+  let nbOfAxes = 0;
+  for (const axis of axes ?? []) {
+    if (axis.position !== position) {
+      continue;
+    }
+    const axisSize = position === 'top' || position === 'bottom' ? axis.height : axis.width;
+    axesSize += (axisSize || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0);
+    nbOfAxes += 1;
+  }
+  return axesSize + axesGap * Math.max(0, nbOfAxes - 1);
+}
+export const selectorChartLeftAxisSize = createSelector(selectorChartRawYAxis, selectorChartCartesianAxesGap, function selectorChartLeftAxisSize(yAxis, axesGap) {
+  return selectAxisSize(yAxis, axesGap, 'left');
 });
-export const selectorChartRightAxisSize = createSelector(selectorChartRawYAxis, function selectorChartRightAxisSize(yAxis) {
-  return (yAxis ?? []).reduce((acc, axis) => axis.position === 'right' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0);
+export const selectorChartRightAxisSize = createSelector(selectorChartRawYAxis, selectorChartCartesianAxesGap, function selectorChartRightAxisSize(yAxis, axesGap) {
+  return selectAxisSize(yAxis, axesGap, 'right');
 });
-export const selectorChartTopAxisSize = createSelector(selectorChartRawXAxis, function selectorChartTopAxisSize(xAxis) {
-  return (xAxis ?? []).reduce((acc, axis) => axis.position === 'top' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0);
+export const selectorChartTopAxisSize = createSelector(selectorChartRawXAxis, selectorChartCartesianAxesGap, function selectorChartTopAxisSize(xAxis, axesGap) {
+  return selectAxisSize(xAxis, axesGap, 'top');
 });
-export const selectorChartBottomAxisSize = createSelector(selectorChartRawXAxis, function selectorChartBottomAxisSize(xAxis) {
-  return (xAxis ?? []).reduce((acc, axis) => axis.position === 'bottom' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0);
+export const selectorChartBottomAxisSize = createSelector(selectorChartRawXAxis, selectorChartCartesianAxesGap, function selectorChartBottomAxisSize(xAxis, axesGap) {
+  return selectAxisSize(xAxis, axesGap, 'bottom');
 });
 export const selectorChartAxisSizes = createSelectorMemoized(selectorChartLeftAxisSize, selectorChartRightAxisSize, selectorChartTopAxisSize, selectorChartBottomAxisSize, function selectorChartAxisSizes(left, right, top, bottom) {
   return {

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js

@@ -12,7 +12,7 @@ import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/u
 import { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
 import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
 import { getAxisIndex } from "./getAxisValue.js";
-import { getSVGPoint } from "../../../getSVGPoint.js";
+import { getChartPoint } from "../../../getChartPoint.js";
 import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.js";
 import { selectorChartAxisInteraction } from "./useChartCartesianInteraction.selectors.js";
 import { checkHasInteractionPlugin } from "../useChartInteraction/checkHasInteractionPlugin.js";
@@ -20,15 +20,18 @@ const AXIS_CLICK_SERIES_TYPES = new Set(['bar', 'rangeBar', 'line']);
 export const useChartCartesianAxis = ({
   params,
   store,
-  seriesConfig,
-  svgRef,
   instance
 }) => {
+  const {
+    svgRef
+  } = instance;
   const {
     xAxis,
     yAxis,
     dataset,
-    onHighlightedAxisChange
+    onHighlightedAxisChange,
+    onTooltipAxisChange,
+    axesGap
   } = params;
   if (process.env.NODE_ENV !== 'production') {
     const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
@@ -55,11 +58,23 @@ export const useChartCartesianAxis = ({
     controlled: params.highlightedAxis,
     defaultValue: undefined
   });
+  useAssertModelConsistency({
+    warningPrefix: 'MUI X Charts',
+    componentName: 'Chart',
+    propName: 'tooltipAxis',
+    controlled: params.tooltipAxis,
+    defaultValue: undefined
+  });
   useEnhancedEffect(() => {
     if (params.highlightedAxis !== undefined) {
       store.set('controlledCartesianAxisHighlight', params.highlightedAxis);
     }
   }, [store, params.highlightedAxis]);
+  useEnhancedEffect(() => {
+    if (params.tooltipAxis !== undefined) {
+      store.set('controlledCartesianAxisTooltip', params.tooltipAxis);
+    }
+  }, [store, params.tooltipAxis]);
 
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartCartesianAxis`
   // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
@@ -70,28 +85,31 @@ export const useChartCartesianAxis = ({
       return;
     }
     store.set('cartesianAxis', {
-      x: defaultizeXAxis(xAxis, dataset),
-      y: defaultizeYAxis(yAxis, dataset)
+      axesGap,
+      x: defaultizeXAxis(xAxis, dataset, axesGap),
+      y: defaultizeYAxis(yAxis, dataset, axesGap)
     });
-  }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store]);
+  }, [drawingArea, xAxis, yAxis, dataset, axesGap, store]);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
   useStoreEffect(store, selectorChartAxisInteraction, (prevAxisInteraction, nextAxisInteraction) => {
-    if (!onHighlightedAxisChange) {
+    if (!onHighlightedAxisChange && !onTooltipAxisChange) {
       return;
     }
     if (Object.is(prevAxisInteraction, nextAxisInteraction)) {
       return;
     }
     if (prevAxisInteraction.length !== nextAxisInteraction.length) {
-      onHighlightedAxisChange(nextAxisInteraction);
+      onHighlightedAxisChange?.(nextAxisInteraction);
+      onTooltipAxisChange?.(nextAxisInteraction);
       return;
     }
     if (prevAxisInteraction?.some(({
       axisId,
       dataIndex
     }, itemIndex) => nextAxisInteraction[itemIndex].axisId !== axisId || nextAxisInteraction[itemIndex].dataIndex !== dataIndex)) {
-      onHighlightedAxisChange(nextAxisInteraction);
+      onHighlightedAxisChange?.(nextAxisInteraction);
+      onTooltipAxisChange?.(nextAxisInteraction);
     }
   });
   const hasInteractionPlugin = checkHasInteractionPlugin(instance);
@@ -120,7 +138,7 @@ export const useChartCartesianAxis = ({
     const gestureHandler = event => {
       const srvEvent = event.detail.srcEvent;
       const target = event.detail.target;
-      const svgPoint = getSVGPoint(element, srvEvent);
+      const svgPoint = getChartPoint(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.
@@ -154,7 +172,7 @@ export const useChartCartesianAxis = ({
     const axisClickHandler = instance.addInteractionListener('tap', event => {
       let dataIndex = null;
       let isXAxis = false;
-      const svgPoint = getSVGPoint(element, event.detail.srcEvent);
+      const svgPoint = getChartPoint(element, event.detail.srcEvent);
       const xIndex = getAxisIndex(xAxisWithScale[usedXAxis], svgPoint.x);
       isXAxis = xIndex !== -1;
       dataIndex = isXAxis ? xIndex : getAxisIndex(yAxisWithScale[usedYAxis], svgPoint.y);
@@ -202,20 +220,25 @@ useChartCartesianAxis.params = {
   onAxisClick: true,
   disableAxisListener: true,
   onHighlightedAxisChange: true,
-  highlightedAxis: true
+  highlightedAxis: true,
+  onTooltipAxisChange: true,
+  tooltipAxis: true,
+  axesGap: true
 };
 useChartCartesianAxis.getDefaultizedParams = ({
   params
 }) => {
   return _extends({}, params, {
+    axesGap: params.axesGap ?? 0,
     colors: params.colors ?? rainbowSurgePalette,
     theme: params.theme ?? 'light',
-    defaultizedXAxis: defaultizeXAxis(params.xAxis, params.dataset),
-    defaultizedYAxis: defaultizeYAxis(params.yAxis, params.dataset)
+    defaultizedXAxis: defaultizeXAxis(params.xAxis, params.dataset, params.axesGap ?? 0),
+    defaultizedYAxis: defaultizeYAxis(params.yAxis, params.dataset, params.axesGap ?? 0)
   });
 };
 useChartCartesianAxis.getInitialState = params => _extends({
   cartesianAxis: {
+    axesGap: params.axesGap,
     x: params.defaultizedXAxis,
     y: params.defaultizedYAxis
   }

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

@@ -50,14 +50,32 @@ export interface UseChartCartesianAxisParameters<S extends ScaleName = ScaleName
    * Identified by the axis id, and data index.
    */
   highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * 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.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
   /**
    * If `true`, the charts will not listen to the mouse move event.
    * It might break interactive features, but will improve performance.
    * @default false
    */
   disableAxisListener?: boolean;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
 }
-export type UseChartCartesianAxisDefaultizedParameters<S extends ScaleName = ScaleName> = UseChartCartesianAxisParameters<S> & {
+export type UseChartCartesianAxisDefaultizedParameters<S extends ScaleName = ScaleName> = UseChartCartesianAxisParameters<S> & Required<Pick<UseChartCartesianAxisParameters<S>, 'axesGap'>> & {
   defaultizedXAxis: DefaultedXAxis<S>[];
   defaultizedYAxis: DefaultedYAxis<S>[];
 };
@@ -79,6 +97,7 @@ export interface UseChartCartesianAxisState {
     zoomData: readonly ZoomData[];
   };
   cartesianAxis: {
+    axesGap: number;
     x: DefaultedXAxis[];
     y: DefaultedYAxis[];
   };
@@ -86,6 +105,10 @@ export interface UseChartCartesianAxisState {
    * The controlled axis item highlighted.
    */
   controlledCartesianAxisHighlight?: AxisItemIdentifier[];
+  /**
+   * The controlled axis tooltip.
+   */
+  controlledCartesianAxisTooltip?: AxisItemIdentifier[];
 }
 export type ExtremumFilter = (value: {
   x: number | Date | string | null;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisLayout.selectors.d.ts

@@ -2,10 +2,12 @@ import { type UseChartCartesianAxisSignature } from "./useChartCartesianAxis.typ
 import { type DefaultedXAxis, type DefaultedYAxis } from "../../../../models/axis.js";
 import { type ChartState } from "../../models/chart.js";
 export declare const selectorChartCartesianAxisState: (state: ChartState<[], [UseChartCartesianAxisSignature]>) => {
+  axesGap: number;
   x: DefaultedXAxis[];
   y: DefaultedYAxis[];
 } | undefined;
 export type SelectorChartRawXAxisType = <State extends ChartState<[], [UseChartCartesianAxisSignature]>>(state: State) => DefaultedXAxis[] | undefined;
 export declare const selectorChartRawXAxis: SelectorChartRawXAxisType;
 export type SelectorChartRawYAxisType = <State extends ChartState<[], [UseChartCartesianAxisSignature]>>(state: State) => DefaultedYAxis[] | undefined;
-export declare const selectorChartRawYAxis: SelectorChartRawYAxisType;
+export declare const selectorChartRawYAxis: SelectorChartRawYAxisType;
+export declare const selectorChartCartesianAxesGap: (state: ChartState<[], [UseChartCartesianAxisSignature]>) => number;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisLayout.selectors.js

@@ -1,3 +1,4 @@
 export const selectorChartCartesianAxisState = state => state.cartesianAxis;
 export const selectorChartRawXAxis = state => state.cartesianAxis?.x;
-export const selectorChartRawYAxis = state => state.cartesianAxis?.y;
+export const selectorChartRawYAxis = state => state.cartesianAxis?.y;
+export const selectorChartCartesianAxesGap = state => state.cartesianAxis?.axesGap ?? 0;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.d.ts

@@ -1,4 +1,4 @@
 import { type BarItemIdentifier } from "../../../../models/index.js";
-export declare const selectorBarItemAtPosition: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorBarItemAtPosition: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, svgPoint: Pick<DOMPoint, "x" | "y">) => BarItemIdentifier | undefined;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPreview.selectors.d.ts

@@ -1,13 +1,13 @@
 import { type AxisId, type D3Scale } from "../../../../models/axis.js";
-export declare const selectorChartPreviewXScales: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartPreviewXScales: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, axisId: AxisId) => Record<AxisId, D3Scale>;
-export declare const selectorChartPreviewComputedXAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartPreviewComputedXAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, axisId: AxisId) => import("./useChartCartesianAxis.types.js").ComputedAxisConfig<import("../../../index.js").ChartsXAxisProps>;
-export declare const selectorChartPreviewYScales: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartPreviewYScales: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, axisId: AxisId) => Record<AxisId, D3Scale>;
-export declare const selectorChartPreviewComputedYAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartPreviewComputedYAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, axisId: AxisId) => import("./useChartCartesianAxis.types.js").ComputedAxisConfig<import("../../../index.js").ChartsYAxisProps>;

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

@@ -1,6 +1,6 @@
 import { createSelectorMemoized } from '@mui/x-internals/store';
 import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
-import { selectorChartSeriesConfig, selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
 import { computeAxisValue } from "./computeAxisValue.js";
 import { selectorChartNormalizedXScales, selectorChartNormalizedYScales, selectorChartXAxisWithDomains, selectorChartYAxisWithDomains, selectorChartZoomOptionsLookup } from "./useChartCartesianAxisRendering.selectors.js";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.js";
@@ -8,6 +8,7 @@ import { ZOOM_SLIDER_PREVIEW_SIZE } from "../../../constants.js";
 import { getRange } from "./getAxisScale.js";
 import { zoomScaleRange } from "./zoom.js";
 import { isOrdinalScale } from "../../../scaleGuards.js";
+import { selectorChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.js";
 function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
   return axisDirection === 'x' ? {
     left: 0,