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

package/ChartsContainer/index.d.ts

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

package/ChartsContainer/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsContainer = require("./ChartsContainer");
+Object.keys(_ChartsContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsContainer[key];
+    }
+  });
+});

package/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/ChartsContainer/useChartsContainerProps.js

@@ -0,0 +1,109 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartsContainerProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _allPlugins = require("../internals/plugins/allPlugins");
+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"];
+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 = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const chartsSurfaceProps = (0, _extends2.default)({
+    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 ?? _allPlugins.DEFAULT_PLUGINS,
+    slots,
+    slotProps
+  };
+  return {
+    chartDataProviderProps,
+    chartsSurfaceProps,
+    children
+  };
+};
+exports.useChartsContainerProps = useChartsContainerProps;

package/ChartsLabel/ChartsLabelMark.js

@@ -25,16 +25,14 @@ const Root = (0, _styles.styled)('div', {
     display: 'flex',
     width: 14,
     height: 14,
+    ['& > *']: {
+      width: '100%',
+      height: '100%'
+    },
     [`&.${_labelMarkClasses.labelMarkClasses.line}`]: {
       width: 16,
-      height: 'unset',
-      alignItems: 'center',
-      [`.${_labelMarkClasses.labelMarkClasses.mask}`]: {
-        height: 4,
-        width: '100%',
-        borderRadius: 1,
-        overflow: 'hidden'
-      }
+      height: 8,
+      alignItems: 'center'
     },
     [`&.${_labelMarkClasses.labelMarkClasses.square}`]: {
       height: 13,
@@ -48,14 +46,6 @@ const Root = (0, _styles.styled)('div', {
     },
     svg: {
       display: 'block'
-    },
-    [`& .${_labelMarkClasses.labelMarkClasses.mask} > *`]: {
-      height: '100%',
-      width: '100%'
-    },
-    [`& .${_labelMarkClasses.labelMarkClasses.mask}`]: {
-      height: '100%',
-      width: '100%'
     }
   };
 });
@@ -84,27 +74,39 @@ const ChartsLabelMark = exports.ChartsLabelMark = (0, _consumeThemeProps.consume
     "aria-hidden": "true",
     ref: ref
   }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: classes?.mask,
-      children: typeof Component === 'function' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
-        className: classes?.fill,
-        color: color
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
-        viewBox: "0 0 24 24",
-        preserveAspectRatio: type === 'line' ? 'none' : undefined,
-        children: type === 'circle' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+    children: typeof Component === 'function' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      className: classes?.fill,
+      color: color
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [type === 'circle' && /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+        viewBox: "0 0 15 15",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
           className: classes?.fill,
-          r: "12",
-          cx: "12",
-          cy: "12",
+          r: "7.5",
+          cx: "7.5",
+          cy: "7.5",
           fill: color
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+        })
+      }), type === 'line' && /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+        viewBox: "0 0 16 8",
+        preserveAspectRatio: "none",
+        children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("svg", {
+        viewBox: "0 0 13 13",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
           className: classes?.fill,
-          width: "24",
-          height: "24",
+          width: "13",
+          height: "13",
           fill: color
         })
-      })
+      })]
     })
   }));
 });

package/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/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/ChartsLabel/labelMarkClasses.js

@@ -12,14 +12,13 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getLabelMarkUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiChartsLabelMark', slot);
 }
-const labelMarkClasses = exports.labelMarkClasses = (0, _generateUtilityClasses.default)('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'mask', 'fill']);
+const labelMarkClasses = exports.labelMarkClasses = (0, _generateUtilityClasses.default)('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'fill']);
 const useUtilityClasses = props => {
   const {
     type
   } = props;
   const slots = {
     root: typeof type === 'function' ? ['root'] : ['root', type],
-    mask: ['mask'],
     fill: ['fill']
   };
   return (0, _composeClasses.default)(slots, getLabelMarkUtilityClass, props.classes);

package/ChartsLegend/ChartsLegend.js

@@ -23,7 +23,6 @@ var _ChartsLabel = require("../ChartsLabel/ChartsLabel");
 var _ChartProvider = require("../context/ChartProvider");
 var _useChartVisibilityManager = require("../internals/plugins/featurePlugins/useChartVisibilityManager");
 var _useStore = require("../internals/store/useStore");
-var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["direction", "onItemClick", "className", "classes", "toggleVisibilityOnClick"];
 const RootElement = (0, _styles.styled)('ul', {
@@ -84,7 +83,6 @@ const ChartsLegend = exports.ChartsLegend = (0, _consumeSlots.consumeSlots)('Mui
     instance
   } = (0, _ChartProvider.useChartContext)();
   const store = (0, _useStore.useStore)();
-  const seriesConfig = store.use(_useChartSeries.selectorChartSeriesConfig);
   const isItemVisible = store.use(_useChartVisibilityManager.selectorIsItemVisibleGetter);
   const {
       onItemClick,
@@ -94,15 +92,12 @@ const ChartsLegend = exports.ChartsLegend = (0, _consumeSlots.consumeSlots)('Mui
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isButton = Boolean(onItemClick || toggleVisibilityOnClick);
-  const Element = isButton ? 'button' : 'div';
   const handleClick = (0, _useEventCallback.default)((item, i) => event => {
     if (onItemClick && item) {
       onItemClick(event, (0, _onClickContextBuilder.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
@@ -118,9 +113,7 @@ const ChartsLegend = exports.ChartsLegend = (0, _consumeSlots.consumeSlots)('Mui
   }, 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
@@ -129,13 +122,20 @@ const ChartsLegend = exports.ChartsLegend = (0, _consumeSlots.consumeSlots)('Mui
         className: classes?.item,
         "data-series": item.seriesId,
         "data-index": item.dataIndex,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Element, {
+        children: isButton ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+          className: (0, _clsx.default)(classes?.series, !isVisible && classes?.hidden),
+          onClick: handleClick(item, i),
+          type: "button",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+            className: classes?.mark,
+            color: item.color,
+            type: item.markType
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabel.ChartsLabel, {
+            className: classes?.label,
+            children: item.label
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: (0, _clsx.default)(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__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
             className: classes?.mark,
             color: item.color,

package/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/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/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/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/ChartsOverlay/ChartsLoadingOverlay.js

@@ -6,25 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsLoadingOverlay = ChartsLoadingOverlay;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _styles = require("@mui/material/styles");
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useChartsLocalization = require("../hooks/useChartsLocalization");
+var _common = require("./common");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["message"];
-const StyledText = (0, _styles.styled)('text', {
-  slot: 'internal',
-  shouldForwardProp: undefined
-})(({
-  theme
-}) => (0, _extends2.default)({}, theme.typography.body2, {
-  stroke: 'none',
-  fill: (theme.vars || theme).palette.text.primary,
-  shapeRendering: 'crispEdges',
-  textAnchor: 'middle',
-  dominantBaseline: 'middle'
-}));
 function ChartsLoadingOverlay(props) {
   const {
       message
@@ -39,7 +27,7 @@ function ChartsLoadingOverlay(props) {
   const {
     localeText
   } = (0, _useChartsLocalization.useChartsLocalization)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.StyledText, (0, _extends2.default)({
     x: left + width / 2,
     y: top + height / 2
   }, other, {

package/ChartsOverlay/ChartsNoDataOverlay.js

@@ -6,25 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsNoDataOverlay = ChartsNoDataOverlay;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _styles = require("@mui/material/styles");
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useChartsLocalization = require("../hooks/useChartsLocalization");
+var _common = require("./common");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["message"];
-const StyledText = (0, _styles.styled)('text', {
-  slot: 'internal',
-  shouldForwardProp: undefined
-})(({
-  theme
-}) => (0, _extends2.default)({}, theme.typography.body2, {
-  stroke: 'none',
-  fill: (theme.vars || theme).palette.text.primary,
-  shapeRendering: 'crispEdges',
-  textAnchor: 'middle',
-  dominantBaseline: 'middle'
-}));
 function ChartsNoDataOverlay(props) {
   const {
       message
@@ -39,7 +27,7 @@ function ChartsNoDataOverlay(props) {
   const {
     localeText
   } = (0, _useChartsLocalization.useChartsLocalization)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.StyledText, (0, _extends2.default)({
     x: left + width / 2,
     y: top + height / 2
   }, other, {

package/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/ChartsOverlay/common.js

@@ -0,0 +1,22 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledText = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styles = require("@mui/material/styles");
+const StyledText = exports.StyledText = (0, _styles.styled)('text', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
+  theme
+}) => (0, _extends2.default)({}, theme.typography.body2, {
+  stroke: 'none',
+  fill: (theme.vars || theme).palette.text.primary,
+  shapeRendering: 'crispEdges',
+  textAnchor: 'middle',
+  dominantBaseline: 'middle'
+}));

package/ChartsSurface/ChartsSurface.js

@@ -68,7 +68,6 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
   const propsWidth = store.use(_useChartDimensions.selectorChartPropsWidth);
   const propsHeight = store.use(_useChartDimensions.selectorChartPropsHeight);
   const isKeyboardNavigationEnabled = store.use(_useChartKeyboardNavigation.selectorChartsIsKeyboardNavigationEnabled);
-  const hasFocusedItem = store.use(_useChartKeyboardNavigation.selectorChartsHasFocusedItem);
   const svgRef = (0, _useSvgRef.useSvgRef)();
   const handleRef = (0, _useForkRef.default)(svgRef, ref);
   const themeProps = (0, _styles.useThemeProps)({
@@ -89,10 +88,9 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
       width: propsWidth,
       height: propsHeight
     },
-    viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
+    viewBox: `0 0 ${svgWidth} ${svgHeight}`,
     className: (0, _clsx.default)(classes.root, className),
-    tabIndex: isKeyboardNavigationEnabled ? 0 : undefined,
-    "data-has-focused-item": hasFocusedItem || undefined
+    tabIndex: isKeyboardNavigationEnabled ? 0 : undefined
   }, other, {
     onPointerEnter: event => {
       other.onPointerEnter?.(event);

package/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/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/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -15,6 +15,9 @@ var _useAxesTooltip = require("./useAxesTooltip");
 var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsAxisTooltipContent(props) {
+  const {
+    sort
+  } = props;
   const classes = (0, _chartsTooltipClasses.useUtilityClasses)(props.classes);
   const tooltipData = (0, _useAxesTooltip.useAxesTooltip)();
   if (tooltipData === null) {
@@ -30,13 +33,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__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipTable, {
         className: classes.table,
         children: [axisValue != null && !mainAxis.hideTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           component: "caption",
           children: axisFormattedValue
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
-          children: seriesItems.map(({
+          children: sortedItems.map(({
             seriesId,
             color,
             formattedValue,
@@ -80,5 +94,11 @@ process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.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.default.oneOf(['none', 'asc', 'desc'])
 } : void 0;

package/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/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;
 }