@mui/x-charts 8.7.0 → 8.9.0

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.d.ts

@@ -1,21 +1,20 @@
-import { AxisId } from "../../../../models/axis.js";
-import type { AxisItemIdentifier } from "../useChartCartesianAxis/useChartCartesianInteraction.selectors.js";
-export declare const selectorChartsInteractionRotationAxisIndex: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+import { AxisId, AxisItemIdentifier } from "../../../../models/axis.js";
+export declare const selectorChartsInteractionRotationAxisIndex: import("reselect").Selector<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("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<{}> & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<import("./useChartPolarAxis.types.js").UseChartPolarAxisState>, number | null, [id?: AxisId | undefined]>;
-export declare const selectorChartsInteractionRotationAxisIndexes: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+export declare const selectorChartsInteractionRotationAxisIndexes: import("reselect").Selector<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("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<{}> & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<import("./useChartPolarAxis.types.js").UseChartPolarAxisState>, number[] | null, [ids: AxisId[]]>;
-export declare const selectorChartsInteractionRotationAxisValue: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartPolarAxis.types.js").UseChartPolarAxisState> & {
+export declare const selectorChartsInteractionRotationAxisValue: import("reselect").Selector<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("./useChartPolarAxis.types.js").UseChartPolarAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<{}> & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState>, any, [id?: AxisId | undefined]>;
-export declare const selectorChartsInteractionRotationAxisValues: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartPolarAxis.types.js").UseChartPolarAxisState> & {
+export declare const selectorChartsInteractionRotationAxisValues: import("reselect").Selector<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("./useChartPolarAxis.types.js").UseChartPolarAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -23,7 +22,7 @@ export declare const selectorChartsInteractionRotationAxisValues: import("resele
 /**
  * Get rotation-axis ids and corresponding data index that should be display in the tooltip.
  */
-export declare const selectorChartsInteractionTooltipRotationAxes: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+export declare const selectorChartsInteractionTooltipRotationAxes: import("reselect").Selector<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("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -35,7 +34,7 @@ export declare const selectorChartsInteractionTooltipRadiusAxes: import("reselec
 /**
  * Return `true` if the axis tooltip has something to display.
  */
-export declare const selectorChartsInteractionPolarAxisTooltip: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+export declare const selectorChartsInteractionPolarAxisTooltip: import("reselect").Selector<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("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/esm/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.selectors.d.ts

@@ -1,4 +1,4 @@
-export declare const selectorChartsVoronoiIsVoronoiEnabled: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & import("./useChartVoronoi.types.js").UseChartVoronoiState & Partial<{}> & {
+export declare const selectorChartsVoronoiIsVoronoiEnabled: import("reselect").Selector<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 & import("./useChartVoronoi.types.js").UseChartVoronoiState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/esm/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.selectors.d.ts

@@ -1,4 +1,4 @@
-export declare const selectorChartZAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & import("./useChartZAxis.types.js").UseChartZAxisState & Partial<{}> & {
+export declare const selectorChartZAxis: import("reselect").Selector<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 & import("./useChartZAxis.types.js").UseChartZAxisState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/esm/internals/plugins/utils/useLazySelectorEffect.d.ts

@@ -0,0 +1,7 @@
+import type { ChartStore } from "./ChartStore.js";
+import { ChartAnyPluginSignature, ChartState } from "../models/index.js";
+export declare function useLazySelectorEffect<TSignatures extends readonly ChartAnyPluginSignature[], Value>(store: ChartStore<TSignatures>, selector: (state: ChartState<TSignatures>) => Value, effect: (previous: Value, next: Value) => void,
+/**
+ * If true, the selector will be ignored.
+ */
+skip?: boolean): void;

package/esm/internals/plugins/utils/useLazySelectorEffect.js

@@ -0,0 +1,70 @@
+'use client';
+
+/* eslint-disable react-compiler/react-compiler */
+import * as React from 'react';
+import useLazyRef from '@mui/utils/useLazyRef';
+const noop = () => {};
+export function useLazySelectorEffect(store, selector, effect,
+/**
+ * If true, the selector will be ignored.
+ */
+skip) {
+  const instance = useLazyRef(initialize, {
+    store,
+    selector,
+    skip
+  }).current;
+  instance.effect = effect;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  React.useEffect(instance.onMount(skip), [skip]);
+}
+
+// `useLazyRef` typings are incorrect, `params` should not be optional
+function initialize(params) {
+  const {
+    store,
+    selector,
+    skip: initialSkip
+  } = params;
+  let isRunning = false;
+  let previousState;
+
+  // We want a single subscription done right away and cleared on unmount only,
+  // but React triggers `useOnMount` multiple times in dev, so we need to manage
+  // the subscription anyway.
+  const subscribe = () => {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    instance.dispose ??= store.subscribe(state => {
+      const nextState = selector(state);
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      instance.effect(previousState, nextState);
+      previousState = nextState;
+    });
+  };
+  const instance = {
+    effect: noop,
+    dispose: null,
+    onMount: skip => () => {
+      if (skip) {
+        return undefined;
+      }
+      if (!isRunning) {
+        // Initialize values
+        isRunning = true;
+        previousState = selector(store.value);
+      }
+      subscribe();
+      return () => {
+        instance.dispose?.();
+        instance.dispose = null;
+      };
+    }
+  };
+  if (!initialSkip) {
+    // Initialize values
+    isRunning = true;
+    previousState = selector(store.value);
+    subscribe();
+  }
+  return instance;
+}

package/esm/internals/store/useCharts.d.ts

@@ -16,7 +16,7 @@ import { ChartSeriesConfig } from "../plugins/models/seriesConfig/index.js";
  */
 export declare function useCharts<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]>(inPlugins: ConvertSignaturesIntoPlugins<TSignatures>, props: Partial<UseChartBaseProps<TSignatures>>, seriesConfig: ChartSeriesConfig<TSeriesType>): {
   contextValue: {
-    store: ChartStore<readonly [import("../index.js").UseChartIdSignature, import("../index.js").UseChartDimensionsSignature, import("../index.js").UseChartSeriesSignature, import("../plugins/corePlugins/useChartAnimation/index.js").UseChartAnimationSignature, import("../index.js").UseChartInteractionListenerSignature, ...TSignatures]> & UseChartInteractionState;
+    store: ChartStore<readonly [import("../index.js").UseChartIdSignature, import("../plugins/corePlugins/useChartExperimentalFeature/index.js").UseChartExperimentalFeaturesSignature, import("../index.js").UseChartDimensionsSignature, import("../index.js").UseChartSeriesSignature, import("../plugins/corePlugins/useChartAnimation/index.js").UseChartAnimationSignature, import("../index.js").UseChartInteractionListenerSignature, ...TSignatures]> & UseChartInteractionState;
     publicAPI: ChartPublicAPI<TSignatures>;
     instance: ChartInstance<TSignatures>;
     svgRef: React.RefObject<SVGSVGElement | null>;

package/esm/models/axis.d.ts

@@ -281,11 +281,37 @@ export type AxisValueFormatterContext<S extends ScaleName = ScaleName> = {
    * - `'legend'` The value is displayed in the legend when using color legend.
    * - `'zoom-slider-tooltip'` The value is displayed in the zoom slider tooltip.
    */
-  location: 'tick' | 'tooltip' | 'zoom-slider-tooltip';
+  location: 'tooltip' | 'zoom-slider-tooltip';
   /**
    * The d3-scale instance associated to the axis.
    */
   scale: AxisScaleConfig[S]['scale'];
+} | {
+  /**
+   * Location indicates where the value will be displayed.
+   * - `'tick'` The value is displayed on the axis ticks.
+   * - `'tooltip'` The value is displayed in the tooltip when hovering the chart.
+   * - `'legend'` The value is displayed in the legend when using color legend.
+   * - `'zoom-slider-tooltip'` The value is displayed in the zoom slider tooltip.
+   */
+  location: 'tick';
+  /**
+   * The d3-scale instance associated to the axis.
+   */
+  scale: AxisScaleConfig[S]['scale'];
+  /**
+   * The tick label shown by default if the value isn't formatted.
+   * This value might be an empty string if no tick label should be displayed, which is particularly useful in log
+   * scales where we want to show ticks to demonstrate it's a log scale, but not labels to avoid them overlapping.
+   * @see See {@link https://d3js.org/d3-scale/log#log_tickFormat D3 log scale docs} for more details.
+   */
+  defaultTickLabel: string;
+  /**
+   * A suggestion of the number of ticks to show.
+   * Can be provided to the scale's `ticks` method to compute the ticks, or to `tickFormat` to format the ticks.
+   * Can be `undefined` if the scale doesn't support it, e.g., band, point scales.
+   */
+  tickNumber?: number;
 };
 /**
  * Config that is shared between cartesian and polar axes.
@@ -408,6 +434,21 @@ export interface ChartsAxisData {
    */
   seriesValues: Record<string, number | null | undefined>;
 }
+export type CartesianDirection = 'x' | 'y';
+export type PolarDirection = 'rotation' | 'radius';
+/**
+ * Identifies a data point within an axis.
+ */
+export interface AxisItemIdentifier {
+  /**
+   * The axis id.
+   */
+  axisId: AxisId;
+  /**
+   * The data index.
+   */
+  dataIndex: number;
+}
 export type XAxis<S extends ScaleName = ScaleName, V = any> = S extends ScaleName ? MakeOptional<AxisConfig<S, V, ChartsXAxisProps>, 'id'> : never;
 export type YAxis<S extends ScaleName = ScaleName, V = any> = S extends ScaleName ? MakeOptional<AxisConfig<S, V, ChartsYAxisProps>, 'id'> : never;
 export type RotationAxis<S extends ScaleName = ScaleName, V = any> = S extends ScaleName ? AxisConfig<S, V, ChartsRotationAxisProps> : never;

package/esm/models/axis.js

@@ -22,6 +22,10 @@ export function isPointScaleConfig(scaleConfig) {
  * The data format returned by onAxisClick.
  */
 
+/**
+ * Identifies a data point within an axis.
+ */
+
 /**
  * The axis configuration with missing values filled with default values.
  */

package/esm/models/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./seriesType/index.js";
 export * from "./stacking.js";
 export * from "./slots/index.js";
-export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, ChartsAxisData, XAxis, YAxis, RadiusAxis, RotationAxis, AxisValueFormatterContext } from "./axis.js";
+export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, ChartsAxisData, XAxis, YAxis, RadiusAxis, RotationAxis, AxisItemIdentifier, AxisValueFormatterContext } from "./axis.js";
 export type { PropsFromSlot } from '@mui/x-internals/slots';
 export type { Position } from "./position.js";
 export type { CurveType } from "./curve.js";

package/esm/models/seriesType/bar.d.ts

@@ -25,6 +25,16 @@ export interface BarSeriesType extends CommonSeriesType<number | null>, Cartesia
    * @default 'diverging'
    */
   stackOffset?: StackOffsetType;
+  /**
+   * If provided, the value will be used as the minimum size of the bar in pixels.
+   * This is useful to avoid bars with a size of 0.
+   *
+   * The property is ignored if the series value is `null` or `0`.
+   * It also doesn't work with stacked series.
+   *
+   * @default 0px
+   */
+  minBarSize?: number;
 }
 /**
  * An object that allows to identify a single bar.
@@ -35,4 +45,4 @@ export type BarItemIdentifier = {
   seriesId: SeriesId;
   dataIndex: number;
 };
-export interface DefaultizedBarSeriesType extends DefaultizedProps<BarSeriesType, CommonDefaultizedProps | 'color' | 'layout'> {}
+export interface DefaultizedBarSeriesType extends DefaultizedProps<BarSeriesType, CommonDefaultizedProps | 'color' | 'layout' | 'minBarSize'> {}

package/esm/models/seriesType/common.d.ts

@@ -1,6 +1,6 @@
-import type { ChartsLabelMarkProps } from "../../ChartsLabel/index.js";
 import { HighlightScope } from "../../internals/plugins/featurePlugins/useChartHighlight/highlightConfig.types.js";
 import type { StackOffsetType, StackOrderType } from "../stacking.js";
+import type { ChartsLabelMarkType } from "../../ChartsLabel/ChartsLabelMark.js";
 export type SeriesId = number | string;
 export type SeriesValueFormatterContext = {
   /**
@@ -10,7 +10,13 @@ export type SeriesValueFormatterContext = {
 };
 export type SeriesValueFormatter<TValue> = (value: TValue, context: SeriesValueFormatterContext) => string | null;
 export type CommonSeriesType<TValue> = {
+  /**
+   * The id of this series.
+   */
   id?: SeriesId;
+  /**
+   * Color to use when displaying the series.
+   */
   color?: string;
   /**
    * Formatter used to render values in tooltip or other data display.
@@ -22,13 +28,13 @@ export type CommonSeriesType<TValue> = {
   /**
    * The scope to apply when the series is highlighted.
    */
-  highlightScope?: Partial<HighlightScope>;
+  highlightScope?: HighlightScope;
   /**
    * Defines the mark type for the series.
    *
    * There is a default mark type for each series type.
    */
-  labelMarkType?: ChartsLabelMarkProps['type'];
+  labelMarkType?: ChartsLabelMarkType;
 };
 export type CommonDefaultizedProps = 'id' | 'valueFormatter' | 'data';
 export type CartesianSeriesType = {

package/esm/models/seriesType/line.d.ts

@@ -34,7 +34,9 @@ export interface LineSeriesType extends CommonSeriesType<number | null>, Cartesi
    * The key used to retrieve data from the dataset.
    */
   dataKey?: string;
-  stack?: string;
+  /**
+   * If `true`, the series is rendered as an area instead of a line.
+   */
   area?: boolean;
   /**
    * The label to display on the tooltip or the legend. It can be a string or a function.

package/esm/models/seriesType/scatter.d.ts

@@ -1,4 +1,4 @@
-import { DefaultizedProps } from '@mui/x-internals/types';
+import { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
 import { CartesianSeriesType, CommonDefaultizedProps, CommonSeriesType, SeriesId } from "./common.js";
 export type ScatterValueType = {
   x: number;
@@ -12,6 +12,9 @@ export type ScatterValueType = {
 export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | null>, CartesianSeriesType {
   type: 'scatter';
   data?: readonly ScatterValueType[];
+  /**
+   * Size of the markers in the scatter plot, in pixels.
+   */
   markerSize?: number;
   /**
    * The label to display on the tooltip or the legend. It can be a string or a function.
@@ -50,6 +53,13 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | n
      */
     id?: string;
   };
+  preview?: {
+    /**
+     * The size of the preview marker in pixels.
+     * @default 1
+     */
+    markerSize?: number;
+  };
 }
 /**
  * An object that allows to identify a single scatter item.
@@ -60,4 +70,6 @@ export type ScatterItemIdentifier = {
   seriesId: SeriesId;
   dataIndex: number;
 };
-export interface DefaultizedScatterSeriesType extends DefaultizedProps<ScatterSeriesType, CommonDefaultizedProps | 'color' | 'markerSize'> {}
+export interface DefaultizedScatterSeriesType extends DefaultizedProps<ScatterSeriesType, CommonDefaultizedProps | 'color' | 'markerSize'> {
+  preview: MakeRequired<NonNullable<ScatterSeriesType['preview']>, 'markerSize'>;
+}

package/esm/tests/web-components.js

@@ -0,0 +1,49 @@
+const renderSymbol = Symbol.for('render');
+const connectedSymbol = Symbol.for('connected');
+const contextSymbol = Symbol.for('context');
+const propsSymbol = Symbol.for('props');
+
+// This function creates a custom web component that wraps a React component.
+// Adapted from https://github.com/bitovi/react-to-web-component/blob/b1372bfd7bc67fe49920db840f1ed9cf736b2724/packages/core/src/core.ts
+export function reactToWebComponent(ReactComponent, options, renderer) {
+  class ReactWebComponent extends HTMLElement {
+    static get observedAttributes() {
+      return [];
+    }
+    constructor() {
+      super();
+      this[connectedSymbol] = true;
+      this[contextSymbol] = void 0;
+      this[propsSymbol] = {};
+      this.container = void 0;
+      if (options.shadow) {
+        this.container = this.attachShadow({
+          mode: options.shadow
+        });
+      } else {
+        this.container = this;
+      }
+      this[propsSymbol].container = this.container;
+    }
+    connectedCallback() {
+      this[connectedSymbol] = true;
+      this[renderSymbol]();
+    }
+    disconnectedCallback() {
+      this[connectedSymbol] = false;
+      if (this[contextSymbol]) {
+        renderer.unmount(this[contextSymbol]);
+      }
+      delete this[contextSymbol];
+    }
+    [renderSymbol]() {
+      if (!this[connectedSymbol]) {
+        return;
+      }
+      if (!this[contextSymbol]) {
+        this[contextSymbol] = renderer.mount(this.container, ReactComponent, this[propsSymbol]);
+      }
+    }
+  }
+  return ReactWebComponent;
+}

package/esm/themeAugmentation/components.d.ts

@@ -33,6 +33,9 @@ export interface ChartsComponents<Theme = unknown> {
     defaultProps?: ComponentsProps['MuiChartsSurface'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiChartsSurface'];
   };
+  MuiChartDataProvider?: {
+    defaultProps?: ComponentsProps['MuiChartDataProvider'];
+  };
   MuiBarChart?: {
     defaultProps?: ComponentsProps['MuiBarChart'];
   };

package/esm/themeAugmentation/props.d.ts

@@ -9,6 +9,7 @@ import { ScatterChartProps } from "../ScatterChart/ScatterChart.js";
 import { PieChartProps } from "../PieChart/PieChart.js";
 import { ChartsXAxisProps, ChartsYAxisProps } from "../models/axis.js";
 import { ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
+import { ChartDataProviderProps } from "../ChartDataProvider/index.js";
 export interface ChartsComponentsPropsList {
   MuiChartsXAxis: ChartsXAxisProps;
   MuiChartsYAxis: ChartsYAxisProps;
@@ -17,6 +18,7 @@ export interface ChartsComponentsPropsList {
   MuiChartsLocalizationProvider: ChartsLocalizationProviderProps;
   MuiChartsTooltip: ChartsTooltipProps;
   MuiChartsSurface: ChartsSurfaceProps;
+  MuiChartDataProvider: ChartDataProviderProps;
   MuiBarChart: BarChartProps;
   MuiBarLabel: BarLabelProps;
   MuiLineChart: LineChartProps;

package/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/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[];