@mui/x-charts 8.17.0 → 8.19.0

package/esm/hooks/useAxis.js

@@ -7,12 +7,17 @@ import { useStore } from "../internals/store/useStore.js";
 /**
  * Get all the x-axes.
  *
- * - `xAxis` is an object with the shape `{ [axisId]: axis }`.
- * - `xAxisIds` is an array of axis IDs.
+ * Returns all X axes configured in the chart along with their IDs.
+ * This is useful when you need to iterate over multiple axes or access all axis configurations at once.
  *
- * If access to a specific X axis is needed, use the `useXAxis` hook instead.
+ * @returns An object containing:
+ *   - `xAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `xAxisIds`: An array of all X axis IDs in the chart
  *
- * @returns `{ xAxis, xAxisIds }` - The x-axes and their IDs.
+ * @example
+ * const { xAxis, xAxisIds } = useXAxes();
+ *
+ * @see `useXAxis` for accessing a single X axis
  */
 export function useXAxes() {
   const store = useStore();
@@ -29,12 +34,17 @@ export function useXAxes() {
 /**
  * Get all the y-axes.
  *
- * - `yAxis` is an object with the shape `{ [axisId]: axis }`.
- * - `yAxisIds` is an array of axis IDs.
+ * Returns all Y axes configured in the chart along with their IDs.
+ * This is useful when you need to iterate over multiple axes or access all axis configurations at once.
+ *
+ * @returns An object containing:
+ *   - `yAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `yAxisIds`: An array of all Y axis IDs in the chart
  *
- * If access to a specific Y axis is needed, use the `useYAxis` hook instead.
+ * @example
+ * const { yAxis, yAxisIds } = useYAxes();
  *
- * @returns `{ yAxis, yAxisIds }` - The y-axes and their IDs.
+ * @see `useYAxis` for accessing a single Y axis
  */
 export function useYAxes() {
   const store = useStore();
@@ -49,9 +59,20 @@ export function useYAxes() {
 }
 
 /**
- * Get the X axis.
- * @param {AxisId | undefined} axisId - If provided returns the x axis with axisId, else returns the values for the default x axis.
- * @returns The X axis.
+ * Get a specific X axis or the default X axis.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `xAxis` prop
+ *   - Undefined to get the default (first) X axis
+ * @returns The configuration for a single X axis.
+ *
+ * @example
+ * // Get the default X axis
+ * const xAxis = useXAxis();
+ *
+ * @example
+ * // Get a specific X axis by string ID
+ * const xAxis = useXAxis('revenue');
  */
 export function useXAxis(axisId) {
   const store = useStore();
@@ -64,9 +85,20 @@ export function useXAxis(axisId) {
 }
 
 /**
- * Get the Y axis.
- * @param {AxisId | undefined} axisId - If provided returns the y axis with axisId, else returns the values for the default y axis.
- * @returns The Y axis.
+ * Get a specific Y axis or the default Y axis.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `yAxis` prop
+ *   - Undefined to get the default (first) Y axis
+ * @returns The configuration for a single Y axis.
+ *
+ * @example
+ * // Get the default Y axis
+ * const yAxis = useYAxis();
+ *
+ * @example
+ * // Get a specific Y axis by string ID
+ * const yAxis = useYAxis('temperature');
  */
 export function useYAxis(axisId) {
   const store = useStore();
@@ -77,6 +109,22 @@ export function useYAxis(axisId) {
   const id = axisId ?? yAxisIds[0];
   return yAxis[id];
 }
+
+/**
+ * Get all the rotation axes for polar charts.
+ *
+ * Returns all rotation axes configured in polar charts along with their IDs.
+ * Rotation axes are used in charts like `RadarChart` to define angular positioning.
+ *
+ * @returns An object containing:
+ *   - `rotationAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `rotationAxisIds`: An array of all rotation axis IDs in the chart
+ *
+ * @example
+ * const { rotationAxis, rotationAxisIds } = useRotationAxes();
+ *
+ * @see `useRotationAxis` for accessing a single rotation axis
+ */
 export function useRotationAxes() {
   const store = useStore();
   const {
@@ -88,6 +136,22 @@ export function useRotationAxes() {
     rotationAxisIds
   };
 }
+
+/**
+ * Get all the radius axes for polar charts.
+ *
+ * Returns all radial axes configured in polar charts along with their IDs.
+ * Radius axes are used in charts like `RadarChart` to define radial positioning and scaling.
+ *
+ * @returns An object containing:
+ *   - `radiusAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `radiusAxisIds`: An array of all radius axis IDs in the chart
+ *
+ * @example
+ * const { radiusAxis, radiusAxisIds } = useRadiusAxes();
+ *
+ * @see `useRadiusAxis` for accessing a single radius axis
+ */
 export function useRadiusAxes() {
   const store = useStore();
   const {
@@ -99,21 +163,61 @@ export function useRadiusAxes() {
     radiusAxisIds
   };
 }
-export function useRotationAxis(identifier) {
+
+/**
+ * Get a specific rotation axis or the default rotation axis for polar charts.
+ *
+ * Returns the configuration and scale for a rotation axis in polar charts.
+ * The rotation axis controls the angular positioning of data points around the circle.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's rotation axis configuration
+ *   - Undefined to get the default (first) rotation axis
+ * @returns The rotation axis configuration, or undefined if not found
+ *
+ * @example
+ * // Get the default rotation axis
+ * const rotationAxis = useRotationAxis();
+ *
+ * @example
+ * // Get a specific rotation axis by string ID
+ * const rotationAxis = useRotationAxis('categories');
+ */
+export function useRotationAxis(axisId) {
   const store = useStore();
   const {
     axis: rotationAxis,
     axisIds: rotationAxisIds
   } = useSelector(store, selectorChartRotationAxis);
-  const id = typeof identifier === 'string' ? identifier : rotationAxisIds[identifier ?? 0];
+  const id = axisId ?? rotationAxisIds[0];
   return rotationAxis[id];
 }
-export function useRadiusAxis(identifier) {
+
+/**
+ * Get a specific radius axis or the default radius axis for polar charts.
+ *
+ * Returns the configuration and scale for a radial axis in polar charts.
+ * The radius axis controls the radial distance of data points from the center of the circle.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's radius axis configuration
+ *   - Undefined to get the default (first) radius axis
+ * @returns The radius axis configuration, or undefined if not found
+ *
+ * @example
+ * // Get the default radius axis
+ * const radiusAxis = useRadiusAxis();
+ *
+ * @example
+ * // Get a specific radius axis by string ID
+ * const radiusAxis = useRadiusAxis('magnitude');
+ */
+export function useRadiusAxis(axisId) {
   const store = useStore();
   const {
     axis: radiusAxis,
     axisIds: radiusAxisIds
   } = useSelector(store, selectorChartRadiusAxis);
-  const id = typeof identifier === 'string' ? identifier : radiusAxisIds[identifier ?? 0];
+  const id = axisId ?? radiusAxisIds[0];
   return radiusAxis[id];
 }

package/esm/hooks/useBarSeries.js

@@ -1,8 +1,6 @@
 'use client';
 
-import { createSeriesSelectorsOfType, createAllSeriesSelectorOfType } from "../internals/createSeriesSelectorOfType.js";
-const useSelectorSeries = createSeriesSelectorsOfType('bar');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('bar');
+import { useSeriesOfType, useAllSeriesOfType } from "../internals/seriesSelectorOfType.js";
 
 /**
  * Get access to the internal state of bar series.
@@ -27,7 +25,7 @@ const useSelectorSeriesContext = createAllSeriesSelectorOfType('bar');
  */
 
 export function useBarSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return useSeriesOfType('bar', seriesIds);
 }
 
 /**
@@ -39,5 +37,5 @@ export function useBarSeries(seriesIds) {
  * @returns the bar series
  */
 export function useBarSeriesContext() {
-  return useSelectorSeriesContext();
+  return useAllSeriesOfType('bar');
 }

package/esm/hooks/useLineSeries.js

@@ -1,8 +1,6 @@
 'use client';
 
-import { createSeriesSelectorsOfType, createAllSeriesSelectorOfType } from "../internals/createSeriesSelectorOfType.js";
-const useSelectorSeries = createSeriesSelectorsOfType('line');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('line');
+import { useSeriesOfType, useAllSeriesOfType } from "../internals/seriesSelectorOfType.js";
 
 /**
  * Get access to the internal state of line series.
@@ -27,7 +25,7 @@ const useSelectorSeriesContext = createAllSeriesSelectorOfType('line');
  */
 
 export function useLineSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return useSeriesOfType('line', seriesIds);
 }
 
 /**
@@ -39,5 +37,5 @@ export function useLineSeries(seriesIds) {
  * @returns the line series
  */
 export function useLineSeriesContext() {
-  return useSelectorSeriesContext();
+  return useAllSeriesOfType('line');
 }

package/esm/hooks/usePieSeries.js

@@ -1,8 +1,6 @@
 'use client';
 
-import { createSeriesSelectorsOfType, createAllSeriesSelectorOfType } from "../internals/createSeriesSelectorOfType.js";
-const useSelectorSeries = createSeriesSelectorsOfType('pie');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('pie');
+import { useSeriesOfType, useAllSeriesOfType } from "../internals/seriesSelectorOfType.js";
 
 /**
  * Get access to the internal state of pie series.
@@ -27,7 +25,7 @@ const useSelectorSeriesContext = createAllSeriesSelectorOfType('pie');
  */
 
 export function usePieSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return useSeriesOfType('pie', seriesIds);
 }
 
 /**
@@ -38,5 +36,5 @@ export function usePieSeries(seriesIds) {
  * @returns the pie series
  */
 export function usePieSeriesContext() {
-  return useSelectorSeriesContext();
+  return useAllSeriesOfType('pie');
 }

package/esm/hooks/useRadarSeries.js

@@ -1,8 +1,6 @@
 'use client';
 
-import { createSeriesSelectorsOfType, createAllSeriesSelectorOfType } from "../internals/createSeriesSelectorOfType.js";
-const useSelectorSeries = createSeriesSelectorsOfType('radar');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('radar');
+import { useSeriesOfType, useAllSeriesOfType } from "../internals/seriesSelectorOfType.js";
 
 /**
  * Get access to the internal state of radar series.
@@ -27,7 +25,7 @@ const useSelectorSeriesContext = createAllSeriesSelectorOfType('radar');
  */
 
 export function useRadarSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return useSeriesOfType('radar', seriesIds);
 }
 
 /**
@@ -38,5 +36,5 @@ export function useRadarSeries(seriesIds) {
  * @returns the radar series
  */
 export function useRadarSeriesContext() {
-  return useSelectorSeriesContext();
+  return useAllSeriesOfType('radar');
 }

package/esm/hooks/useScale.d.ts

@@ -13,16 +13,35 @@ export declare function getValueToPositionMapper<Domain extends {
 /**
  * Get the X scale.
  *
- * @param {AxisId | undefined} axisId - If provided returns the scale for the x axis with axisId, else returns the values for the default x axis.
- * @returns {AxisScaleConfig[S]['scale']} The scale for the specified X axis.
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `xAxis` prop
+ *   - Undefined to get the default (first) X axis
+ * @returns The X axis scale
  */
 export declare function useXScale<S extends ScaleName>(axisId?: AxisId): AxisScaleConfig[S]['scale'];
 /**
  * Get the Y scale.
  *
- * @param {AxisId | undefined} axisId - If provided returns the scale for the y axis with axisId, else returns the values for the default y axis.
- * @returns {AxisScaleConfig[S]['scale']} The scale for the specified Y axis.
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `yAxis` prop
+ *   - Undefined to get the default (first) Y axis
+ * @returns The Y axis scale
  */
 export declare function useYScale<S extends ScaleName>(axisId?: AxisId): AxisScaleConfig[S]['scale'];
-export declare function useRotationScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'] | undefined;
-export declare function useRadiusScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'] | undefined;
+/**
+ * Get the rotation scale.
+ *
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `rotationAxis` prop
+ *   - Undefined to get the default rotation axis
+ * @returns The rotation axis scale, or undefined if not found
+ */
+export declare function useRotationScale<S extends ScaleName>(axisId?: number | string): AxisScaleConfig[S]['scale'] | undefined;
+/**
+ * Get the radius scale.
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `radiusAxis` prop
+ *   - Undefined to get the default radius axis
+ * @returns The radius axis scale, or undefined if not found
+ */
+export declare function useRadiusScale<S extends ScaleName>(axisId?: number | string): AxisScaleConfig[S]['scale'] | undefined;

package/esm/hooks/useScale.js

@@ -25,8 +25,10 @@ export function getValueToPositionMapper(scale) {
 /**
  * Get the X scale.
  *
- * @param {AxisId | undefined} axisId - If provided returns the scale for the x axis with axisId, else returns the values for the default x axis.
- * @returns {AxisScaleConfig[S]['scale']} The scale for the specified X axis.
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `xAxis` prop
+ *   - Undefined to get the default (first) X axis
+ * @returns The X axis scale
  */
 export function useXScale(axisId) {
   const axis = useXAxis(axisId);
@@ -36,18 +38,37 @@ export function useXScale(axisId) {
 /**
  * Get the Y scale.
  *
- * @param {AxisId | undefined} axisId - If provided returns the scale for the y axis with axisId, else returns the values for the default y axis.
- * @returns {AxisScaleConfig[S]['scale']} The scale for the specified Y axis.
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `yAxis` prop
+ *   - Undefined to get the default (first) Y axis
+ * @returns The Y axis scale
  */
 export function useYScale(axisId) {
   const axis = useYAxis(axisId);
   return axis.scale;
 }
-export function useRotationScale(identifier) {
-  const axis = useRotationAxis(identifier);
+
+/**
+ * Get the rotation scale.
+ *
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `rotationAxis` prop
+ *   - Undefined to get the default rotation axis
+ * @returns The rotation axis scale, or undefined if not found
+ */
+export function useRotationScale(axisId) {
+  const axis = useRotationAxis(axisId);
   return axis?.scale;
 }
-export function useRadiusScale(identifier) {
-  const axis = useRadiusAxis(identifier);
+
+/**
+ * Get the radius scale.
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `radiusAxis` prop
+ *   - Undefined to get the default radius axis
+ * @returns The radius axis scale, or undefined if not found
+ */
+export function useRadiusScale(axisId) {
+  const axis = useRadiusAxis(axisId);
   return axis?.scale;
 }

package/esm/hooks/useScatterSeries.js

@@ -1,8 +1,6 @@
 'use client';
 
-import { createSeriesSelectorsOfType, createAllSeriesSelectorOfType } from "../internals/createSeriesSelectorOfType.js";
-const useSelectorSeries = createSeriesSelectorsOfType('scatter');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('scatter');
+import { useSeriesOfType, useAllSeriesOfType } from "../internals/seriesSelectorOfType.js";
 
 /**
  * Get access to the internal state of scatter series.
@@ -27,7 +25,7 @@ const useSelectorSeriesContext = createAllSeriesSelectorOfType('scatter');
  */
 
 export function useScatterSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return useSeriesOfType('scatter', seriesIds);
 }
 
 /**
@@ -38,5 +36,5 @@ export function useScatterSeries(seriesIds) {
  * @returns the scatter series
  */
 export function useScatterSeriesContext() {
-  return useSelectorSeriesContext();
+  return useAllSeriesOfType('scatter');
 }

package/esm/index.d.ts

@@ -29,4 +29,5 @@ export type { ChartContainerProps } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";
 export * from "./ChartsWrapper/index.js";
-export * from "./ChartsBrushOverlay/index.js";
+export * from "./ChartsBrushOverlay/index.js";
+export * from "./utils/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.17.0
+ * @mui/x-charts v8.19.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -36,6 +36,7 @@ export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";
 export * from "./ChartsWrapper/index.js";
 export * from "./ChartsBrushOverlay/index.js";
+export * from "./utils/index.js";
 
 // Locales should be imported from `@mui/x-charts/locales`
 // export * from './locales';

package/esm/internals/domUtils.js

@@ -86,11 +86,7 @@ export const getStringSize = (text, style = {}) => {
     });
     measurementElem.textContent = str;
     measurementSpanContainer.replaceChildren(measurementElem);
-    const rect = measurementElem.getBoundingClientRect();
-    const result = {
-      width: rect.width,
-      height: rect.height
-    };
+    const result = measureSVGTextElement(measurementElem);
     stringCache.set(cacheKey, result);
     if (stringCache.size + 1 > MAX_CACHE_NUM) {
       stringCache.clear();
@@ -134,21 +130,17 @@ export function batchMeasureStrings(texts, style = {}) {
     measurementContainer.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, measurementSpanStyle[styleKey]);
     return styleKey;
   });
-  const measurementElems = [];
+  const measurementElements = [];
   for (const string of textToMeasure) {
     const measurementElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
     measurementElem.textContent = `${string}`;
-    measurementElems.push(measurementElem);
+    measurementElements.push(measurementElem);
   }
-  measurementContainer.replaceChildren(...measurementElems);
+  measurementContainer.replaceChildren(...measurementElements);
   for (let i = 0; i < textToMeasure.length; i += 1) {
     const text = textToMeasure[i];
-    const measurementSpan = measurementContainer.children[i];
-    const rect = measurementSpan.getBoundingClientRect();
-    const result = {
-      width: rect.width,
-      height: rect.height
-    };
+    const measurementElem = measurementContainer.children[i];
+    const result = measureSVGTextElement(measurementElem);
     const cacheKey = `${text}-${styleString}`;
     stringCache.set(cacheKey, result);
     sizeMap.set(text, result);
@@ -162,6 +154,30 @@ export function batchMeasureStrings(texts, style = {}) {
   }
   return sizeMap;
 }
+
+/**
+ * Measures an SVG text element using getBBox() with fallback to getBoundingClientRect()
+ * @param element SVG text element to measure
+ * @returns width and height of the text element
+ */
+function measureSVGTextElement(element) {
+  // getBBox() is more reliable across browsers for SVG elements
+  try {
+    const result = element.getBBox();
+    return {
+      width: result.width,
+      height: result.height
+    };
+  } catch {
+    // Fallback to getBoundingClientRect if getBBox fails
+    // This can happen in tests
+    const result = element.getBoundingClientRect();
+    return {
+      width: result.width,
+      height: result.height
+    };
+  }
+}
 let measurementContainer = null;
 
 /**

package/esm/internals/getScale.d.ts

@@ -1,2 +1,3 @@
+import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
 import { ContinuousScaleName, D3ContinuousScale } from "../models/axis.js";
-export declare function getScale(scaleType: ContinuousScaleName, domain: readonly any[], range: readonly any[]): D3ContinuousScale;
+export declare function getScale<Domain extends NumberValue = any, Range = any>(scaleType: ContinuousScaleName, domain: Iterable<Domain>, range: readonly Range[]): D3ContinuousScale<Range, Range>;

package/esm/internals/index.d.ts

@@ -15,7 +15,7 @@ export { useBarPlotData } from "../BarChart/useBarPlotData.js";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
-export * from "./createSeriesSelectorOfType.js";
+export * from "./seriesSelectorOfType.js";
 export * from "./plugins/corePlugins/useChartId/index.js";
 export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";

package/esm/internals/index.js

@@ -18,7 +18,7 @@ export { useBarPlotData } from "../BarChart/useBarPlotData.js";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
-export * from "./createSeriesSelectorOfType.js";
+export * from "./seriesSelectorOfType.js";
 
 // plugins
 export * from "./plugins/corePlugins/useChartId/index.js";

package/esm/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.selectors.js

@@ -1,3 +1,3 @@
-import { createSelector } from "../../utils/selectors.js";
+import { createSelector } from '@mui/x-internals/store';
 const selectorChartAnimationState = state => state.animation;
-export const selectorChartSkipAnimation = createSelector([selectorChartAnimationState], state => state.skip || state.skipAnimationRequests > 0);
+export const selectorChartSkipAnimation = createSelector(selectorChartAnimationState, state => state.skip || state.skipAnimationRequests > 0);

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js

@@ -1,5 +1,4 @@
-import { createSelectorMemoized } from '@mui/x-internals/store';
-import { createSelector } from "../../utils/selectors.js";
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
 import { selectorChartAxisSizes } from "../../featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.js";
 export const selectorChartDimensionsState = state => state.dimensions;
 export const selectorChartMargin = state => state.dimensions.margin;
@@ -26,7 +25,7 @@ export const selectorChartDrawingArea = createSelectorMemoized(selectorChartDime
     bottom: marginBottom + axisSizeBottom
   };
 });
-export const selectorChartSvgWidth = createSelector([selectorChartDimensionsState], dimensionsState => dimensionsState.width);
-export const selectorChartSvgHeight = createSelector([selectorChartDimensionsState], dimensionsState => dimensionsState.height);
-export const selectorChartPropsWidth = createSelector([selectorChartDimensionsState], dimensionsState => dimensionsState.propsWidth);
-export const selectorChartPropsHeight = createSelector([selectorChartDimensionsState], dimensionsState => dimensionsState.propsHeight);
+export const selectorChartSvgWidth = createSelector(selectorChartDimensionsState, dimensionsState => dimensionsState.width);
+export const selectorChartSvgHeight = createSelector(selectorChartDimensionsState, dimensionsState => dimensionsState.height);
+export const selectorChartPropsWidth = createSelector(selectorChartDimensionsState, dimensionsState => dimensionsState.propsWidth);
+export const selectorChartPropsHeight = createSelector(selectorChartDimensionsState, dimensionsState => dimensionsState.propsHeight);

package/esm/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.js

@@ -1,3 +1,3 @@
-import { createSelector } from "../../utils/selectors.js";
+import { createSelector } from '@mui/x-internals/store';
 export const selectorChartExperimentalFeaturesState = state => state.experimentalFeatures;
-export const selectorPreferStrictDomainInLineCharts = createSelector([selectorChartExperimentalFeaturesState], features => Boolean(features?.preferStrictDomainInLineCharts));
+export const selectorPreferStrictDomainInLineCharts = createSelector(selectorChartExperimentalFeaturesState, features => Boolean(features?.preferStrictDomainInLineCharts));

package/esm/internals/plugins/corePlugins/useChartId/useChartId.selectors.js

@@ -1,4 +1,4 @@
-import { createSelector } from "../../utils/selectors.js";
+import { createSelector } from '@mui/x-internals/store';
 const selectorChartIdState = state => state.id;
 
 /**
@@ -6,4 +6,4 @@ const selectorChartIdState = state => state.id;
  * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
  * @returns {string} The id attribute of the chart.
  */
-export const selectorChartId = createSelector([selectorChartIdState], idState => idState.chartId);
+export const selectorChartId = createSelector(selectorChartIdState, idState => idState.chartId);

package/esm/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.js

@@ -44,6 +44,9 @@ export const useChartInteractionListener = ({
           name: 'zoomTurnWheel',
           sensitivity: 0.01,
           initialDelta: 1
+        }), new TurnWheelGesture({
+          name: 'panTurnWheel',
+          sensitivity: 0.5
         }), new TapAndDragGesture({
           name: 'zoomTapAndDrag',
           dragThreshold: 10
@@ -63,7 +66,7 @@ export const useChartInteractionListener = ({
     if (!svg || !gestureManager) {
       return undefined;
     }
-    gestureManager.registerElement(['pan', 'move', 'zoomPinch', 'zoomPan', 'zoomTurnWheel', 'tap', 'quickPress', 'zoomTapAndDrag', 'zoomPressAndDrag', 'zoomDoubleTapReset', 'brush'], svg);
+    gestureManager.registerElement(['pan', 'move', 'zoomPinch', 'zoomPan', 'zoomTurnWheel', 'panTurnWheel', 'tap', 'quickPress', 'zoomTapAndDrag', 'zoomPressAndDrag', 'zoomDoubleTapReset', 'brush'], svg);
     return () => {
       // Cleanup gesture manager
       gestureManager.unregisterAllGestures(svg);

package/esm/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.types.d.ts

@@ -1,6 +1,6 @@
 import { MoveEvent, PanEvent, PanGestureOptions, PinchEvent, PinchGestureOptions, PressEvent, TapEvent, TurnWheelEvent, type PressAndDragEvent, type PressAndDragGestureOptions, type TapAndDragEvent, type TapAndDragGestureOptions, type TapGestureOptions, type TurnWheelGestureOptions } from '@mui/x-internal-gestures/core';
 import { ChartPluginSignature } from "../../models/index.js";
-export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd' | 'zoomTurnWheel' | 'zoomTapAndDrag' | 'zoomTapAndDragStart' | 'zoomTapAndDragEnd' | 'zoomPressAndDrag' | 'zoomPressAndDragStart' | 'zoomPressAndDragEnd' | 'move' | 'moveStart' | 'moveEnd' | 'tap' | 'quickPress' | 'quickPressEnd' | 'zoomDoubleTapReset' | 'brush' | 'brushStart' | 'brushCancel' | 'brushEnd';
+export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd' | 'zoomTurnWheel' | 'panTurnWheel' | 'zoomTapAndDrag' | 'zoomTapAndDragStart' | 'zoomTapAndDragEnd' | 'zoomPressAndDrag' | 'zoomPressAndDragStart' | 'zoomPressAndDragEnd' | 'move' | 'moveStart' | 'moveEnd' | 'tap' | 'quickPress' | 'quickPressEnd' | 'zoomDoubleTapReset' | 'brush' | 'brushStart' | 'brushCancel' | 'brushEnd';
 export type InteractionListenerResult = {
   cleanup: () => void;
 };
@@ -8,6 +8,7 @@ export type AddInteractionListener = {
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'brush' | 'brushStart' | 'brushCancel' | 'brushEnd', callback: (event: PanEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd', callback: (event: PinchEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomTurnWheel', callback: (event: TurnWheelEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'panTurnWheel', callback: (event: TurnWheelEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'move' | 'moveStart' | 'moveEnd', callback: (event: MoveEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'tap' | 'zoomDoubleTapReset', callback: (event: TapEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'quickPress' | 'quickPressEnd', callback: (event: PressEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
@@ -18,6 +19,7 @@ export type UpdateZoomInteractionListeners = {
   (interaction: 'zoomPan', options?: Omit<PanGestureOptions<'zoomPan'>, 'name'>): void;
   (interaction: 'zoomPinch', options?: Omit<PinchGestureOptions<'zoomPinch'>, 'name'>): void;
   (interaction: 'zoomTurnWheel', options?: Omit<TurnWheelGestureOptions<'zoomTurnWheel'>, 'name'>): void;
+  (interaction: 'panTurnWheel', options?: Omit<TurnWheelGestureOptions<'panTurnWheel'>, 'name'>): void;
   (interaction: 'zoomTapAndDrag', options?: Omit<TapAndDragGestureOptions<'zoomTapAndDrag'>, 'name'>): void;
   (interaction: 'zoomPressAndDrag', options?: Omit<PressAndDragGestureOptions<'zoomPressAndDrag'>, 'name'>): void;
   (interaction: 'zoomDoubleTapReset', options?: Omit<TapGestureOptions<'zoomDoubleTapReset'>, 'name'>): void;