@mui/x-charts 8.14.1 → 8.16.0

package/ChartsBrushOverlay/ChartsBrushOverlay.js

@@ -0,0 +1,102 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsBrushOverlay = ChartsBrushOverlay;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _styles = require("@mui/material/styles");
+var _ChartsBrushOverlay = require("./ChartsBrushOverlay.classes");
+var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions");
+var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
+var _jsxRuntime = require("react/jsx-runtime");
+function BrushRect(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
+    className: _ChartsBrushOverlay.brushOverlayClasses.rect,
+    strokeWidth: 1,
+    fillOpacity: 0.2,
+    pointerEvents: 'none'
+  }, props));
+}
+/**
+ * Component that renders visual feedback during brush interaction
+ */
+function ChartsBrushOverlay(props) {
+  const store = (0, _useStore.useStore)();
+  const drawingArea = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
+  const theme = (0, _styles.useTheme)();
+  const brushStartX = (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushStartX);
+  const brushStartY = (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushStartY);
+  const brushCurrentX = (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushCurrentX);
+  const brushCurrentY = (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushCurrentY);
+  const brushConfig = (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushConfig);
+  if (brushStartX === null || brushStartY === null || brushCurrentX === null || brushCurrentY === null) {
+    return null;
+  }
+  const {
+    left,
+    top,
+    width,
+    height
+  } = drawingArea;
+
+  // Clamp coordinates to drawing area
+  const clampX = x => Math.max(left, Math.min(left + width, x));
+  const clampY = y => Math.max(top, Math.min(top + height, y));
+  const startX = clampX(brushStartX);
+  const startY = clampY(brushStartY);
+  const currentX = clampX(brushCurrentX);
+  const currentY = clampY(brushCurrentY);
+  const rectColor = theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white;
+
+  // For scatter charts, show only the rectangle without guide lines
+  if (brushConfig === 'xy') {
+    const rectWidth = currentX - startX;
+    const rectHeight = currentY - startY;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: (0, _clsx.default)(_ChartsBrushOverlay.brushOverlayClasses.root, _ChartsBrushOverlay.brushOverlayClasses.x, _ChartsBrushOverlay.brushOverlayClasses.y),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrushRect, (0, _extends2.default)({
+        fill: rectColor,
+        x: rectWidth >= 0 ? startX : currentX,
+        y: rectHeight >= 0 ? startY : currentY,
+        width: Math.abs(rectWidth),
+        height: Math.abs(rectHeight)
+      }, props))
+    });
+  }
+  if (brushConfig === 'y') {
+    const minY = Math.min(startY, currentY);
+    const maxY = Math.max(startY, currentY);
+    const rectHeight = maxY - minY;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: (0, _clsx.default)(_ChartsBrushOverlay.brushOverlayClasses.root, _ChartsBrushOverlay.brushOverlayClasses.y),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrushRect, (0, _extends2.default)({
+        fill: rectColor,
+        x: left,
+        y: minY,
+        width: width,
+        height: rectHeight
+      }, props))
+    });
+  }
+  const minX = Math.min(startX, currentX);
+  const maxX = Math.max(startX, currentX);
+  const rectWidth = maxX - minX;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    className: (0, _clsx.default)(_ChartsBrushOverlay.brushOverlayClasses.root, _ChartsBrushOverlay.brushOverlayClasses.x),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrushRect, (0, _extends2.default)({
+      fill: rectColor,
+      x: minX,
+      y: top,
+      width: rectWidth,
+      height: height
+    }, props))
+  });
+}

package/ChartsBrushOverlay/index.d.ts

@@ -0,0 +1,4 @@
+export { ChartsBrushOverlay } from "./ChartsBrushOverlay.js";
+export type { ChartsBrushOverlayProps } from "./ChartsBrushOverlay.js";
+export { brushOverlayClasses } from "./ChartsBrushOverlay.classes.js";
+export type { BrushOverlayClasses, BrushOverlayClassKey } from "./ChartsBrushOverlay.classes.js";

package/ChartsBrushOverlay/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ChartsBrushOverlay", {
+  enumerable: true,
+  get: function () {
+    return _ChartsBrushOverlay.ChartsBrushOverlay;
+  }
+});
+Object.defineProperty(exports, "brushOverlayClasses", {
+  enumerable: true,
+  get: function () {
+    return _ChartsBrushOverlay2.brushOverlayClasses;
+  }
+});
+var _ChartsBrushOverlay = require("./ChartsBrushOverlay");
+var _ChartsBrushOverlay2 = require("./ChartsBrushOverlay.classes");

package/ChartsReferenceLine/ChartsReferenceLine.js

@@ -63,7 +63,7 @@ process.env.NODE_ENV !== "production" ? ChartsReferenceLine.propTypes = {
   /**
    * Additional space around 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
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
    */
   spacing: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
     x: _propTypes.default.number,

package/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -21,12 +21,17 @@ var _jsxRuntime = require("react/jsx-runtime");
 const getTextParams = ({
   top,
   height,
-  spacingY,
+  spacing,
+  position,
   labelAlign = 'middle'
 }) => {
+  const defaultSpacingOtherAxis = labelAlign === 'middle' ? _common.DEFAULT_SPACING_MIDDLE_OTHER_AXIS : _common.DEFAULT_SPACING;
+  const spacingX = (typeof spacing === 'object' ? spacing.x : spacing) ?? _common.DEFAULT_SPACING;
+  const spacingY = (typeof spacing === 'object' ? spacing.y : defaultSpacingOtherAxis) ?? defaultSpacingOtherAxis;
   switch (labelAlign) {
     case 'start':
       return {
+        x: position + spacingX,
         y: top + spacingY,
         style: {
           dominantBaseline: 'hanging',
@@ -35,6 +40,7 @@ const getTextParams = ({
       };
     case 'end':
       return {
+        x: position + spacingX,
         y: top + height - spacingY,
         style: {
           dominantBaseline: 'auto',
@@ -43,7 +49,8 @@ const getTextParams = ({
       };
     default:
       return {
-        y: top + height / 2,
+        x: position + spacingX,
+        y: top + height / 2 + spacingY,
         style: {
           dominantBaseline: 'central',
           textAnchor: 'start'
@@ -62,9 +69,9 @@ function ChartsXReferenceLine(props) {
   const {
     x,
     label = '',
-    spacing = 5,
+    spacing,
     classes: inClasses,
-    labelAlign,
+    labelAlign = 'middle',
     lineStyle,
     labelStyle,
     axisId
@@ -83,16 +90,14 @@ function ChartsXReferenceLine(props) {
   }
   const d = `M ${xPosition} ${top} l 0 ${height}`;
   const classes = getXReferenceLineClasses(inClasses);
-  const spacingX = typeof spacing === 'object' ? spacing.x ?? 0 : spacing;
-  const spacingY = typeof spacing === 'object' ? spacing.y ?? 0 : spacing;
   const textParams = (0, _extends2.default)({
-    x: xPosition + spacingX,
     text: label,
     fontSize: 12
   }, getTextParams({
     top,
     height,
-    spacingY,
+    spacing,
+    position: xPosition,
     labelAlign
   }), {
     className: classes.label

package/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -21,12 +21,17 @@ var _jsxRuntime = require("react/jsx-runtime");
 const getTextParams = ({
   left,
   width,
-  spacingX,
+  spacing,
+  position,
   labelAlign = 'middle'
 }) => {
+  const defaultSpacingOtherAxis = labelAlign === 'middle' ? _common.DEFAULT_SPACING_MIDDLE_OTHER_AXIS : _common.DEFAULT_SPACING;
+  const spacingX = (typeof spacing === 'object' ? spacing.x : defaultSpacingOtherAxis) ?? defaultSpacingOtherAxis;
+  const spacingY = (typeof spacing === 'object' ? spacing.y : spacing) ?? _common.DEFAULT_SPACING;
   switch (labelAlign) {
     case 'start':
       return {
+        y: position - spacingY,
         x: left + spacingX,
         style: {
           dominantBaseline: 'auto',
@@ -35,6 +40,7 @@ const getTextParams = ({
       };
     case 'end':
       return {
+        y: position - spacingY,
         x: left + width - spacingX,
         style: {
           dominantBaseline: 'auto',
@@ -43,7 +49,8 @@ const getTextParams = ({
       };
     default:
       return {
-        x: left + width / 2,
+        y: position - spacingY,
+        x: left + width / 2 + spacingX,
         style: {
           dominantBaseline: 'auto',
           textAnchor: 'middle'
@@ -62,9 +69,9 @@ function ChartsYReferenceLine(props) {
   const {
     y,
     label = '',
-    spacing = 5,
+    spacing,
     classes: inClasses,
-    labelAlign,
+    labelAlign = 'middle',
     lineStyle,
     labelStyle,
     axisId
@@ -83,16 +90,14 @@ function ChartsYReferenceLine(props) {
   }
   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,
+    spacing,
+    position: yPosition,
     labelAlign
   }), {
     className: classes.label

package/ChartsReferenceLine/common.d.ts

@@ -1,6 +1,8 @@
 import { ChartsReferenceLineClasses } from "./chartsReferenceLineClasses.js";
 import { ChartsTextStyle } from "../ChartsText/index.js";
 import { AxisId } from "../models/axis.js";
+export declare const DEFAULT_SPACING = 5;
+export declare const DEFAULT_SPACING_MIDDLE_OTHER_AXIS = 0;
 export type CommonChartsReferenceLineProps = {
   /**
    * The alignment if the label is in the chart drawing area.
@@ -14,7 +16,7 @@ export type CommonChartsReferenceLineProps = {
   /**
    * Additional space around 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
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
    */
   spacing?: number | {
     x?: number;

package/ChartsReferenceLine/common.js

@@ -4,10 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ReferenceLineRoot = void 0;
+exports.ReferenceLineRoot = exports.DEFAULT_SPACING_MIDDLE_OTHER_AXIS = exports.DEFAULT_SPACING = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _styles = require("@mui/material/styles");
 var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
+const DEFAULT_SPACING = exports.DEFAULT_SPACING = 5;
+const DEFAULT_SPACING_MIDDLE_OTHER_AXIS = exports.DEFAULT_SPACING_MIDDLE_OTHER_AXIS = 0;
 const ReferenceLineRoot = exports.ReferenceLineRoot = (0, _styles.styled)('g')(({
   theme
 }) => ({

package/ChartsTooltip/ChartsTooltip.js

@@ -45,6 +45,11 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor: _propTypes.default.oneOf(['node', 'pointer']),
   /**
    * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
    * or a function that returns either.
@@ -174,6 +179,10 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
       update: _propTypes.default.func.isRequired
     })
   })]),
+  /**
+   * Determines the tooltip position relatively to the anchor.
+   */
+  position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
   /**
    * The props used for each slot inside the Popper.
    * @default {}

package/ChartsTooltip/ChartsTooltipContainer.d.ts

@@ -15,6 +15,15 @@ export interface ChartsTooltipContainerProps<T extends TriggerOptions = TriggerO
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<ChartsTooltipClasses>;
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'pointer' | 'node';
+  /**
+   * Determines the tooltip position relatively to the anchor.
+   */
+  position?: 'top' | 'bottom' | 'left' | 'right';
   children?: React.ReactNode;
 }
 /**

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -26,9 +26,11 @@ var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useCha
 var _useChartPolarInteraction = require("../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
 var _useAxisSystem = require("../hooks/useAxisSystem");
 var _hooks = require("../hooks");
+var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
+var _selectors = require("../internals/plugins/utils/selectors");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["trigger", "classes", "children"];
-const noAxis = () => false;
+const _excluded = ["trigger", "position", "anchor", "classes", "children"];
+const selectorReturnFalse = () => false;
 const ChartsTooltipRoot = (0, _styles.styled)(_Popper.default, {
   name: 'MuiChartsTooltip',
   slot: 'Root'
@@ -38,6 +40,21 @@ const ChartsTooltipRoot = (0, _styles.styled)(_Popper.default, {
   pointerEvents: 'none',
   zIndex: theme.zIndex.modal
 }));
+const selectorSelectIsOpenSelector = (0, _selectors.createSelector)([_useChartBrush.selectorBrushShouldPreventTooltip, (_, trigger) => trigger, (_, __, axisSystem) => axisSystem], (shouldPreventBecauseOfBrush, trigger, axisSystem) => {
+  if (shouldPreventBecauseOfBrush) {
+    return selectorReturnFalse;
+  }
+  if (trigger === 'item') {
+    return _useChartInteraction.selectorChartsTooltipItemIsDefined;
+  }
+  if (axisSystem === 'polar') {
+    return _useChartPolarInteraction.selectorChartsInteractionPolarAxisTooltip;
+  }
+  if (axisSystem === 'cartesian') {
+    return _useChartCartesianAxis.selectorChartsInteractionAxisTooltip;
+  }
+  return selectorReturnFalse;
+});
 
 /**
  * Demos:
@@ -55,6 +72,8 @@ function ChartsTooltipContainer(inProps) {
   });
   const {
       trigger = 'axis',
+      position,
+      anchor = 'pointer',
       classes: propClasses,
       children
     } = props,
@@ -70,31 +89,48 @@ function ChartsTooltipContainer(inProps) {
   }));
   const axisSystem = (0, _useAxisSystem.useAxisSystem)();
   const store = (0, _useStore.useStore)();
-  const isOpen = (0, _useSelector.useSelector)(store, trigger === 'axis' ? axisSystem === 'polar' && _useChartPolarInteraction.selectorChartsInteractionPolarAxisTooltip || axisSystem === 'cartesian' && _useChartCartesianAxis.selectorChartsInteractionAxisTooltip || noAxis : _useChartInteraction.selectorChartsInteractionItemIsDefined);
+  const isOpenSelector = (0, _useSelector.useSelector)(store, selectorSelectIsOpenSelector, [trigger, axisSystem]);
+  const isOpen = (0, _useSelector.useSelector)(store, isOpenSelector);
+  const lastInteraction = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsLastInteraction);
+  const computedAnchor = lastInteraction === 'keyboard' ? 'node' : anchor;
+  const itemPosition = (0, _useSelector.useSelector)(store, trigger === 'item' && computedAnchor === 'node' ? _useChartInteraction.selectorChartsTooltipItemPosition : () => null, [position]);
   React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null) {
+    const svgElement = svgRef.current;
+    if (svgElement === null) {
       return () => {};
     }
-    const update = (0, _rafThrottle.rafThrottle)(() => popperRef.current?.update());
-    const handlePointerEvent = event => {
-      // eslint-disable-next-line react-compiler/react-compiler
+    if (itemPosition !== null) {
+      const positionUpdate = (0, _rafThrottle.rafThrottle)(() => {
+        // eslint-disable-next-line react-compiler/react-compiler
+        positionRef.current = {
+          x: svgElement.getBoundingClientRect().left + (itemPosition?.x ?? 0),
+          y: svgElement.getBoundingClientRect().top + (itemPosition?.y ?? 0)
+        };
+        popperRef.current?.update();
+      });
+      positionUpdate();
+      return () => positionUpdate.clear();
+    }
+    const pointerUpdate = (0, _rafThrottle.rafThrottle)((x, y) => {
       positionRef.current = {
-        x: event.clientX,
-        y: event.clientY
+        x,
+        y
       };
-      update();
+      popperRef.current?.update();
+    });
+    const handlePointerEvent = event => {
+      pointerUpdate(event.clientX, event.clientY);
     };
-    element.addEventListener('pointerdown', handlePointerEvent);
-    element.addEventListener('pointermove', handlePointerEvent);
-    element.addEventListener('pointerenter', handlePointerEvent);
+    svgElement.addEventListener('pointerdown', handlePointerEvent);
+    svgElement.addEventListener('pointermove', handlePointerEvent);
+    svgElement.addEventListener('pointerenter', handlePointerEvent);
     return () => {
-      element.removeEventListener('pointerdown', handlePointerEvent);
-      element.removeEventListener('pointermove', handlePointerEvent);
-      element.removeEventListener('pointerenter', handlePointerEvent);
-      update.clear();
+      svgElement.removeEventListener('pointerdown', handlePointerEvent);
+      svgElement.removeEventListener('pointermove', handlePointerEvent);
+      svgElement.removeEventListener('pointerenter', handlePointerEvent);
+      pointerUpdate.clear();
     };
-  }, [svgRef, positionRef]);
+  }, [svgRef, positionRef, itemPosition]);
   const anchorEl = React.useMemo(() => ({
     getBoundingClientRect: () => ({
       x: positionRef.current.x,
@@ -138,14 +174,13 @@ function ChartsTooltipContainer(inProps) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.default, {
-    children: isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsTooltipRoot, (0, _extends2.default)({
+    children: isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsTooltipRoot, (0, _extends2.default)({}, other, {
       className: classes?.root,
       open: isOpen,
-      placement: isMouse ? 'right-start' : 'top',
+      placement: other.placement ?? position ?? (isMouse ? 'right-start' : 'top'),
       popperRef: popperRef,
       anchorEl: anchorEl,
-      modifiers: modifiers
-    }, other, {
+      modifiers: modifiers,
       children: children
     }))
   });
@@ -155,6 +190,11 @@ process.env.NODE_ENV !== "production" ? ChartsTooltipContainer.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor: _propTypes.default.oneOf(['node', 'pointer']),
   /**
    * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
    * or a function that returns either.
@@ -288,6 +328,10 @@ process.env.NODE_ENV !== "production" ? ChartsTooltipContainer.propTypes = {
       update: _propTypes.default.func.isRequired
     })
   })]),
+  /**
+   * Determines the tooltip position relatively to the anchor.
+   */
+  position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
   /**
    * The props used for each slot inside the Popper.
    * @default {}

package/ChartsTooltip/useItemTooltip.js

@@ -13,9 +13,10 @@ var _useStore = require("../internals/store/useStore");
 var _useAxis = require("../hooks/useAxis");
 var _useZAxis = require("../hooks/useZAxis");
 var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors");
+var _isCartesian = require("../internals/isCartesian");
 function useInternalItemTooltip() {
   const store = (0, _useStore.useStore)();
-  const identifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionItem);
+  const identifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsTooltipItem);
   const seriesConfig = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesConfig);
   const series = (0, _useSeries.useSeries)();
   const {
@@ -34,15 +35,6 @@ function useInternalItemTooltip() {
     rotationAxis,
     rotationAxisIds
   } = (0, _useAxis.useRotationAxes)();
-  const {
-    radiusAxis,
-    radiusAxisIds
-  } = (0, _useAxis.useRadiusAxes)();
-  const xAxisId = series.xAxisId ?? xAxisIds[0];
-  const yAxisId = series.yAxisId ?? yAxisIds[0];
-  const zAxisId = series.zAxisId ?? zAxisIds[0];
-  const rotationAxisId = series.rotationAxisId ?? rotationAxisIds[0];
-  const radiusAxisId = series.radiusAxisId ?? radiusAxisIds[0];
   if (!identifier) {
     return null;
   }
@@ -50,7 +42,11 @@ function useInternalItemTooltip() {
   if (!itemSeries) {
     return null;
   }
-  const getColor = seriesConfig[itemSeries.type].colorProcessor?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
+  const xAxisId = (0, _isCartesian.isCartesianSeries)(itemSeries) ? itemSeries.xAxisId ?? xAxisIds[0] : undefined;
+  const yAxisId = (0, _isCartesian.isCartesianSeries)(itemSeries) ? itemSeries.yAxisId ?? yAxisIds[0] : undefined;
+  const zAxisId = 'zAxisId' in itemSeries ? itemSeries.zAxisId ?? zAxisIds[0] : zAxisIds[0];
+  const rotationAxisId = rotationAxisIds[0];
+  const getColor = seriesConfig[itemSeries.type].colorProcessor?.(itemSeries, xAxisId !== undefined ? xAxis[xAxisId] : undefined, yAxisId !== undefined ? yAxis[yAxisId] : undefined, zAxisId !== undefined ? zAxis[zAxisId] : undefined) ?? (() => '');
   const axesConfig = {};
   if (xAxisId !== undefined) {
     axesConfig.x = xAxis[xAxisId];
@@ -61,9 +57,6 @@ function useInternalItemTooltip() {
   if (rotationAxisId !== undefined) {
     axesConfig.rotation = rotationAxis[rotationAxisId];
   }
-  if (radiusAxisId !== undefined) {
-    axesConfig.radius = radiusAxis[radiusAxisId];
-  }
   return seriesConfig[itemSeries.type].tooltipGetter({
     series: itemSeries,
     axesConfig,

package/ChartsWrapper/ChartsWrapper.js

@@ -88,7 +88,8 @@ const Root = (0, _styles.styled)('div', {
         extendVertically: true
       },
       style: {
-        height: '100%'
+        height: '100%',
+        minHeight: 0
       }
     }],
     flex: 1,

package/ChartsXAxis/getVisibleLabels.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getVisibleLabels = getVisibleLabels;
 var _geometry = require("../internals/geometry");
-var _getWordsByLines = require("../internals/getWordsByLines");
+var _domUtils = require("../internals/domUtils");
 /* Returns a set of indices of the tick labels that should be visible.  */
 function getVisibleLabels(xTicks, {
   tickLabelStyle: style,
@@ -16,23 +16,6 @@ function getVisibleLabels(xTicks, {
   isMounted,
   isXInside
 }) {
-  const getTickLabelSize = tick => {
-    if (!isMounted || tick.formattedValue === undefined) {
-      return {
-        width: 0,
-        height: 0
-      };
-    }
-    const tickSizes = (0, _getWordsByLines.getWordsByLines)({
-      style,
-      needsComputation: true,
-      text: tick.formattedValue
-    });
-    return {
-      width: Math.max(...tickSizes.map(size => size.width)),
-      height: Math.max(tickSizes.length * tickSizes[0].height)
-    };
-  };
   if (typeof tickLabelInterval === 'function') {
     return new Set(xTicks.filter((item, index) => tickLabelInterval(item.value, index)));
   }
@@ -40,7 +23,7 @@ function getVisibleLabels(xTicks, {
   // Filter label to avoid overlap
   let previousTextLimit = 0;
   const direction = reverse ? -1 : 1;
-  return new Set(xTicks.filter((item, labelIndex) => {
+  const candidateTickLabels = xTicks.filter(item => {
     const {
       offset,
       labelOffset,
@@ -50,18 +33,25 @@ function getVisibleLabels(xTicks, {
       return false;
     }
     const textPosition = offset + labelOffset;
+    return isXInside(textPosition);
+  });
+  const sizeMap = measureTickLabels(candidateTickLabels, style);
+  return new Set(candidateTickLabels.filter((item, labelIndex) => {
+    const {
+      offset,
+      labelOffset
+    } = item;
+    const textPosition = offset + labelOffset;
     if (labelIndex > 0 && direction * textPosition < direction * (previousTextLimit + tickLabelMinGap)) {
       return false;
     }
-    if (!isXInside(textPosition)) {
-      return false;
-    }
-
-    /* Measuring text width is expensive, so we need to delay it as much as possible to improve performance. */
     const {
       width,
       height
-    } = getTickLabelSize(item);
+    } = isMounted ? getTickLabelSize(sizeMap, item) : {
+      width: 0,
+      height: 0
+    };
     const distance = (0, _geometry.getMinXTranslation)(width, height, style?.angle);
     const currentTextLimit = textPosition - direction * distance / 2;
     if (labelIndex > 0 && direction * currentTextLimit < direction * (previousTextLimit + tickLabelMinGap)) {
@@ -72,4 +62,34 @@ function getVisibleLabels(xTicks, {
     previousTextLimit = textPosition + direction * distance / 2;
     return true;
   }));
+}
+function getTickLabelSize(sizeMap, tick) {
+  if (tick.formattedValue === undefined) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+  let width = 0;
+  let height = 0;
+  for (const line of tick.formattedValue.split('\n')) {
+    const lineSize = sizeMap.get(line);
+    if (lineSize) {
+      width = Math.max(width, lineSize.width);
+      height += lineSize.height;
+    }
+  }
+  return {
+    width,
+    height
+  };
+}
+function measureTickLabels(ticks, style) {
+  const strings = new Set();
+  for (const tick of ticks) {
+    if (tick.formattedValue) {
+      tick.formattedValue.split('\n').forEach(line => strings.add(line));
+    }
+  }
+  return (0, _domUtils.batchMeasureStrings)(strings, style);
 }