@mui/x-charts 8.14.0 → 8.15.0

package/esm/BarChart/useBarChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend", "showToolbar"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend", "showToolbar", "brushConfig"];
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
@@ -39,7 +39,8 @@ export const useBarChartProps = props => {
       onHighlightChange,
       borderRadius,
       barLabel,
-      className
+      className,
+      brushConfig
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -96,6 +97,7 @@ export const useBarChartProps = props => {
     disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     className,
     skipAnimation,
+    brushConfig,
     plugins: BAR_CHART_PLUGINS
   });
   const barPlotProps = {

package/esm/BarChart/useBarPlotData.js

@@ -29,6 +29,7 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
       const xAxisConfig = xAxes[xAxisId];
       const yAxisConfig = yAxes[yAxisId];
       const verticalLayout = series[seriesId].layout === 'vertical';
+      const reverse = (verticalLayout ? yAxisConfig.reverse : xAxisConfig.reverse) ?? false;
       checkScaleErrors(verticalLayout, seriesId, series[seriesId], xAxisId, xAxes, yAxisId, yAxes);
       const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
       const xScale = xAxisConfig.scale;
@@ -50,19 +51,20 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
         layout,
         minBarSize
       } = series[seriesId];
-      const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
-        if (currentSeriesData[dataIndex] == null) {
-          return null;
+      const seriesDataPoints = [];
+      for (let dataIndex = 0; dataIndex < baseScaleConfig.data.length; dataIndex += 1) {
+        const baseValue = baseScaleConfig.data[dataIndex];
+        const seriesValue = currentSeriesData[dataIndex];
+        if (seriesValue == null) {
+          continue;
         }
         const values = stackedData[dataIndex];
         const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
         const minValueCoord = Math.round(Math.min(...valueCoordinates));
         const maxValueCoord = Math.round(Math.max(...valueCoordinates));
         const stackId = series[seriesId].stack;
-        const {
-          barSize,
-          startCoordinate
-        } = getValueCoordinate(verticalLayout, minValueCoord, maxValueCoord, currentSeriesData[dataIndex], minBarSize);
+        const barSize = seriesValue === 0 ? 0 : Math.max(minBarSize, maxValueCoord - minValueCoord);
+        const startCoordinate = shouldInvertStartCoordinate(verticalLayout, seriesValue, reverse) ? maxValueCoord - barSize : minValueCoord;
         const result = {
           seriesId,
           dataIndex,
@@ -78,7 +80,7 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
           maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
         if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
-          return null;
+          continue;
         }
         if (!masks[result.maskId]) {
           masks[result.maskId] = {
@@ -99,10 +101,11 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
         mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
         mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
         mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
-        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
-        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
-        return result;
-      }).filter(rectangle => rectangle !== null);
+        const value = result.value ?? 0;
+        mask.hasNegative = mask.hasNegative || (reverse ? value > 0 : value < 0);
+        mask.hasPositive = mask.hasPositive || (reverse ? value < 0 : value > 0);
+        seriesDataPoints.push(result);
+      }
       return {
         seriesId,
         data: seriesDataPoints
@@ -142,25 +145,9 @@ function getBandSize({
     offset
   };
 }
-function getValueCoordinate(isVertical, minValueCoord, maxValueCoord, baseValue, minBarSize) {
-  if (baseValue === 0 || baseValue == null) {
-    return {
-      barSize: 0,
-      startCoordinate: minValueCoord
-    };
-  }
-  const isSizeLessThanMin = maxValueCoord - minValueCoord < minBarSize;
-  const barSize = isSizeLessThanMin ? minBarSize : maxValueCoord - minValueCoord;
-  const isVerticalAndPositive = isVertical && baseValue >= 0;
-  const isHorizontalAndNegative = !isVertical && baseValue < 0;
-  if (isSizeLessThanMin && (isVerticalAndPositive || isHorizontalAndNegative)) {
-    return {
-      barSize,
-      startCoordinate: maxValueCoord - barSize
-    };
-  }
-  return {
-    barSize,
-    startCoordinate: minValueCoord
-  };
+function shouldInvertStartCoordinate(verticalLayout, baseValue, reverse) {
+  const isVerticalAndPositive = verticalLayout && baseValue > 0;
+  const isHorizontalAndNegative = !verticalLayout && baseValue < 0;
+  const invertStartCoordinate = isVerticalAndPositive || isHorizontalAndNegative;
+  return reverse ? !invertStartCoordinate : invertStartCoordinate;
 }

package/esm/ChartContainer/ChartContainer.js

@@ -54,6 +54,14 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   apiRef: PropTypes.shape({
     current: PropTypes.object
   }),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: PropTypes.shape({
+    enabled: PropTypes.bool,
+    preventHighlight: PropTypes.bool,
+    preventTooltip: PropTypes.bool
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**

package/esm/ChartContainer/useChartContainerProps.js

@@ -2,7 +2,7 @@
 
 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", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "enableKeyboardNavigation"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "enableKeyboardNavigation", "brushConfig"];
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 export const useChartContainerProps = (props, ref) => {
   const _ref = props,
@@ -38,7 +38,8 @@ export const useChartContainerProps = (props, ref) => {
       slots,
       slotProps,
       experimentalFeatures,
-      enableKeyboardNavigation
+      enableKeyboardNavigation,
+      brushConfig
     } = _ref,
     other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const chartsSurfaceProps = _extends({
@@ -73,6 +74,7 @@ export const useChartContainerProps = (props, ref) => {
     seriesConfig,
     experimentalFeatures,
     enableKeyboardNavigation,
+    brushConfig,
     plugins: plugins ?? DEFAULT_PLUGINS,
     slots,
     slotProps

package/esm/ChartsBrushOverlay/ChartsBrushOverlay.classes.d.ts

@@ -0,0 +1,12 @@
+export interface BrushOverlayClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the brush lines. */
+  rect: string;
+  /** Styles applied when the brush is selecting the x axis. */
+  x: string;
+  /** Styles applied when the brush is selecting the y axis. */
+  y: string;
+}
+export type BrushOverlayClassKey = keyof BrushOverlayClasses;
+export declare const brushOverlayClasses: BrushOverlayClasses;

package/esm/ChartsBrushOverlay/ChartsBrushOverlay.classes.js

@@ -0,0 +1,2 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export const brushOverlayClasses = generateUtilityClasses('MuiChartsBrushOverlay', ['root', 'rect', 'x', 'y']);

package/esm/ChartsBrushOverlay/ChartsBrushOverlay.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface ChartsBrushOverlayProps {}
+/**
+ * Component that renders visual feedback during brush interaction
+ */
+export declare function ChartsBrushOverlay(props: ChartsBrushOverlayProps): React.JSX.Element | null;

package/esm/ChartsBrushOverlay/ChartsBrushOverlay.js

@@ -0,0 +1,95 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import { useTheme } from '@mui/material/styles';
+import { brushOverlayClasses } from "./ChartsBrushOverlay.classes.js";
+import { selectorChartDrawingArea } from "../internals/plugins/corePlugins/useChartDimensions/index.js";
+import { selectorBrushStartX, selectorBrushStartY, selectorBrushCurrentX, selectorBrushCurrentY, selectorBrushConfig } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function BrushRect(props) {
+  return /*#__PURE__*/_jsx("rect", _extends({
+    className: brushOverlayClasses.rect,
+    strokeWidth: 1,
+    fillOpacity: 0.2,
+    pointerEvents: 'none'
+  }, props));
+}
+/**
+ * Component that renders visual feedback during brush interaction
+ */
+export function ChartsBrushOverlay(props) {
+  const store = useStore();
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const theme = useTheme();
+  const brushStartX = useSelector(store, selectorBrushStartX);
+  const brushStartY = useSelector(store, selectorBrushStartY);
+  const brushCurrentX = useSelector(store, selectorBrushCurrentX);
+  const brushCurrentY = useSelector(store, selectorBrushCurrentY);
+  const brushConfig = useSelector(store, 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__*/_jsx("g", {
+      className: clsx(brushOverlayClasses.root, brushOverlayClasses.x, brushOverlayClasses.y),
+      children: /*#__PURE__*/_jsx(BrushRect, _extends({
+        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__*/_jsx("g", {
+      className: clsx(brushOverlayClasses.root, brushOverlayClasses.y),
+      children: /*#__PURE__*/_jsx(BrushRect, _extends({
+        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__*/_jsx("g", {
+    className: clsx(brushOverlayClasses.root, brushOverlayClasses.x),
+    children: /*#__PURE__*/_jsx(BrushRect, _extends({
+      fill: rectColor,
+      x: minX,
+      y: top,
+      width: rectWidth,
+      height: height
+    }, props))
+  });
+}

package/esm/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/esm/ChartsBrushOverlay/index.js

@@ -0,0 +1,2 @@
+export { ChartsBrushOverlay } from "./ChartsBrushOverlay.js";
+export { brushOverlayClasses } from "./ChartsBrushOverlay.classes.js";

package/esm/ChartsReferenceLine/ChartsReferenceLine.js

@@ -56,7 +56,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.oneOfType([PropTypes.number, PropTypes.shape({
     x: PropTypes.number,

package/esm/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -6,19 +6,24 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { warnOnce } from '@mui/x-internals/warning';
 import { useDrawingArea, useXScale } from "../hooks/index.js";
-import { ReferenceLineRoot } from "./common.js";
+import { DEFAULT_SPACING, DEFAULT_SPACING_MIDDLE_OTHER_AXIS, ReferenceLineRoot } from "./common.js";
 import { ChartsText } from "../ChartsText/index.js";
 import { getReferenceLineUtilityClass } from "./chartsReferenceLineClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   top,
   height,
-  spacingY,
+  spacing,
+  position,
   labelAlign = 'middle'
 }) => {
+  const defaultSpacingOtherAxis = labelAlign === 'middle' ? DEFAULT_SPACING_MIDDLE_OTHER_AXIS : DEFAULT_SPACING;
+  const spacingX = (typeof spacing === 'object' ? spacing.x : spacing) ?? 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',
@@ -27,6 +32,7 @@ const getTextParams = ({
       };
     case 'end':
       return {
+        x: position + spacingX,
         y: top + height - spacingY,
         style: {
           dominantBaseline: 'auto',
@@ -35,7 +41,8 @@ const getTextParams = ({
       };
     default:
       return {
-        y: top + height / 2,
+        x: position + spacingX,
+        y: top + height / 2 + spacingY,
         style: {
           dominantBaseline: 'central',
           textAnchor: 'start'
@@ -54,9 +61,9 @@ function ChartsXReferenceLine(props) {
   const {
     x,
     label = '',
-    spacing = 5,
+    spacing,
     classes: inClasses,
-    labelAlign,
+    labelAlign = 'middle',
     lineStyle,
     labelStyle,
     axisId
@@ -75,16 +82,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 = _extends({
-    x: xPosition + spacingX,
     text: label,
     fontSize: 12
   }, getTextParams({
     top,
     height,
-    spacingY,
+    spacing,
+    position: xPosition,
     labelAlign
   }), {
     className: classes.label

package/esm/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -6,19 +6,24 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { warnOnce } from '@mui/x-internals/warning';
 import { useDrawingArea, useYScale } from "../hooks/index.js";
-import { ReferenceLineRoot } from "./common.js";
+import { DEFAULT_SPACING, DEFAULT_SPACING_MIDDLE_OTHER_AXIS, ReferenceLineRoot } from "./common.js";
 import { ChartsText } from "../ChartsText/index.js";
 import { getReferenceLineUtilityClass } from "./chartsReferenceLineClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   left,
   width,
-  spacingX,
+  spacing,
+  position,
   labelAlign = 'middle'
 }) => {
+  const defaultSpacingOtherAxis = labelAlign === 'middle' ? DEFAULT_SPACING_MIDDLE_OTHER_AXIS : DEFAULT_SPACING;
+  const spacingX = (typeof spacing === 'object' ? spacing.x : defaultSpacingOtherAxis) ?? defaultSpacingOtherAxis;
+  const spacingY = (typeof spacing === 'object' ? spacing.y : spacing) ?? DEFAULT_SPACING;
   switch (labelAlign) {
     case 'start':
       return {
+        y: position - spacingY,
         x: left + spacingX,
         style: {
           dominantBaseline: 'auto',
@@ -27,6 +32,7 @@ const getTextParams = ({
       };
     case 'end':
       return {
+        y: position - spacingY,
         x: left + width - spacingX,
         style: {
           dominantBaseline: 'auto',
@@ -35,7 +41,8 @@ const getTextParams = ({
       };
     default:
       return {
-        x: left + width / 2,
+        y: position - spacingY,
+        x: left + width / 2 + spacingX,
         style: {
           dominantBaseline: 'auto',
           textAnchor: 'middle'
@@ -54,9 +61,9 @@ function ChartsYReferenceLine(props) {
   const {
     y,
     label = '',
-    spacing = 5,
+    spacing,
     classes: inClasses,
-    labelAlign,
+    labelAlign = 'middle',
     lineStyle,
     labelStyle,
     axisId
@@ -75,16 +82,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 = _extends({
-    y: yPosition - spacingY,
     text: label,
     fontSize: 12
   }, getTextParams({
     left,
     width,
-    spacingX,
+    spacing,
+    position: yPosition,
     labelAlign
   }), {
     className: classes.label

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

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
 import { referenceLineClasses } from "./chartsReferenceLineClasses.js";
+export const DEFAULT_SPACING = 5;
+export const DEFAULT_SPACING_MIDDLE_OTHER_AXIS = 0;
 export const ReferenceLineRoot = styled('g')(({
   theme
 }) => ({

package/esm/ChartsTooltip/ChartsTooltipContainer.js

@@ -20,8 +20,10 @@ import { selectorChartsInteractionAxisTooltip } from "../internals/plugins/featu
 import { selectorChartsInteractionPolarAxisTooltip } from "../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js";
 import { useAxisSystem } from "../hooks/useAxisSystem.js";
 import { useSvgRef } from "../hooks/index.js";
+import { selectorBrushShouldPreventTooltip } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+import { createSelector } from "../internals/plugins/utils/selectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const noAxis = () => false;
+const selectorReturnFalse = () => false;
 const ChartsTooltipRoot = styled(Popper, {
   name: 'MuiChartsTooltip',
   slot: 'Root'
@@ -31,6 +33,21 @@ const ChartsTooltipRoot = styled(Popper, {
   pointerEvents: 'none',
   zIndex: theme.zIndex.modal
 }));
+const selectorSelectIsOpenSelector = createSelector([selectorBrushShouldPreventTooltip, (_, trigger) => trigger, (_, __, axisSystem) => axisSystem], (shouldPreventBecauseOfBrush, trigger, axisSystem) => {
+  if (shouldPreventBecauseOfBrush) {
+    return selectorReturnFalse;
+  }
+  if (trigger === 'item') {
+    return selectorChartsInteractionItemIsDefined;
+  }
+  if (axisSystem === 'polar') {
+    return selectorChartsInteractionPolarAxisTooltip;
+  }
+  if (axisSystem === 'cartesian') {
+    return selectorChartsInteractionAxisTooltip;
+  }
+  return selectorReturnFalse;
+});
 
 /**
  * Demos:
@@ -63,7 +80,8 @@ function ChartsTooltipContainer(inProps) {
   }));
   const axisSystem = useAxisSystem();
   const store = useStore();
-  const isOpen = useSelector(store, trigger === 'axis' ? axisSystem === 'polar' && selectorChartsInteractionPolarAxisTooltip || axisSystem === 'cartesian' && selectorChartsInteractionAxisTooltip || noAxis : selectorChartsInteractionItemIsDefined);
+  const isOpenSelector = useSelector(store, selectorSelectIsOpenSelector, [trigger, axisSystem]);
+  const isOpen = useSelector(store, isOpenSelector);
   React.useEffect(() => {
     const element = svgRef.current;
     if (element === null) {

package/esm/ChartsXAxis/getVisibleLabels.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { getMinXTranslation } from "../internals/geometry.js";
-import { getWordsByLines } from "../internals/getWordsByLines.js";
+import { batchMeasureStrings } from "../internals/domUtils.js";
 
 /* Returns a set of indices of the tick labels that should be visible.  */
 export function getVisibleLabels(xTicks, {
@@ -12,23 +12,6 @@ export function getVisibleLabels(xTicks, {
   isMounted,
   isXInside
 }) {
-  const getTickLabelSize = tick => {
-    if (!isMounted || tick.formattedValue === undefined) {
-      return {
-        width: 0,
-        height: 0
-      };
-    }
-    const tickSizes = 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)));
   }
@@ -36,7 +19,7 @@ export 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,
@@ -46,18 +29,25 @@ export 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 = getMinXTranslation(width, height, style?.angle);
     const currentTextLimit = textPosition - direction * distance / 2;
     if (labelIndex > 0 && direction * currentTextLimit < direction * (previousTextLimit + tickLabelMinGap)) {
@@ -68,4 +58,34 @@ export 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 batchMeasureStrings(strings, style);
 }

package/esm/Gauge/Gauge.js

@@ -18,10 +18,7 @@ const useUtilityClasses = props => {
     classes
   } = props;
   const slots = {
-    root: ['root'],
-    valueArc: ['valueArc'],
-    referenceArc: ['referenceArc'],
-    valueText: ['valueText']
+    root: ['root']
   };
   return composeClasses(slots, getGaugeUtilityClass, classes);
 };
@@ -37,13 +34,9 @@ const Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props, ref) {
   return /*#__PURE__*/_jsxs(GaugeContainer, _extends({}, other, {
     className: clsx(classes.root, className),
     ref: ref,
-    children: [/*#__PURE__*/_jsx(GaugeReferenceArc, {
-      className: classes.referenceArc
-    }), /*#__PURE__*/_jsx(GaugeValueArc, {
-      className: classes.valueArc,
+    children: [/*#__PURE__*/_jsx(GaugeReferenceArc, {}), /*#__PURE__*/_jsx(GaugeValueArc, {
       skipAnimation: skipAnimation
     }), /*#__PURE__*/_jsx(GaugeValueText, {
-      className: classes.valueText,
       text: text
     }), children]
   }));