@mui/x-charts 6.18.0 → 6.18.2

package/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsYReferenceLine = ChartsYReferenceLine;
+exports.getYReferenceLineClasses = getYReferenceLineClasses;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _hooks = require("../hooks");
+var _common = require("./common");
+var _ChartsText = require("../internals/components/ChartsText");
+var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const getTextParams = ({
+  left,
+  width,
+  spacingX,
+  labelAlign = 'middle'
+}) => {
+  switch (labelAlign) {
+    case 'start':
+      return {
+        x: left + spacingX,
+        style: {
+          dominantBaseline: 'auto',
+          textAnchor: 'start'
+        }
+      };
+    case 'end':
+      return {
+        x: left + width - spacingX,
+        style: {
+          dominantBaseline: 'auto',
+          textAnchor: 'end'
+        }
+      };
+    default:
+      return {
+        x: left + width / 2,
+        style: {
+          dominantBaseline: 'auto',
+          textAnchor: 'middle'
+        }
+      };
+  }
+};
+let warnedOnce = false;
+function getYReferenceLineClasses(classes) {
+  return (0, _composeClasses.default)({
+    root: ['root', 'horizontal'],
+    line: ['line'],
+    label: ['label']
+  }, _chartsReferenceLineClasses.getReferenceLineUtilityClass, classes);
+}
+function ChartsYReferenceLine(props) {
+  const {
+    y,
+    label = '',
+    spacing = 5,
+    classes: inClasses,
+    labelAlign,
+    lineStyle,
+    labelStyle,
+    axisId
+  } = props;
+  const {
+    left,
+    width
+  } = (0, _hooks.useDrawingArea)();
+  const yAxisScale = (0, _hooks.useYScale)(axisId);
+  const yPosition = yAxisScale(y);
+  if (yPosition === undefined) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!warnedOnce) {
+        warnedOnce = true;
+        console.error(`MUI X: the value ${y} does not exist in the data of y axis with id ${axisId}.`);
+      }
+    }
+    return null;
+  }
+  const d = `M ${left} ${yPosition} l ${width} 0`;
+  const classes = getYReferenceLineClasses(inClasses);
+  const spacingX = typeof spacing === 'object' ? spacing.x ?? 0 : spacing;
+  const spacingY = typeof spacing === 'object' ? spacing.y ?? 0 : spacing;
+  const textParams = (0, _extends2.default)({
+    y: yPosition - spacingY,
+    text: label,
+    fontSize: 12
+  }, getTextParams({
+    left,
+    width,
+    spacingX,
+    labelAlign
+  }), {
+    className: classes.label
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_common.ReferenceLineRoot, {
+    className: classes.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: d,
+      className: classes.line,
+      style: lineStyle
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, (0, _extends2.default)({}, textParams, {
+      style: (0, _extends2.default)({}, textParams.style, labelStyle)
+    }))]
+  });
+}

package/ChartsReferenceLine/chartsReferenceLineClasses.d.ts

@@ -0,0 +1,15 @@
+export interface ChartsReferenceLineClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if the reference line is vertical. */
+    vertical: string;
+    /** Styles applied to the root element if the reference line is horizontal. */
+    horizontal: string;
+    /** Styles applied to the reference line. */
+    line: string;
+    /** Styles applied to the reference label. */
+    label: string;
+}
+export type ChartsReferenceLineClassKey = keyof ChartsReferenceLineClasses;
+export declare function getReferenceLineUtilityClass(slot: string): string;
+export declare const referenceLineClasses: ChartsReferenceLineClasses;

package/ChartsReferenceLine/chartsReferenceLineClasses.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getReferenceLineUtilityClass = getReferenceLineUtilityClass;
+exports.referenceLineClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getReferenceLineUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsReferenceLine', slot);
+}
+const referenceLineClasses = exports.referenceLineClasses = (0, _generateUtilityClasses.default)('MuiChartsReferenceLine', ['root', 'vertical', 'horizontal', 'line', 'label']);

package/ChartsReferenceLine/common.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { ChartsReferenceLineClasses } from './chartsReferenceLineClasses';
+import { ChartsTextStyle } from '../internals/components/ChartsText';
+export type CommonChartsReferenceLineProps = {
+    /**
+     * The alignment if the label is in the chart drawing area.
+     * @default 'middle'
+     */
+    labelAlign?: 'start' | 'middle' | 'end';
+    /**
+     * The label to display along the reference line.
+     */
+    label?: string;
+    /**
+     * Additional space arround the label in px.
+     * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+     * @default 5
+     */
+    spacing?: number | {
+        x?: number;
+        y?: number;
+    };
+    /**
+     * The id of the axis used for the reference value.
+     * @default The `id` of the first defined axis.
+     */
+    axisId?: string;
+    /**
+     * The style applied to the label.
+     */
+    labelStyle?: ChartsTextStyle;
+    /**
+     * The style applied to the line.
+     */
+    lineStyle?: React.CSSProperties;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<ChartsReferenceLineClasses>;
+};
+export declare const ReferenceLineRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").SVGProps<SVGGElement>, {}>;

package/ChartsReferenceLine/common.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReferenceLineRoot = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styles = require("@mui/material/styles");
+var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
+const ReferenceLineRoot = exports.ReferenceLineRoot = (0, _styles.styled)('g')(({
+  theme
+}) => ({
+  [`& .${_chartsReferenceLineClasses.referenceLineClasses.line}`]: {
+    fill: 'none',
+    stroke: (theme.vars || theme).palette.text.primary,
+    shapeRendering: 'crispEdges',
+    strokeWidth: 1,
+    pointerEvents: 'none'
+  },
+  [`& .${_chartsReferenceLineClasses.referenceLineClasses.label}`]: (0, _extends2.default)({
+    fill: (theme.vars || theme).palette.text.primary,
+    stroke: 'none',
+    pointerEvents: 'none',
+    fontSize: 12
+  }, theme.typography.body1)
+}));

package/ChartsReferenceLine/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ChartsReferenceLine';
+export * from './chartsReferenceLineClasses';

package/ChartsReferenceLine/index.js

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

package/ChartsReferenceLine/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/ChartsReferenceLine/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/ChartsSurface.d.ts

@@ -7,7 +7,13 @@ type ViewBox = {
     height?: number;
 };
 export interface ChartsSurfaceProps {
+    /**
+     * The width of the chart in px.
+     */
     width: number;
+    /**
+     * The height of the chart in px.
+     */
     height: number;
     viewBox?: ViewBox;
     className?: string;
@@ -15,6 +21,11 @@ export interface ChartsSurfaceProps {
     desc?: string;
     sx?: SxProps<Theme>;
     children?: React.ReactNode;
+    /**
+     * If `true`, the charts will not listen to the mouse move event.
+     * It might break interactive features, but will improve performance.
+     * @default false
+     */
     disableAxisListener?: boolean;
 }
 export declare const ChartsSurface: React.ForwardRefExoticComponent<ChartsSurfaceProps & React.RefAttributes<SVGSVGElement>>;

package/ChartsTooltip/ChartsAxisTooltipContent.d.ts

@@ -3,7 +3,7 @@ import { SxProps, Theme } from '@mui/material/styles';
 import { AxisInteractionData } from '../context/InteractionProvider';
 import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config';
 import { AxisDefaultized } from '../models/axis';
-import { ChartsTooltipClasses } from './tooltipClasses';
+import { ChartsTooltipClasses } from './chartsTooltipClasses';
 export type ChartsAxisContentProps = {
     /**
      * Data identifying the triggered axis.

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -8,6 +8,7 @@ exports.ChartsAxisTooltipContent = ChartsAxisTooltipContent;
 exports.DefaultChartsAxisContent = DefaultChartsAxisContent;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _utils = require("@mui/base/utils");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
@@ -33,6 +34,7 @@ function DefaultChartsAxisContent(props) {
     sx: sx,
     className: classes.root,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipTable, {
+      className: classes.table,
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipRow, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
@@ -55,21 +57,23 @@ function DefaultChartsAxisContent(props) {
             return null;
           }
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+            className: classes.row,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-              className: classes.markCell,
+              className: (0, _clsx.default)(classes.markCell, classes.cell),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
                 ownerState: {
                   color
                 },
-                boxShadow: 1
+                boxShadow: 1,
+                className: classes.mark
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-              className: classes.labelCell,
+              className: (0, _clsx.default)(classes.labelCell, classes.cell),
               children: label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
                 children: label
               }) : null
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-              className: classes.valueCell,
+              className: (0, _clsx.default)(classes.valueCell, classes.cell),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
                 children: formattedValue
               })

package/ChartsTooltip/ChartsItemTooltipContent.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import { ItemInteractionData } from '../context/InteractionProvider';
 import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config';
-import { ChartsTooltipClasses } from './tooltipClasses';
+import { ChartsTooltipClasses } from './chartsTooltipClasses';
 export type ChartsItemContentProps<T extends ChartSeriesType = ChartSeriesType> = {
     /**
      * The data used to identify the triggered item.

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -8,6 +8,7 @@ exports.ChartsItemTooltipContent = ChartsItemTooltipContent;
 exports.DefaultChartsItemContent = DefaultChartsItemContent;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/base/utils");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
@@ -42,20 +43,23 @@ function DefaultChartsItemContent(props) {
     sx: sx,
     className: classes.root,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipTable, {
+      className: classes.table,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+          className: classes.row,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            className: classes.markCell,
+            className: (0, _clsx.default)(classes.markCell, classes.cell),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
               ownerState: {
                 color
-              }
+              },
+              className: classes.mark
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            className: classes.labelCell,
+            className: (0, _clsx.default)(classes.labelCell, classes.cell),
             children: displayedLabel
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            className: classes.valueCell,
+            className: (0, _clsx.default)(classes.valueCell, classes.cell),
             children: formattedValue
           })]
         })

package/ChartsTooltip/ChartsTooltip.d.ts

@@ -3,7 +3,7 @@ import { PopperProps } from '@mui/base/Popper';
 import { TriggerOptions } from './utils';
 import { ChartsItemContentProps } from './ChartsItemTooltipContent';
 import { ChartsAxisContentProps } from './ChartsAxisTooltipContent';
-import { ChartsTooltipClasses } from './tooltipClasses';
+import { ChartsTooltipClasses } from './chartsTooltipClasses';
 export interface ChartsTooltipSlotsComponent {
     popper?: React.ElementType<PopperProps>;
     axisContent?: React.ElementType<ChartsAxisContentProps>;

package/ChartsTooltip/ChartsTooltip.js

@@ -17,7 +17,7 @@ var _InteractionProvider = require("../context/InteractionProvider");
 var _utils2 = require("./utils");
 var _ChartsItemTooltipContent = require("./ChartsItemTooltipContent");
 var _ChartsAxisTooltipContent = require("./ChartsAxisTooltipContent");
-var _tooltipClasses = require("./tooltipClasses");
+var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -27,11 +27,15 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root'],
+    table: ['table'],
+    row: ['row'],
+    cell: ['cell'],
+    mark: ['mark'],
     markCell: ['markCell'],
     labelCell: ['labelCell'],
     valueCell: ['valueCell']
   };
-  return (0, _composeClasses.default)(slots, _tooltipClasses.getTooltipUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _chartsTooltipClasses.getChartsTooltipUtilityClass, classes);
 };
 const ChartsTooltipRoot = (0, _styles.styled)(_Popper.Popper, {
   name: 'MuiChartsTooltip',
@@ -54,23 +58,27 @@ const ChartsTooltipRoot = (0, _styles.styled)(_Popper.Popper, {
  * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
  */
 function ChartsTooltip(props) {
+  const themeProps = (0, _styles.useThemeProps)({
+    props,
+    name: 'MuiChartsTooltip'
+  });
   const {
     trigger = 'axis',
     itemContent,
     axisContent,
     slots,
     slotProps
-  } = props;
+  } = themeProps;
   const mousePosition = (0, _utils2.useMouseTracker)();
   const {
     item,
     axis
   } = React.useContext(_InteractionProvider.InteractionContext);
   const displayedData = trigger === 'item' ? item : axis;
-  const tooltipHasData = (0, _utils2.getTootipHasData)(trigger, displayedData);
+  const tooltipHasData = (0, _utils2.getTooltipHasData)(trigger, displayedData);
   const popperOpen = mousePosition !== null && tooltipHasData;
   const classes = useUtilityClasses({
-    classes: props.classes
+    classes: themeProps.classes
   });
   const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
   const popperProps = (0, _utils.useSlotProps)({

package/ChartsTooltip/ChartsTooltipTable.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsTooltipTable = exports.ChartsTooltipRow = exports.ChartsTooltipPaper = exports.ChartsTooltipMark = exports.ChartsTooltipCell = void 0;
 var _Box = _interopRequireDefault(require("@mui/system/Box"));
 var _styles = require("@mui/material/styles");
-var _tooltipClasses = require("./tooltipClasses");
+var _chartsTooltipClasses = require("./chartsTooltipClasses");
 const ChartsTooltipPaper = exports.ChartsTooltipPaper = (0, _styles.styled)('div', {
   name: 'MuiChartsTooltip',
   slot: 'Container'
@@ -52,10 +52,10 @@ const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)('td',
 }) => ({
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
-  [`&.${_tooltipClasses.tooltipClasses.labelCell}`]: {
+  [`&.${_chartsTooltipClasses.chartsTooltipClasses.labelCell}`]: {
     paddingLeft: theme.spacing(1)
   },
-  [`&.${_tooltipClasses.tooltipClasses.valueCell}`]: {
+  [`&.${_chartsTooltipClasses.chartsTooltipClasses.valueCell}`]: {
     paddingLeft: theme.spacing(4),
     color: (theme.vars || theme).palette.text.primary
   },

package/ChartsTooltip/chartsTooltipClasses.d.ts

@@ -0,0 +1,21 @@
+export interface ChartsTooltipClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the table element. */
+    table: string;
+    /** Styles applied to the row element. */
+    row: string;
+    /** Styles applied to the cell element. */
+    cell: string;
+    /** Styles applied to the mark element. */
+    mark: string;
+    /** Styles applied to the markCell element. */
+    markCell: string;
+    /** Styles applied to the labelCell element. */
+    labelCell: string;
+    /** Styles applied to the valueCell element. */
+    valueCell: string;
+}
+export type ChartsTooltipClassKey = keyof Omit<ChartsTooltipClasses, 'markCell' | 'labelCell' | 'valueCell'>;
+export declare function getChartsTooltipUtilityClass(slot: string): string;
+export declare const chartsTooltipClasses: ChartsTooltipClasses;

package/ChartsTooltip/chartsTooltipClasses.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chartsTooltipClasses = void 0;
+exports.getChartsTooltipUtilityClass = getChartsTooltipUtilityClass;
+var _utils = require("@mui/utils");
+function getChartsTooltipUtilityClass(slot) {
+  return (0, _utils.unstable_generateUtilityClass)('MuiChartsTooltip', slot);
+}
+const chartsTooltipClasses = exports.chartsTooltipClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsTooltip', ['root', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);

package/ChartsTooltip/index.d.ts

@@ -1 +1,2 @@
 export * from './ChartsTooltip';
+export * from './chartsTooltipClasses';

package/ChartsTooltip/index.js

@@ -13,4 +13,15 @@ Object.keys(_ChartsTooltip).forEach(function (key) {
       return _ChartsTooltip[key];
     }
   });
+});
+var _chartsTooltipClasses = require("./chartsTooltipClasses");
+Object.keys(_chartsTooltipClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _chartsTooltipClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chartsTooltipClasses[key];
+    }
+  });
 });

package/ChartsTooltip/utils.d.ts

@@ -21,4 +21,4 @@ export declare function useMouseTracker(): {
     y: number;
 } | null;
 export type TriggerOptions = 'item' | 'axis' | 'none';
-export declare function getTootipHasData(trigger: TriggerOptions, displayedData: null | AxisInteractionData | ItemInteractionData<ChartSeriesType>): boolean;
+export declare function getTooltipHasData(trigger: TriggerOptions, displayedData: null | AxisInteractionData | ItemInteractionData<ChartSeriesType>): boolean;

package/ChartsTooltip/utils.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateVirtualElement = generateVirtualElement;
-exports.getTootipHasData = getTootipHasData;
+exports.getTooltipHasData = getTooltipHasData;
 exports.useMouseTracker = useMouseTracker;
 var React = _interopRequireWildcard(require("react"));
 var _DrawingProvider = require("../context/DrawingProvider");
@@ -81,7 +81,7 @@ function useMouseTracker() {
   }, [svgRef]);
   return mousePosition;
 }
-function getTootipHasData(trigger, displayedData) {
+function getTooltipHasData(trigger, displayedData) {
   if (trigger === 'item') {
     return displayedData !== null;
   }

package/ChartsXAxis/ChartsXAxis.js

@@ -114,17 +114,20 @@ function ChartsXAxis(inProps) {
     props: (0, _extends2.default)({}, defaultProps, inProps),
     name: 'MuiChartsXAxis'
   });
+  const {
+    xAxisIds
+  } = React.useContext(_CartesianContextProvider.CartesianContext);
   const _React$useContext = React.useContext(_CartesianContextProvider.CartesianContext),
-    _props$axisId = props.axisId,
+    _ref = props.axisId ?? xAxisIds[0],
     {
       xAxis: {
-        [_props$axisId]: {
+        [_ref]: {
           scale: xScale,
           tickNumber
         }
       }
     } = _React$useContext,
-    settings = (0, _objectWithoutPropertiesLoose2.default)(_React$useContext.xAxis[_props$axisId], _excluded);
+    settings = (0, _objectWithoutPropertiesLoose2.default)(_React$useContext.xAxis[_ref], _excluded);
   const isMounted = (0, _useMounted.useMounted)();
   const defaultizedProps = (0, _extends2.default)({}, defaultProps, settings, props);
   const {
@@ -242,9 +245,10 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Id of the axis to render.
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
    */
-  axisId: _propTypes.default.string.isRequired,
+  axisId: _propTypes.default.string,
   /**
    * Override or extend the styles applied to the component.
    */

package/ChartsYAxis/ChartsYAxis.js

@@ -60,17 +60,20 @@ function ChartsYAxis(inProps) {
     props: (0, _extends2.default)({}, defaultProps, inProps),
     name: 'MuiChartsYAxis'
   });
+  const {
+    yAxisIds
+  } = React.useContext(_CartesianContextProvider.CartesianContext);
   const _React$useContext = React.useContext(_CartesianContextProvider.CartesianContext),
-    _props$axisId = props.axisId,
+    _ref = props.axisId ?? yAxisIds[0],
     {
       yAxis: {
-        [_props$axisId]: {
+        [_ref]: {
           scale: yScale,
           tickNumber
         }
       }
     } = _React$useContext,
-    settings = (0, _objectWithoutPropertiesLoose2.default)(_React$useContext.yAxis[_props$axisId], _excluded);
+    settings = (0, _objectWithoutPropertiesLoose2.default)(_React$useContext.yAxis[_ref], _excluded);
   const defaultizedProps = (0, _extends2.default)({}, defaultProps, settings, props);
   const {
     position,
@@ -175,9 +178,10 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Id of the axis to render.
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
    */
-  axisId: _propTypes.default.string.isRequired,
+  axisId: _propTypes.default.string,
   /**
    * Override or extend the styles applied to the component.
    */

package/LineChart/LineChart.d.ts

@@ -18,6 +18,13 @@ export interface LineChartSlotComponentProps extends ChartsAxisSlotComponentProp
 export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
     series: MakeOptional<LineSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
+    /**
+     * Object `{ x, y }` that defines how the charts highlight the mouse position along the x- and y-axes.
+     * The two properties accept the following values:
+     * - 'none': display nothing.
+     * - 'line': display a line at the current mouse position.
+     * - 'band': display a band at the current mouse position. Only available with band scale.
+     */
     axisHighlight?: ChartsAxisHighlightProps;
     /**
      * @deprecated Consider using `slotProps.legend` instead.