@mui/x-charts 8.7.0 → 8.9.0

package/esm/RadarChart/useRadarChartProps.js

@@ -1,7 +1,7 @@
 'use client';
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar"];
+const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick"];
 /**
  * A helper function that extracts RadarChartProps from the input props
  * and returns an object with props for the children components of RadarChart.
@@ -29,7 +29,10 @@ export const useRadarChartProps = props => {
       divisions,
       shape,
       stripeColor,
-      highlight = 'axis'
+      highlight = 'axis',
+      onAxisClick,
+      onAreaClick,
+      onMarkClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const radarDataProviderProps = {
@@ -43,7 +46,8 @@ export const useRadarChartProps = props => {
     colors,
     highlightedItem,
     onHighlightChange,
-    skipAnimation
+    skipAnimation,
+    onAxisClick
   };
   const overlayProps = {
     slots,
@@ -62,6 +66,12 @@ export const useRadarChartProps = props => {
     shape,
     stripeColor
   };
+  const radarSeriesAreaProps = {
+    onItemClick: onAreaClick
+  };
+  const radarSeriesMarksProps = {
+    onItemClick: onMarkClick
+  };
   const chartsSurfaceProps = other;
   return {
     highlight,
@@ -69,6 +79,8 @@ export const useRadarChartProps = props => {
     chartsSurfaceProps,
     radarDataProviderProps,
     radarGrid,
+    radarSeriesAreaProps,
+    radarSeriesMarksProps,
     overlayProps,
     legendProps,
     children

package/esm/ScatterChart/ScatterChart.d.ts

@@ -16,12 +16,13 @@ import { UseChartVoronoiSignature } from "../internals/plugins/featurePlugins/us
 import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
 export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
-export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginsSignatures>, 'series' | 'plugins' | 'onItemClick'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
+export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginsSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the scatter chart.
-   * An array of [[ScatterSeriesType]] objects.
+   * An array of [[ScatterSeries]] objects.
    */
-  series: Readonly<MakeOptional<ScatterSeriesType, 'type'>[]>;
+  series: Readonly<ScatterSeries[]>;
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.

package/esm/ScatterChart/ScatterChart.js

@@ -173,7 +173,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   onItemClick: PropTypes.func,
   /**
    * The series to display in the scatter chart.
-   * An array of [[ScatterSeriesType]] objects.
+   * An array of [[ScatterSeries]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**

package/esm/ScatterChart/ScatterPlot.js

@@ -5,9 +5,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Scatter } from "./Scatter.js";
 import { useScatterSeriesContext } from "../hooks/useScatterSeries.js";
-import getColor from "./seriesConfig/getColor.js";
 import { useXAxes, useYAxes } from "../hooks/index.js";
 import { useZAxes } from "../hooks/useZAxis.js";
+import { seriesConfig as scatterSeriesConfig } from "./seriesConfig/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -58,7 +58,7 @@ function ScatterPlot(props) {
         zAxisId,
         color
       } = series[seriesId];
-      const colorGetter = getColor(series[seriesId], xAxis[xAxisId ?? defaultXAxisId], yAxis[yAxisId ?? defaultYAxisId], zAxis[zAxisId ?? defaultZAxisId]);
+      const colorGetter = scatterSeriesConfig.colorProcessor(series[seriesId], xAxis[xAxisId ?? defaultXAxisId], yAxis[yAxisId ?? defaultYAxisId], zAxis[zAxisId ?? defaultZAxisId]);
       const xScale = xAxis[xAxisId ?? defaultXAxisId].scale;
       const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
       return /*#__PURE__*/_jsx(ScatterItems, _extends({

package/esm/ScatterChart/seriesConfig/seriesProcessor.js

@@ -21,6 +21,9 @@ const seriesProcessor = ({
       labelMarkType: 'circle',
       markerSize: 4
     }, seriesData, {
+      preview: _extends({
+        markerSize: 1
+      }, seriesData?.preview),
       data,
       valueFormatter: seriesData.valueFormatter ?? (v => v && `(${v.x}, ${v.y})`)
     })];

package/esm/SparkLineChart/SparkLineChart.d.ts

@@ -13,7 +13,7 @@ import { BarPlotSlots, BarPlotSlotProps } from "../BarChart/BarPlot.js";
 import { ChartMargin } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js";
 export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots {}
 export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {}
-export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps'> {
+export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
   /**
    * The xAxis configuration.
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.

package/esm/SparkLineChart/SparkLineChart.js

@@ -206,6 +206,14 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    dataIndex: PropTypes.number.isRequired
+  })),
   /**
    * The highlighted item.
    * Used when the highlight is controlled.
@@ -249,6 +257,14 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * 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.
+   */
+  onHighlightedAxisChange: PropTypes.func,
   /**
    * Callback fired when clicking close to an item.
    * This is only available for scatter plot for now.

package/esm/hooks/useAxis.d.ts

@@ -11,7 +11,7 @@ import { AxisId, ChartsRadiusAxisProps, ChartsRotationAxisProps, PolarAxisDefaul
  */
 export declare function useXAxes(): {
   xAxis: import("../internals/index.js").ComputedAxisConfig<import("../index.js").ChartsXAxisProps>;
-  xAxisIds: string[];
+  xAxisIds: AxisId[];
 };
 /**
  * Get all the y-axes.
@@ -25,7 +25,7 @@ export declare function useXAxes(): {
  */
 export declare function useYAxes(): {
   yAxis: import("../internals/index.js").ComputedAxisConfig<import("../index.js").ChartsYAxisProps>;
-  yAxisIds: string[];
+  yAxisIds: AxisId[];
 };
 /**
  * Get the X axis.

package/esm/hooks/useTicks.d.ts

@@ -49,8 +49,13 @@ export type TickItemType = {
   offset: number;
   labelOffset: number;
 };
+export declare function getTicks(options: {
+  scale: D3Scale;
+  valueFormatter?: AxisConfig['valueFormatter'];
+  isInside: (offset: number) => boolean;
+} & Pick<TickParams, 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'> & Required<Pick<TickParams, 'tickNumber'>>): TickItemType[];
 export declare function useTicks(options: {
   scale: D3Scale;
   valueFormatter?: AxisConfig['valueFormatter'];
   direction: 'x' | 'y';
-} & Pick<TickParams, 'tickNumber' | 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'>): TickItemType[];
+} & Pick<TickParams, 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'> & Required<Pick<TickParams, 'tickNumber'>>): TickItemType[];

package/esm/hooks/useTicks.js

@@ -10,7 +10,7 @@ const offsetRatio = {
   end: 1,
   middle: 0.5
 };
-export function useTicks(options) {
+export function getTicks(options) {
   const {
     scale,
     tickNumber,
@@ -18,75 +18,111 @@ export function useTicks(options) {
     tickInterval,
     tickPlacement = 'extremities',
     tickLabelPlacement: tickLabelPlacementProp,
-    direction
+    isInside
   } = options;
-  const {
-    instance
-  } = useChartContext();
-  return React.useMemo(() => {
-    // band scale
-    if (isBandScale(scale)) {
-      const domain = scale.domain();
-      const tickLabelPlacement = tickLabelPlacementProp ?? 'middle';
-      if (scale.bandwidth() > 0) {
-        // scale type = 'band'
-        const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
-        return [...filteredDomain.map(value => ({
+
+  // band scale
+  if (isBandScale(scale)) {
+    const domain = scale.domain();
+    const tickLabelPlacement = tickLabelPlacementProp ?? 'middle';
+    if (scale.bandwidth() > 0) {
+      // scale type = 'band'
+      const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+      return [...filteredDomain.map(value => {
+        const defaultTickLabel = `${value}`;
+        return {
           value,
           formattedValue: valueFormatter?.(value, {
             location: 'tick',
-            scale
-          }) ?? `${value}`,
+            scale,
+            tickNumber,
+            defaultTickLabel
+          }) ?? defaultTickLabel,
           offset: scale(value) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step(),
           labelOffset: tickLabelPlacement === 'tick' ? 0 : scale.step() * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement])
-        })), ...(tickPlacement === 'extremities' ? [{
-          formattedValue: undefined,
-          offset: scale.range()[1],
-          labelOffset: 0
-        }] : [])];
-      }
+        };
+      }), ...(tickPlacement === 'extremities' ? [{
+        formattedValue: undefined,
+        offset: scale.range()[1],
+        labelOffset: 0
+      }] : [])];
+    }
 
-      // scale type = 'point'
-      const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
-      return filteredDomain.map(value => ({
+    // scale type = 'point'
+    const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+    return filteredDomain.map(value => {
+      const defaultTickLabel = `${value}`;
+      return {
         value,
         formattedValue: valueFormatter?.(value, {
           location: 'tick',
-          scale
-        }) ?? `${value}`,
+          scale,
+          tickNumber,
+          defaultTickLabel
+        }) ?? defaultTickLabel,
         offset: scale(value),
         labelOffset: 0
-      }));
-    }
-    const domain = scale.domain();
-    // Skip axis rendering if no data is available
-    // - The domains contains Infinity for continuous scales.
-    if (domain.some(isInfinity)) {
-      return [];
-    }
-    const tickLabelPlacement = tickLabelPlacementProp;
-    const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
+      };
+    });
+  }
+  const domain = scale.domain();
+  // Skip axis rendering if no data is available
+  // - The domains contains Infinity for continuous scales.
+  if (domain.some(isInfinity)) {
+    return [];
+  }
+  const tickLabelPlacement = tickLabelPlacementProp;
+  const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
 
-    // Ticks inside the drawing area
-    const visibleTicks = [];
-    for (let i = 0; i < ticks.length; i += 1) {
-      const value = ticks[i];
-      const offset = scale(value);
-      const isInside = direction === 'x' ? instance.isXInside(offset) : instance.isYInside(offset);
-      if (isInside) {
-        visibleTicks.push({
-          value,
-          formattedValue: valueFormatter?.(value, {
-            location: 'tick',
-            scale
-          }) ?? scale.tickFormat(tickNumber)(value),
-          offset,
-          // Allowing the label to be placed in the middle of a continuous scale is weird.
-          // But it is useful in some cases, like funnel categories with a linear scale.
-          labelOffset: tickLabelPlacement === 'middle' ? scale(ticks[i - 1] ?? 0) - (offset + scale(ticks[i - 1] ?? 0)) / 2 : 0
-        });
-      }
+  // Ticks inside the drawing area
+  const visibleTicks = [];
+  for (let i = 0; i < ticks.length; i += 1) {
+    const value = ticks[i];
+    const offset = scale(value);
+    if (isInside(offset)) {
+      /* If d3 returns an empty string, it means that a tick should be shown, but its label shouldn't.
+       * This is especially useful in a log scale where we want to show ticks to demonstrate it's a log
+       * scale, but don't want to show labels because they would overlap.
+       * https://github.com/mui/mui-x/issues/18239 */
+      const defaultTickLabel = scale.tickFormat(tickNumber)(value);
+      visibleTicks.push({
+        value,
+        formattedValue: valueFormatter?.(value, {
+          location: 'tick',
+          scale,
+          tickNumber,
+          defaultTickLabel
+        }) ?? defaultTickLabel,
+        offset,
+        // Allowing the label to be placed in the middle of a continuous scale is weird.
+        // But it is useful in some cases, like funnel categories with a linear scale.
+        labelOffset: tickLabelPlacement === 'middle' ? scale(ticks[i - 1] ?? 0) - (offset + scale(ticks[i - 1] ?? 0)) / 2 : 0
+      });
     }
-    return visibleTicks;
-  }, [scale, tickLabelPlacementProp, tickInterval, tickNumber, tickPlacement, valueFormatter, direction, instance]);
+  }
+  return visibleTicks;
+}
+export function useTicks(options) {
+  const {
+    scale,
+    tickNumber,
+    valueFormatter,
+    tickInterval,
+    tickPlacement = 'extremities',
+    tickLabelPlacement,
+    direction
+  } = options;
+  const {
+    instance
+  } = useChartContext();
+  const isInside = direction === 'x' ? instance.isXInside : instance.isYInside;
+  return React.useMemo(() => getTicks({
+    scale,
+    tickNumber,
+    tickPlacement,
+    tickInterval,
+    tickLabelPlacement,
+    valueFormatter,
+    isInside
+  }), [scale, tickNumber, tickPlacement, tickInterval, tickLabelPlacement, valueFormatter, isInside]);
 }

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.7.0
+ * @mui/x-charts v8.9.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/constants.d.ts

@@ -1,8 +1,11 @@
 import type { ZoomSliderShowTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/zoom.types.js";
 /** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */
 export declare const ZOOM_SLIDER_MARGIN = 4;
+/** Size of the zoom slider preview. */
+export declare const ZOOM_SLIDER_PREVIEW_SIZE = 40;
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
 export declare const DEFAULT_ZOOM_SLIDER_SIZE: number;
+export declare const DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE: number;
 export declare const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP: ZoomSliderShowTooltip;
 /** Default margin for pie charts. */
 export declare const DEFAULT_PIE_CHART_MARGIN: {

package/esm/internals/constants.js

@@ -1,8 +1,12 @@
 /** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */
 export const ZOOM_SLIDER_MARGIN = 4;
 
+/** Size of the zoom slider preview. */
+export const ZOOM_SLIDER_PREVIEW_SIZE = 40;
+
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
 export const DEFAULT_ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;
+export const DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE = 40 + 2 * ZOOM_SLIDER_MARGIN;
 export const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = 'hover';
 
 /** Default margin for pie charts. */

package/esm/internals/getLabel.d.ts

@@ -1 +1 @@
-export declare function getLabel<Location extends string>(value: string | ((location: Location) => string) | undefined, location: Location): string | undefined;
+export declare function getLabel<Location extends string>(value: string | ((location: Location) => string | undefined) | undefined, location: Location): string | undefined;

package/esm/internals/index.d.ts

@@ -7,6 +7,7 @@ export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 export { useDrawingArea } from "../hooks/useDrawingArea.js";
 export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
 export { useScatterPlotData } from "../ScatterChart/useScatterPlotData.js";
+export { seriesConfig as scatterSeriesConfig } from "../ScatterChart/seriesConfig/index.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
 export { useAreaPlotData } from "../LineChart/useAreaPlotData.js";
 export { useLinePlotData } from "../LineChart/useLinePlotData.js";

package/esm/internals/index.js

@@ -10,6 +10,7 @@ export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 export { useDrawingArea } from "../hooks/useDrawingArea.js";
 export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
 export { useScatterPlotData } from "../ScatterChart/useScatterPlotData.js";
+export { seriesConfig as scatterSeriesConfig } from "../ScatterChart/seriesConfig/index.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
 export { useAreaPlotData } from "../LineChart/useAreaPlotData.js";
 export { useLinePlotData } from "../LineChart/useLinePlotData.js";

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

@@ -1,5 +1,6 @@
 import { type UseChartAnimationSignature } from "./useChartAnimation/index.js";
 import { type UseChartDimensionsSignature } from "./useChartDimensions/index.js";
+import { type UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature/index.js";
 import { type UseChartIdSignature, UseChartIdParameters } from "./useChartId/index.js";
 import { type UseChartSeriesSignature } from "./useChartSeries/index.js";
 import { type UseChartInteractionListenerSignature } from "./useChartInteractionListener/index.js";
@@ -7,6 +8,6 @@ import { type UseChartInteractionListenerSignature } from "./useChartInteraction
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the Charts components.
  */
-export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.js").ChartPlugin<UseChartIdSignature>, import("../models/index.js").ChartPlugin<UseChartDimensionsSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesSignature>, import("../models/index.js").ChartPlugin<UseChartInteractionListenerSignature>, import("../models/index.js").ChartPlugin<UseChartAnimationSignature>];
-export type ChartCorePluginSignatures = [UseChartIdSignature, UseChartDimensionsSignature, UseChartSeriesSignature, UseChartAnimationSignature, UseChartInteractionListenerSignature];
+export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.js").ChartPlugin<UseChartIdSignature>, import("../models/index.js").ChartPlugin<UseChartExperimentalFeaturesSignature>, import("../models/index.js").ChartPlugin<UseChartDimensionsSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesSignature>, import("../models/index.js").ChartPlugin<UseChartInteractionListenerSignature>, import("../models/index.js").ChartPlugin<UseChartAnimationSignature>];
+export type ChartCorePluginSignatures = [UseChartIdSignature, UseChartExperimentalFeaturesSignature, UseChartDimensionsSignature, UseChartSeriesSignature, UseChartAnimationSignature, UseChartInteractionListenerSignature];
 export interface ChartCorePluginParameters extends UseChartIdParameters {}

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

@@ -1,5 +1,6 @@
 import { useChartAnimation } from "./useChartAnimation/index.js";
 import { useChartDimensions } from "./useChartDimensions/index.js";
+import { useChartExperimentalFeatures } from "./useChartExperimentalFeature/index.js";
 import { useChartId } from "./useChartId/index.js";
 import { useChartSeries } from "./useChartSeries/index.js";
 import { useChartInteractionListener } from "./useChartInteractionListener/index.js";
@@ -8,4 +9,4 @@ import { useChartInteractionListener } from "./useChartInteractionListener/index
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the Charts components.
  */
-export const CHART_CORE_PLUGINS = [useChartId, useChartDimensions, useChartSeries, useChartInteractionListener, useChartAnimation];
+export const CHART_CORE_PLUGINS = [useChartId, useChartExperimentalFeatures, useChartDimensions, useChartSeries, useChartInteractionListener, useChartAnimation];

package/esm/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.selectors.d.ts

@@ -1,4 +1,4 @@
-export declare const selectorChartSkipAnimation: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartSkipAnimation: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.d.ts

@@ -3,7 +3,7 @@ import type { UseChartDimensionsSignature } from "./useChartDimensions.types.js"
 import { ChartState } from "../../models/chart.js";
 export declare const selectorChartDimensionsState: ChartRootSelector<UseChartDimensionsSignature>;
 export declare const selectorChartMargin: (state: ChartState<[UseChartDimensionsSignature]>) => import("./useChartDimensions.types.js").ChartMargin;
-export declare const selectorChartDrawingArea: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartDrawingArea: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<import("../../../index.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -15,7 +15,7 @@ export declare const selectorChartDrawingArea: import("reselect").Selector<impor
   top: number;
   bottom: number;
 }, []>;
-export declare const selectorChartPropsSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartPropsSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -23,7 +23,7 @@ export declare const selectorChartPropsSize: import("reselect").Selector<import(
   width: number | undefined;
   height: number | undefined;
 }, any[]>;
-export declare const selectorChartContainerSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartContainerSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/esm/internals/plugins/corePlugins/useChartExperimentalFeature/index.d.ts

@@ -0,0 +1,3 @@
+export { useChartExperimentalFeatures } from "./useChartExperimentalFeature.js";
+export type { UseChartExperimentalFeaturesSignature, UseChartExperimentalFeaturesParameters } from "./useChartExperimentalFeature.types.js";
+export * from "./useChartExperimentalFeature.selectors.js";

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

@@ -0,0 +1,2 @@
+export { useChartExperimentalFeatures } from "./useChartExperimentalFeature.js";
+export * from "./useChartExperimentalFeature.selectors.js";

package/esm/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.d.ts

@@ -0,0 +1,3 @@
+import { ChartPlugin } from "../../models/index.js";
+import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.js";
+export declare const useChartExperimentalFeatures: ChartPlugin<UseChartExperimentalFeaturesSignature>;

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

@@ -0,0 +1,27 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+export const useChartExperimentalFeatures = ({
+  params,
+  store
+}) => {
+  useEnhancedEffect(() => {
+    store.update(prevState => {
+      return _extends({}, prevState, {
+        experimentalFeatures: params.experimentalFeatures
+      });
+    });
+  }, [store, params.experimentalFeatures]);
+  return {};
+};
+useChartExperimentalFeatures.params = {
+  experimentalFeatures: true
+};
+useChartExperimentalFeatures.getInitialState = ({
+  experimentalFeatures
+}) => {
+  return {
+    experimentalFeatures
+  };
+};

package/esm/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.d.ts

@@ -0,0 +1,8 @@
+import { ChartRootSelector } from "../../utils/selectors.js";
+import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.js";
+export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature>;
+export declare const selectorPreferStrictDomainInLineCharts: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, boolean, any[]>;

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

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

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

@@ -0,0 +1,21 @@
+import { ChartPluginSignature } from "../../models/index.js";
+export interface ChartExperimentalFeatures {
+  /**
+   * Default domainLimit to strict for line chart x-axis.
+   */
+  preferStrictDomainInLineCharts?: boolean;
+}
+export interface UseChartExperimentalFeaturesParameters {
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures?: ChartExperimentalFeatures;
+}
+export interface UseChartExperimentalFeaturesState {
+  experimentalFeatures?: ChartExperimentalFeatures;
+}
+export type UseChartExperimentalFeaturesSignature = ChartPluginSignature<{
+  params: UseChartExperimentalFeaturesParameters;
+  defaultizedParams: UseChartExperimentalFeaturesParameters;
+  state: UseChartExperimentalFeaturesState;
+}>;

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

@@ -0,0 +1 @@
+export {};

package/esm/internals/plugins/corePlugins/useChartId/useChartId.selectors.d.ts

@@ -3,7 +3,7 @@
  * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
  * @returns {string} The id attribute of the chart.
  */
-export declare const selectorChartId: import("reselect").Selector<import("./useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartId: import("reselect").Selector<import("./useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/esm/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.d.ts

@@ -1,12 +1,12 @@
 import { ChartRootSelector } from "../../utils/selectors.js";
 import { UseChartSeriesSignature } from "./useChartSeries.types.js";
 export declare const selectorChartSeriesState: ChartRootSelector<UseChartSeriesSignature>;
-export declare const selectorChartSeriesProcessed: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartSeriesProcessed: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>, any[]>;
-export declare const selectorChartSeriesConfig: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartSeriesConfig: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;