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

package/esm/ChartsContainer/index.d.ts

@@ -0,0 +1 @@
+export * from "./ChartsContainer.js";

package/esm/ChartsContainer/index.js

@@ -0,0 +1 @@
+export * from "./ChartsContainer.js";

package/esm/ChartsContainer/useChartsContainerProps.d.ts

@@ -0,0 +1,12 @@
+import { type ChartsSurfaceProps } from "../ChartsSurface/index.js";
+import { type ChartDataProviderProps } from "../ChartDataProvider/index.js";
+import type { ChartsContainerProps } from "./ChartsContainer.js";
+import { type ChartSeriesType } from "../models/seriesType/config.js";
+import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { type ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
+export type UseChartsContainerPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = {
+  chartDataProviderProps: ChartDataProviderProps<TSeries, TSignatures>;
+  chartsSurfaceProps: ChartsSurfaceProps;
+  children: React.ReactNode;
+};
+export declare const useChartsContainerProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartsContainerProps<TSeries, TSignatures>) => UseChartsContainerPropsReturnValue<TSeries, TSignatures>;

package/esm/ChartsContainer/useChartsContainerProps.js

@@ -0,0 +1,102 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "enableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
+import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
+export const useChartsContainerProps = props => {
+  const _ref = props,
+    {
+      width,
+      height,
+      margin,
+      children,
+      series,
+      colors,
+      dataset,
+      desc,
+      onAxisClick,
+      highlightedAxis,
+      onHighlightedAxisChange,
+      tooltipAxis,
+      onTooltipAxisChange,
+      tooltipItem,
+      onTooltipItemChange,
+      disableVoronoi,
+      voronoiMaxRadius,
+      onItemClick,
+      disableAxisListener,
+      highlightedItem,
+      onHighlightChange,
+      sx,
+      title,
+      axesGap,
+      xAxis,
+      yAxis,
+      zAxis,
+      rotationAxis,
+      radiusAxis,
+      skipAnimation,
+      seriesConfig,
+      plugins,
+      localeText,
+      slots,
+      slotProps,
+      experimentalFeatures,
+      enableKeyboardNavigation,
+      brushConfig,
+      onHiddenItemsChange,
+      hiddenItems,
+      initialHiddenItems
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const chartsSurfaceProps = _extends({
+    title,
+    desc,
+    sx
+  }, other);
+  const chartDataProviderProps = {
+    margin,
+    series,
+    colors,
+    dataset,
+    disableAxisListener,
+    highlightedItem,
+    onHighlightChange,
+    onAxisClick,
+    highlightedAxis,
+    onHighlightedAxisChange,
+    tooltipAxis,
+    onTooltipAxisChange,
+    tooltipItem,
+    onTooltipItemChange,
+    disableVoronoi,
+    voronoiMaxRadius,
+    onItemClick,
+    axesGap,
+    xAxis,
+    yAxis,
+    zAxis,
+    rotationAxis,
+    radiusAxis,
+    skipAnimation,
+    width,
+    height,
+    localeText,
+    seriesConfig,
+    experimentalFeatures,
+    enableKeyboardNavigation,
+    brushConfig,
+    onHiddenItemsChange,
+    hiddenItems,
+    initialHiddenItems,
+    plugins: plugins ?? DEFAULT_PLUGINS,
+    slots,
+    slotProps
+  };
+  return {
+    chartDataProviderProps,
+    chartsSurfaceProps,
+    children
+  };
+};

package/esm/ChartsLabel/ChartsLabelMark.js

@@ -9,7 +9,7 @@ import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
 import { labelMarkClasses, useUtilityClasses } from "./labelMarkClasses.js";
 import { consumeThemeProps } from "../internals/consumeThemeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Root = styled('div', {
   name: 'MuiChartsLabelMark',
   slot: 'Root'
@@ -18,16 +18,14 @@ const Root = styled('div', {
     display: 'flex',
     width: 14,
     height: 14,
+    ['& > *']: {
+      width: '100%',
+      height: '100%'
+    },
     [`&.${labelMarkClasses.line}`]: {
       width: 16,
-      height: 'unset',
-      alignItems: 'center',
-      [`.${labelMarkClasses.mask}`]: {
-        height: 4,
-        width: '100%',
-        borderRadius: 1,
-        overflow: 'hidden'
-      }
+      height: 8,
+      alignItems: 'center'
     },
     [`&.${labelMarkClasses.square}`]: {
       height: 13,
@@ -41,14 +39,6 @@ const Root = styled('div', {
     },
     svg: {
       display: 'block'
-    },
-    [`& .${labelMarkClasses.mask} > *`]: {
-      height: '100%',
-      width: '100%'
-    },
-    [`& .${labelMarkClasses.mask}`]: {
-      height: '100%',
-      width: '100%'
     }
   };
 });
@@ -77,27 +67,39 @@ const ChartsLabelMark = consumeThemeProps('MuiChartsLabelMark', {
     "aria-hidden": "true",
     ref: ref
   }, other, {
-    children: /*#__PURE__*/_jsx("div", {
-      className: classes?.mask,
-      children: typeof Component === 'function' ? /*#__PURE__*/_jsx(Component, {
-        className: classes?.fill,
-        color: color
-      }) : /*#__PURE__*/_jsx("svg", {
-        viewBox: "0 0 24 24",
-        preserveAspectRatio: type === 'line' ? 'none' : undefined,
-        children: type === 'circle' ? /*#__PURE__*/_jsx("circle", {
+    children: typeof Component === 'function' ? /*#__PURE__*/_jsx(Component, {
+      className: classes?.fill,
+      color: color
+    }) : /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [type === 'circle' && /*#__PURE__*/_jsx("svg", {
+        viewBox: "0 0 15 15",
+        children: /*#__PURE__*/_jsx("circle", {
           className: classes?.fill,
-          r: "12",
-          cx: "12",
-          cy: "12",
+          r: "7.5",
+          cx: "7.5",
+          cy: "7.5",
           fill: color
-        }) : /*#__PURE__*/_jsx("rect", {
+        })
+      }), type === 'line' && /*#__PURE__*/_jsx("svg", {
+        viewBox: "0 0 16 8",
+        preserveAspectRatio: "none",
+        children: /*#__PURE__*/_jsx("path", {
+          className: classes?.fill,
+          d: "M 2 4 L 14 4",
+          stroke: color,
+          strokeWidth: "4",
+          strokeLinecap: "round",
+          vectorEffect: "non-scaling-stroke"
+        })
+      }), type !== 'line' && type !== 'circle' && /*#__PURE__*/_jsx("svg", {
+        viewBox: "0 0 13 13",
+        children: /*#__PURE__*/_jsx("rect", {
           className: classes?.fill,
-          width: "24",
-          height: "24",
+          width: "13",
+          height: "13",
           fill: color
         })
-      })
+      })]
     })
   }));
 });

package/esm/ChartsLabel/labelGradientClasses.d.ts

@@ -13,4 +13,4 @@ export interface ChartsLabelGradientClasses {
 }
 export declare function getLabelGradientUtilityClass(slot: string): string;
 export declare const labelGradientClasses: ChartsLabelGradientClasses;
-export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"root" | "mask" | "fill", string>;
+export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"root" | "fill" | "mask", string>;

package/esm/ChartsLabel/labelMarkClasses.d.ts

@@ -2,8 +2,6 @@ import type { ChartsLabelMarkProps } from "./ChartsLabelMark.js";
 export interface ChartsLabelMarkClasses {
   /** Styles applied to the root element. */
   root: string;
-  /** Styles applied to the "mask" that gives shape to the marks. */
-  mask: string;
   /** Styles applied to the mark type "line". */
   line: string;
   /** Styles applied to the mark type "square". */
@@ -15,4 +13,4 @@ export interface ChartsLabelMarkClasses {
 }
 export declare function getLabelMarkUtilityClass(slot: string): string;
 export declare const labelMarkClasses: ChartsLabelMarkClasses;
-export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"root" | "mask" | "fill", string>;
+export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"root" | "fill", string>;

package/esm/ChartsLabel/labelMarkClasses.js

@@ -4,14 +4,13 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getLabelMarkUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLabelMark', slot);
 }
-export const labelMarkClasses = generateUtilityClasses('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'mask', 'fill']);
+export const labelMarkClasses = generateUtilityClasses('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'fill']);
 export const useUtilityClasses = props => {
   const {
     type
   } = props;
   const slots = {
     root: typeof type === 'function' ? ['root'] : ['root', type],
-    mask: ['mask'],
     fill: ['fill']
   };
   return composeClasses(slots, getLabelMarkUtilityClass, props.classes);

package/esm/ChartsLegend/ChartsLegend.js

@@ -17,7 +17,6 @@ import { ChartsLabel } from "../ChartsLabel/ChartsLabel.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { selectorIsItemVisibleGetter } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
 import { useStore } from "../internals/store/useStore.js";
-import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeries/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RootElement = styled('ul', {
   name: 'MuiChartsLegend',
@@ -77,7 +76,6 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
     instance
   } = useChartContext();
   const store = useStore();
-  const seriesConfig = store.use(selectorChartSeriesConfig);
   const isItemVisible = store.use(selectorIsItemVisibleGetter);
   const {
       onItemClick,
@@ -87,15 +85,12 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isButton = Boolean(onItemClick || toggleVisibilityOnClick);
-  const Element = isButton ? 'button' : 'div';
   const handleClick = useEventCallback((item, i) => event => {
     if (onItemClick && item) {
       onItemClick(event, seriesContextBuilder(item), i);
     }
     if (toggleVisibilityOnClick) {
       instance.toggleItemVisibility({
-        // TODO: Remove in v9
-        // @ts-expect-error item always has type defined.
         type: item.type,
         seriesId: item.seriesId,
         dataIndex: item.dataIndex
@@ -111,9 +106,7 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
   }, other, {
     ownerState: props,
     children: data.items.map((item, i) => {
-      const isVisible = isItemVisible(seriesConfig, {
-        // TODO: Remove in v9
-        // @ts-expect-error item always has type defined.
+      const isVisible = isItemVisible({
         type: item.type,
         seriesId: item.seriesId,
         dataIndex: item.dataIndex
@@ -122,13 +115,20 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
         className: classes?.item,
         "data-series": item.seriesId,
         "data-index": item.dataIndex,
-        children: /*#__PURE__*/_jsxs(Element, {
+        children: isButton ? /*#__PURE__*/_jsxs("button", {
+          className: clsx(classes?.series, !isVisible && classes?.hidden),
+          onClick: handleClick(item, i),
+          type: "button",
+          children: [/*#__PURE__*/_jsx(ChartsLabelMark, {
+            className: classes?.mark,
+            color: item.color,
+            type: item.markType
+          }), /*#__PURE__*/_jsx(ChartsLabel, {
+            className: classes?.label,
+            children: item.label
+          })]
+        }) : /*#__PURE__*/_jsxs("div", {
           className: clsx(classes?.series, !isVisible && classes?.hidden),
-          role: isButton ? 'button' : undefined,
-          type: isButton ? 'button' : undefined
-          // @ts-expect-error onClick is only attached to a button
-          ,
-          onClick: isButton ? handleClick(item, i) : undefined,
           children: [/*#__PURE__*/_jsx(ChartsLabelMark, {
             className: classes?.mark,
             color: item.color,

package/esm/ChartsLegend/chartsLegendClasses.d.ts

@@ -18,5 +18,5 @@ export interface ChartsLegendClasses {
   /** Styles applied to the legend in row layout. */
   horizontal: string;
 }
-export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"item" | "series" | "root" | "label" | "mark" | "hidden", string>;
+export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "hidden" | "series" | "item", string>;
 export declare const legendClasses: ChartsLegendClasses;

package/esm/ChartsLegend/continuousColorLegendClasses.d.ts

@@ -22,5 +22,5 @@ export interface ContinuousColorLegendClasses {
   /** Styles applied to the series label. */
   label: string;
 }
-export declare const useUtilityClasses: (props: ContinuousColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "gradient" | "minLabel" | "maxLabel", string>;
+export declare const useUtilityClasses: (props: ContinuousColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "minLabel" | "maxLabel" | "gradient", string>;
 export declare const continuousColorLegendClasses: ContinuousColorLegendClasses;

package/esm/ChartsLegend/legendContext.types.d.ts

@@ -14,16 +14,20 @@ interface LegendItemContextBase {
 }
 export interface LegendItemParams extends Partial<Omit<SeriesLegendItemContext, 'type' | keyof LegendItemContextBase>>, Partial<Omit<PiecewiseColorLegendItemContext, 'type' | keyof LegendItemContextBase>>, LegendItemContextBase {
   /**
-   * The identifier of the legend element.
-   * Used for internal purpose such as `key` props
-   * @deprecated use `seriesId` and `dataIndex` instead
+   * The type of the series
    */
-  id: number | string;
+  type: ChartSeriesType;
+  markType: ChartsLabelMarkProps['type'];
+}
+export interface SeriesLegendItemParams extends Partial<Omit<SeriesLegendItemContext, 'type' | keyof LegendItemContextBase>>, LegendItemContextBase {
+  /**
+   * The identifier of the series
+   */
+  seriesId: SeriesId;
   /**
    * The type of the series
-   * This property is always defined, but marked as optional to avoid breaking changes. It will become required in a future major version.
    */
-  type?: ChartSeriesType;
+  type: ChartSeriesType;
   markType: ChartsLabelMarkProps['type'];
 }
 export interface SeriesLegendItemContext extends LegendItemContextBase {

package/esm/ChartsLegend/piecewiseColorLegendClasses.d.ts

@@ -28,5 +28,5 @@ export interface PiecewiseColorLegendClasses {
   /** Styles applied to the series label. */
   label: string;
 }
-export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"item" | "root" | "label" | "mark" | "minLabel" | "maxLabel", string>;
+export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "item" | "minLabel" | "maxLabel", string>;
 export declare const piecewiseColorLegendClasses: PiecewiseColorLegendClasses;

package/esm/ChartsOverlay/ChartsLoadingOverlay.js

@@ -1,24 +1,12 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["message"];
-import { styled } from '@mui/material/styles';
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { useChartsLocalization } from "../hooks/useChartsLocalization.js";
+import { StyledText } from "./common.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledText = styled('text', {
-  slot: 'internal',
-  shouldForwardProp: undefined
-})(({
-  theme
-}) => _extends({}, theme.typography.body2, {
-  stroke: 'none',
-  fill: (theme.vars || theme).palette.text.primary,
-  shapeRendering: 'crispEdges',
-  textAnchor: 'middle',
-  dominantBaseline: 'middle'
-}));
 export function ChartsLoadingOverlay(props) {
   const {
       message

package/esm/ChartsOverlay/ChartsNoDataOverlay.js

@@ -1,24 +1,12 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["message"];
-import { styled } from '@mui/material/styles';
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { useChartsLocalization } from "../hooks/useChartsLocalization.js";
+import { StyledText } from "./common.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledText = styled('text', {
-  slot: 'internal',
-  shouldForwardProp: undefined
-})(({
-  theme
-}) => _extends({}, theme.typography.body2, {
-  stroke: 'none',
-  fill: (theme.vars || theme).palette.text.primary,
-  shapeRendering: 'crispEdges',
-  textAnchor: 'middle',
-  dominantBaseline: 'middle'
-}));
 export function ChartsNoDataOverlay(props) {
   const {
       message

package/esm/ChartsOverlay/common.d.ts

@@ -0,0 +1 @@
+export declare const StyledText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGTextElementAttributes<SVGTextElement>, keyof import("react").SVGTextElementAttributes<SVGTextElement>>, {}>;

package/esm/ChartsOverlay/common.js

@@ -0,0 +1,16 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { styled } from '@mui/material/styles';
+export const StyledText = styled('text', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
+  theme
+}) => _extends({}, theme.typography.body2, {
+  stroke: 'none',
+  fill: (theme.vars || theme).palette.text.primary,
+  shapeRendering: 'crispEdges',
+  textAnchor: 'middle',
+  dominantBaseline: 'middle'
+}));

package/esm/ChartsSurface/ChartsSurface.js

@@ -12,7 +12,7 @@ import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients
 import { useSvgRef } from "../hooks/useSvgRef.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { selectorChartPropsHeight, selectorChartPropsWidth, selectorChartSvgWidth, selectorChartSvgHeight } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
-import { selectorChartsHasFocusedItem, selectorChartsIsKeyboardNavigationEnabled } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+import { selectorChartsIsKeyboardNavigationEnabled } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { useUtilityClasses } from "./chartsSurfaceClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartsSurfaceStyles = styled('svg', {
@@ -61,7 +61,6 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
   const propsWidth = store.use(selectorChartPropsWidth);
   const propsHeight = store.use(selectorChartPropsHeight);
   const isKeyboardNavigationEnabled = store.use(selectorChartsIsKeyboardNavigationEnabled);
-  const hasFocusedItem = store.use(selectorChartsHasFocusedItem);
   const svgRef = useSvgRef();
   const handleRef = useForkRef(svgRef, ref);
   const themeProps = useThemeProps({
@@ -82,10 +81,9 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
       width: propsWidth,
       height: propsHeight
     },
-    viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
+    viewBox: `0 0 ${svgWidth} ${svgHeight}`,
     className: clsx(classes.root, className),
-    tabIndex: isKeyboardNavigationEnabled ? 0 : undefined,
-    "data-has-focused-item": hasFocusedItem || undefined
+    tabIndex: isKeyboardNavigationEnabled ? 0 : undefined
   }, other, {
     onPointerEnter: event => {
       other.onPointerEnter?.(event);

package/esm/ChartsTooltip/ChartTooltip.types.d.ts

@@ -1,15 +1,16 @@
 import { type ChartsTooltipProps } from "./ChartsTooltip.js";
-export interface ChartsTooltipSlots {
+import { type TriggerOptions } from "./utils.js";
+export interface ChartsTooltipSlots<T extends TriggerOptions = TriggerOptions> {
   /**
    * Custom component for the tooltip popper.
    * @default ChartsTooltipRoot
    */
-  tooltip?: React.ElementType<ChartsTooltipProps>;
+  tooltip?: React.ElementType<ChartsTooltipProps<T>>;
 }
-export interface ChartsTooltipSlotProps {
+export interface ChartsTooltipSlotProps<T extends TriggerOptions = TriggerOptions> {
   /**
    * Custom component for the tooltip popper.
    * @default ChartsTooltipRoot
    */
-  tooltip?: Partial<ChartsTooltipProps>;
+  tooltip?: Partial<ChartsTooltipProps<T>>;
 }

package/esm/ChartsTooltip/ChartsAxisTooltipContent.d.ts

@@ -1,11 +1,18 @@
 import { type SxProps, type Theme } from '@mui/material/styles';
 import { type ChartsTooltipClasses } from "./chartsTooltipClasses.js";
+export interface ChartsAxisTooltipContentClasses extends ChartsTooltipClasses {}
 export interface ChartsAxisTooltipContentProps {
   /**
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<ChartsTooltipClasses>;
   sx?: SxProps<Theme>;
+  /**
+   * The sort in which series items are displayed in the tooltip.
+   * When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value.
+   * @default 'none'
+   */
+  sort?: 'none' | 'asc' | 'desc';
 }
 declare function ChartsAxisTooltipContent(props: ChartsAxisTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ChartsAxisTooltipContent {

package/esm/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -9,6 +9,9 @@ import { useAxesTooltip } from "./useAxesTooltip.js";
 import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ChartsAxisTooltipContent(props) {
+  const {
+    sort
+  } = props;
   const classes = useUtilityClasses(props.classes);
   const tooltipData = useAxesTooltip();
   if (tooltipData === null) {
@@ -24,13 +27,24 @@ function ChartsAxisTooltipContent(props) {
       axisFormattedValue,
       seriesItems
     }) => {
+      const sortedItems = sort && sort !== 'none' ? [...seriesItems].sort((a, b) => {
+        const aValue = a.value?.valueOf();
+        const bValue = b.value?.valueOf();
+        if (typeof aValue !== 'number') {
+          return 1;
+        }
+        if (typeof bValue !== 'number') {
+          return -1;
+        }
+        return sort === 'asc' ? aValue - bValue : bValue - aValue;
+      }) : seriesItems;
       return /*#__PURE__*/_jsxs(ChartsTooltipTable, {
         className: classes.table,
         children: [axisValue != null && !mainAxis.hideTooltip && /*#__PURE__*/_jsx(Typography, {
           component: "caption",
           children: axisFormattedValue
         }), /*#__PURE__*/_jsx("tbody", {
-          children: seriesItems.map(({
+          children: sortedItems.map(({
             seriesId,
             color,
             formattedValue,
@@ -74,6 +88,12 @@ process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The sort in which series items are displayed in the tooltip.
+   * When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value.
+   * @default 'none'
+   */
+  sort: PropTypes.oneOf(['none', 'asc', 'desc'])
 } : void 0;
 export { ChartsAxisTooltipContent };

package/esm/ChartsTooltip/ChartsItemTooltipContent.d.ts

@@ -1,5 +1,6 @@
 import { type SxProps, type Theme } from '@mui/material/styles';
 import { type ChartsTooltipClasses } from "./chartsTooltipClasses.js";
+export interface ChartsItemTooltipContentClasses extends ChartsTooltipClasses {}
 export interface ChartsItemTooltipContentProps {
   /**
    * Override or extend the styles applied to the component.

package/esm/ChartsTooltip/ChartsTooltip.d.ts

@@ -1,6 +1,14 @@
 import { type ChartsTooltipContainerProps } from "./ChartsTooltipContainer.js";
 import { type TriggerOptions } from "./utils.js";
-export interface ChartsTooltipProps<T extends TriggerOptions = TriggerOptions> extends Omit<ChartsTooltipContainerProps<T>, 'children'> {}
+export type ChartsTooltipProps<T extends TriggerOptions = TriggerOptions> = T extends TriggerOptions ? Omit<ChartsTooltipContainerProps<T>, 'children'> & {
+  /**
+   * Defines the sort order in which series items are displayed in the axis tooltip.
+   * When set to `none`, series are displayed in the same order they are provided in the series property. Otherwise they are sorted by their value.
+   * Only applies when `trigger='axis'`.
+   * @default 'none'
+   */
+  sort?: T extends 'axis' ? 'none' | 'asc' | 'desc' : never;
+} : never;
 /**
  * Demos:
  *
@@ -10,7 +18,7 @@ export interface ChartsTooltipProps<T extends TriggerOptions = TriggerOptions> e
  *
  * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
  */
-declare function ChartsTooltip(props: ChartsTooltipProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsTooltip<T extends TriggerOptions>(props: ChartsTooltipProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartsTooltip {
   var propTypes: any;
 }