@mui/x-charts 8.15.0 → 8.16.0

package/BarChart/BarChart.plugins.d.ts

@@ -5,5 +5,5 @@ import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/
 import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
 import { UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export type BarChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+export type BarChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'bar'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
 export declare const BAR_CHART_PLUGINS: ConvertSignaturesIntoPlugins<BarChartPluginSignatures>;

package/BarChart/BarChart.plugins.js

@@ -10,4 +10,4 @@ var _useChartInteraction = require("../internals/plugins/featurePlugins/useChart
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
 var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
-const BAR_CHART_PLUGINS = exports.BAR_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+const BAR_CHART_PLUGINS = exports.BAR_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/BarChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
-  return (0, _extends2.default)({
+  return (0, _extends2.default)({}, seriesData, {
     id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
-    color: colors[seriesIndex % colors.length]
-  }, seriesData);
+    color: seriesData.color ?? colors[seriesIndex % colors.length]
+  });
 };
 var _default = exports.default = getSeriesWithDefaultValues;

package/BarChart/seriesConfig/index.js

@@ -11,12 +11,14 @@ var _seriesProcessor = _interopRequireDefault(require("./seriesProcessor"));
 var _legend = _interopRequireDefault(require("./legend"));
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _tooltip = _interopRequireWildcard(require("./tooltip"));
+var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 const seriesConfig = exports.seriesConfig = {
   seriesProcessor: _seriesProcessor.default,
   colorProcessor: _getColor.default,
   legendGetter: _legend.default,
   tooltipGetter: _tooltip.default,
+  tooltipItemPositionGetter: _tooltipPosition.default,
   axisTooltipGetter: _tooltip.axisTooltipGetter,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,

package/BarChart/seriesConfig/tooltipPosition.d.ts

@@ -0,0 +1,3 @@
+import type { TooltipItemPositionGetter } from "../../internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.js";
+declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'bar'>;
+export default tooltipItemPositionGetter;

package/BarChart/seriesConfig/tooltipPosition.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _useBarPlotData = require("../useBarPlotData");
+const tooltipItemPositionGetter = params => {
+  const {
+    series,
+    identifier,
+    axesConfig,
+    placement
+  } = params;
+  if (!identifier || identifier.dataIndex === undefined) {
+    return null;
+  }
+  const itemSeries = series.bar?.series[identifier.seriesId];
+  if (series.bar == null || itemSeries == null) {
+    return null;
+  }
+  if (axesConfig.x === undefined || axesConfig.y === undefined) {
+    return null;
+  }
+  const dimensions = (0, _useBarPlotData.getBarDimensions)({
+    verticalLayout: itemSeries.layout === 'vertical',
+    xAxisConfig: axesConfig.x,
+    yAxisConfig: axesConfig.y,
+    series: itemSeries,
+    dataIndex: identifier.dataIndex,
+    numberOfGroups: series.bar.stackingGroups.length,
+    groupIndex: series.bar.stackingGroups.findIndex(group => group.ids.includes(itemSeries.id))
+  });
+  if (dimensions == null) {
+    return null;
+  }
+  const {
+    x,
+    y,
+    width,
+    height
+  } = dimensions;
+  switch (placement) {
+    case 'right':
+      return {
+        x: x + width,
+        y: y + height / 2
+      };
+    case 'bottom':
+      return {
+        x: x + width / 2,
+        y: y + height
+      };
+    case 'left':
+      return {
+        x,
+        y: y + height / 2
+      };
+    case 'top':
+    default:
+      return {
+        x: x + width / 2,
+        y
+      };
+  }
+};
+var _default = exports.default = tooltipItemPositionGetter;

package/BarChart/useBarPlotData.d.ts

@@ -1,8 +1,23 @@
-import { ChartsXAxisProps, ChartsYAxisProps } from "../models/axis.js";
+import { ChartsXAxisProps, ChartsYAxisProps, ComputedAxis, ScaleName } from "../models/axis.js";
 import { ChartDrawingArea } from "../hooks/index.js";
 import { MaskData, ProcessedBarSeriesData } from "./types.js";
 import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.js";
+import { ChartSeriesDefaultized } from "../models/seriesType/config.js";
 export declare function useBarPlotData(drawingArea: ChartDrawingArea, xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): {
   completedData: ProcessedBarSeriesData[];
   masksData: MaskData[];
-};
+};
+export declare function getBarDimensions(params: {
+  verticalLayout: boolean;
+  xAxisConfig: ComputedAxis<ScaleName, any, ChartsXAxisProps>;
+  yAxisConfig: ComputedAxis<ScaleName, any, ChartsYAxisProps>;
+  series: ChartSeriesDefaultized<'bar'>;
+  dataIndex: number;
+  numberOfGroups: number;
+  groupIndex: number;
+}): {
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+} | null;

package/BarChart/useBarPlotData.js

@@ -4,7 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getBarDimensions = getBarDimensions;
 exports.useBarPlotData = useBarPlotData;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
 var _hooks = require("../hooks");
 var _checkScaleErrors = require("./checkScaleErrors");
@@ -42,50 +44,32 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
       const xScale = xAxisConfig.scale;
       const yScale = yAxisConfig.scale;
       const colorGetter = (0, _getColor.default)(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
-      const bandWidth = baseScaleConfig.scale.bandwidth();
-      const {
-        barWidth,
-        offset
-      } = getBandSize({
-        bandWidth,
-        numberOfGroups: stackingGroups.length,
-        gapRatio: baseScaleConfig.barGapRatio
-      });
-      const barOffset = groupIndex * (barWidth + offset);
-      const {
-        stackedData,
-        data: currentSeriesData,
-        layout,
-        minBarSize
-      } = series[seriesId];
       const seriesDataPoints = [];
       for (let dataIndex = 0; dataIndex < baseScaleConfig.data.length; dataIndex += 1) {
-        const baseValue = baseScaleConfig.data[dataIndex];
-        const seriesValue = currentSeriesData[dataIndex];
-        if (seriesValue == null) {
+        const barDimensions = getBarDimensions({
+          verticalLayout,
+          xAxisConfig,
+          yAxisConfig,
+          series: series[seriesId],
+          dataIndex,
+          numberOfGroups: stackingGroups.length,
+          groupIndex
+        });
+        if (barDimensions == 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 = seriesValue === 0 ? 0 : Math.max(minBarSize, maxValueCoord - minValueCoord);
-        const startCoordinate = shouldInvertStartCoordinate(verticalLayout, seriesValue, reverse) ? maxValueCoord - barSize : minValueCoord;
-        const result = {
+        const result = (0, _extends2.default)({
           seriesId,
           dataIndex,
-          layout,
-          x: verticalLayout ? xScale(baseValue) + barOffset : startCoordinate,
-          y: verticalLayout ? startCoordinate : yScale(baseValue) + barOffset,
+          layout: series[seriesId].layout,
           xOrigin: xScale(0) ?? 0,
-          yOrigin: yScale(0) ?? 0,
-          height: verticalLayout ? barSize : barWidth,
-          width: verticalLayout ? barWidth : barSize,
+          yOrigin: yScale(0) ?? 0
+        }, barDimensions, {
           color: colorGetter(dataIndex),
-          value: currentSeriesData[dataIndex],
+          value: series[seriesId].data[dataIndex],
           maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
-        };
+        });
         if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
           continue;
         }
@@ -157,4 +141,45 @@ function shouldInvertStartCoordinate(verticalLayout, baseValue, reverse) {
   const isHorizontalAndNegative = !verticalLayout && baseValue < 0;
   const invertStartCoordinate = isVerticalAndPositive || isHorizontalAndNegative;
   return reverse ? !invertStartCoordinate : invertStartCoordinate;
+}
+function getBarDimensions(params) {
+  const {
+    verticalLayout,
+    xAxisConfig,
+    yAxisConfig,
+    series,
+    dataIndex,
+    numberOfGroups,
+    groupIndex
+  } = params;
+  const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+  const reverse = (verticalLayout ? yAxisConfig.reverse : xAxisConfig.reverse) ?? false;
+  const {
+    barWidth,
+    offset
+  } = getBandSize({
+    bandWidth: baseScaleConfig.scale.bandwidth(),
+    numberOfGroups,
+    gapRatio: baseScaleConfig.barGapRatio
+  });
+  const barOffset = groupIndex * (barWidth + offset);
+  const xScale = xAxisConfig.scale;
+  const yScale = yAxisConfig.scale;
+  const baseValue = baseScaleConfig.data[dataIndex];
+  const seriesValue = series.data[dataIndex];
+  if (seriesValue == null) {
+    return null;
+  }
+  const values = series.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 barSize = seriesValue === 0 ? 0 : Math.max(series.minBarSize, maxValueCoord - minValueCoord);
+  const startCoordinate = shouldInvertStartCoordinate(verticalLayout, seriesValue, reverse) ? maxValueCoord - barSize : minValueCoord;
+  return {
+    x: verticalLayout ? xScale(baseValue) + barOffset : startCoordinate,
+    y: verticalLayout ? startCoordinate : yScale(baseValue) + barOffset,
+    height: verticalLayout ? barSize : barWidth,
+    width: verticalLayout ? barWidth : barSize
+  };
 }

package/CHANGELOG.md

@@ -5,6 +5,106 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.16.0
+
+_Oct 29, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🖌️ Add `brush` zoom interaction to charts
+- 🔁 [Server-side update](https://mui.com/x/react-data-grid/server-side-data/#updating-server-side-data) in a grid with tree data/row grouping and aggregation will trigger re-fetch for all parent levels of that row to update aggregated values. See the [demo](https://mui.com/x/react-data-grid/server-side-data/aggregation/#usage-with-tree-data).
+
+Special thanks go out to the community members for their valuable contributions:
+@felix-wg, @frncesc, @sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @brijeshb42, @flaviendelangle, @JCQuintas, @MBilalShafi, @mbrookes, @michelengelen, @noraleonte, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.16.0`
+
+- [DataGrid] Ignore `Ctrl+A` key combination for the row selection in the community version (#20110) @felix-wg
+- [DataGrid][l10n] Improve Spanish (es-ES) locale (#20134) @frncesc
+
+#### `@mui/x-data-grid-pro@8.16.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.16.0`, plus:
+
+- [DataGridPro] Add explicit return type to `getVisibleRowsLookup()` to fix the build with `tsc` (#20116) @arminmeh
+- [DataGridPro] Retain the expansion state with expansion configuration props (#20126) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.16.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.16.0`, plus:
+
+- [DataGridPremium] Export and restore chart integration state (#20079) @arminmeh
+- [DataGridPremium] Fix grouping column `valueFormatter()` crash  (#20070) @sai6855
+- [DataGridPremium] Refetch aggregation data after row update with server-side aggregation (#20039) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.16.0`
+
+- [pickers] Prevent blur event propagation on individual sections (#19825) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.16.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.16.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.16.0`
+
+- [charts] Allow tooltip to anchor items (#19954) @alexfauquette
+- [charts] Fix behavior of grouped axis (#20118) @JCQuintas
+- [charts] Move scale symlog inside scales (#20137) @JCQuintas
+- [charts] Fix AreaChartConnectNulls demo height not correctly resizing (#20078) @sai6855
+- [charts] Fix charts resizing overflow (#20080) @alexfauquette
+- [charts] Fix tooltip not showing on first render (#20115) @bernardobelchior
+- [charts] Handle `undefined` id and color in series (#20087) @bernardobelchior
+- [charts] Remove `useMemo` from isZoomOn*Enabled and isPanOn*Enabled hooks (#20132) @Copilot
+- [charts] Use static data for perf (#20072) @JCQuintas
+- [charts] Move scale symlog inside scales (#20137) @JCQuintas
+
+#### `@mui/x-charts-pro@8.16.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.16.0`, plus:
+
+- [charts-pro] Add `brush` zoom interaction (#19899) @JCQuintas
+- [charts-pro] Add sankey performance check (#20069) @JCQuintas
+
+#### `@mui/x-charts-premium@8.16.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.16.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.16.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.16.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.16.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.16.0`
+
+Internal changes.
+
+### Core
+
+- [code-infra] Setup eslint compat plugin (#20105) @brijeshb42
+- [code-infra] Improve store types (#20129) @JCQuintas
+- [docs] Update the callout in `rows` prop documentation (#20127) @MBilalShafi
+- [docs-infra] Refine changelog contributor acknowledgment messages (#20123) @mbrookes
+
+### Miscellaneous
+
+- [x-telemetry] Skip telemetry tests on browser mode (#20122) @bernardobelchior
+
 ## 8.15.0
 
 _Oct 23, 2025_

package/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -17,7 +17,8 @@ var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
- */function ChartsXHighlight(props) {
+ */
+function ChartsXHighlight(props) {
   const {
     type,
     classes

package/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -17,7 +17,8 @@ var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
- */function ChartsYHighlight(props) {
+ */
+function ChartsYHighlight(props) {
   const {
     type,
     classes

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

@@ -29,7 +29,7 @@ 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 _excluded = ["trigger", "position", "anchor", "classes", "children"];
 const selectorReturnFalse = () => false;
 const ChartsTooltipRoot = (0, _styles.styled)(_Popper.default, {
   name: 'MuiChartsTooltip',
@@ -45,7 +45,7 @@ const selectorSelectIsOpenSelector = (0, _selectors.createSelector)([_useChartBr
     return selectorReturnFalse;
   }
   if (trigger === 'item') {
-    return _useChartInteraction.selectorChartsInteractionItemIsDefined;
+    return _useChartInteraction.selectorChartsTooltipItemIsDefined;
   }
   if (axisSystem === 'polar') {
     return _useChartPolarInteraction.selectorChartsInteractionPolarAxisTooltip;
@@ -72,6 +72,8 @@ function ChartsTooltipContainer(inProps) {
   });
   const {
       trigger = 'axis',
+      position,
+      anchor = 'pointer',
       classes: propClasses,
       children
     } = props,
@@ -89,30 +91,46 @@ function ChartsTooltipContainer(inProps) {
   const store = (0, _useStore.useStore)();
   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,
@@ -156,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
     }))
   });
@@ -173,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.
@@ -306,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,