@mui/x-charts 7.17.0 → 7.19.0

package/hooks/useReducedMotion.js

@@ -1,10 +1,10 @@
 'use client';
 
 import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
-const handleMediaChange = e => {
+const handleMediaChange = event => {
   Globals.assign({
     // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
-    skipAnimation: e.matches || undefined
+    skipAnimation: event.matches || undefined
   });
 };
 

package/hooks/useSeries.d.ts

@@ -11,7 +11,7 @@ export declare function useSeries(): FormattedSeries;
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedPieSeriesType>; seriesOrder: SeriesId[]; } | undefined pieSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedPieSeriesType>; seriesOrder: SeriesId[]; } | undefined}  pieSeries
  */
 export declare function usePieSeries(): FormattedSeries['pie'];
 /**
@@ -19,7 +19,7 @@ export declare function usePieSeries(): FormattedSeries['pie'];
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedLineSeriesType>; seriesOrder: SeriesId[]; } | undefined lineSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedLineSeriesType>; seriesOrder: SeriesId[]; } | undefined}  lineSeries
  */
 export declare function useLineSeries(): FormattedSeries['line'];
 /**
@@ -27,7 +27,7 @@ export declare function useLineSeries(): FormattedSeries['line'];
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedBarSeriesType>; seriesOrder: SeriesId[]; } | undefined barSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedBarSeriesType>; seriesOrder: SeriesId[]; } | undefined}  barSeries
  */
 export declare function useBarSeries(): FormattedSeries['bar'];
 /**
@@ -35,6 +35,6 @@ export declare function useBarSeries(): FormattedSeries['bar'];
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedScatterSeriesType>; seriesOrder: SeriesId[]; } | undefined scatterSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedScatterSeriesType>; seriesOrder: SeriesId[]; } | undefined}  scatterSeries
  */
 export declare function useScatterSeries(): FormattedSeries['scatter'];

package/hooks/useSeries.js

@@ -25,7 +25,7 @@ export function useSeries() {
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedPieSeriesType>; seriesOrder: SeriesId[]; } | undefined pieSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedPieSeriesType>; seriesOrder: SeriesId[]; } | undefined}  pieSeries
  */
 export function usePieSeries() {
   const series = useSeries();
@@ -37,7 +37,7 @@ export function usePieSeries() {
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedLineSeriesType>; seriesOrder: SeriesId[]; } | undefined lineSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedLineSeriesType>; seriesOrder: SeriesId[]; } | undefined}  lineSeries
  */
 export function useLineSeries() {
   const series = useSeries();
@@ -49,7 +49,7 @@ export function useLineSeries() {
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedBarSeriesType>; seriesOrder: SeriesId[]; } | undefined barSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedBarSeriesType>; seriesOrder: SeriesId[]; } | undefined}  barSeries
  */
 export function useBarSeries() {
   const series = useSeries();
@@ -61,7 +61,7 @@ export function useBarSeries() {
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedScatterSeriesType>; seriesOrder: SeriesId[]; } | undefined scatterSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedScatterSeriesType>; seriesOrder: SeriesId[]; } | undefined}  scatterSeries
  */
 export function useScatterSeries() {
   const series = useSeries();

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.17.0
+ * @mui/x-charts v7.19.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/AxisSharedComponents.d.ts

@@ -1 +1 @@
-export declare const AxisRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;
+export declare const AxisRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;

package/internals/computeAxisValue.d.ts

@@ -0,0 +1,38 @@
+import { AxisConfig, ScaleName } from '../models';
+import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps, ChartsRadiusAxisProps, ChartsRotationAxisProps } from '../models/axis';
+import { CartesianChartSeriesType } from '../models/seriesType/config';
+import { DrawingArea } from '../context/DrawingProvider';
+import { FormattedSeries } from '../context/SeriesProvider';
+import { ExtremumGetter } from '../context/PluginProvider';
+import { DefaultizedAxisConfig, ZoomData, ZoomOptions, GetZoomAxisFilters } from '../context/CartesianProvider/Cartesian.types';
+type ComputeResult<T extends ChartsAxisProps> = {
+    axis: DefaultizedAxisConfig<T>;
+    axisIds: string[];
+};
+type ComputeCommonParams = {
+    drawingArea: DrawingArea;
+    formattedSeries: FormattedSeries;
+    extremumGetters: {
+        [K in CartesianChartSeriesType]?: ExtremumGetter<K>;
+    };
+    zoomData?: ZoomData[];
+    zoomOptions?: ZoomOptions;
+    getFilters?: GetZoomAxisFilters;
+};
+export declare function computeAxisValue(options: ComputeCommonParams & {
+    axis: AxisConfig<ScaleName, any, ChartsYAxisProps>[];
+    axisDirection: 'y';
+}): ComputeResult<ChartsYAxisProps>;
+export declare function computeAxisValue(options: ComputeCommonParams & {
+    axis: AxisConfig<ScaleName, any, ChartsXAxisProps>[];
+    axisDirection: 'x';
+}): ComputeResult<ChartsAxisProps>;
+export declare function computeAxisValue(options: ComputeCommonParams & {
+    axis: AxisConfig<ScaleName, any, ChartsRadiusAxisProps>[];
+    axisDirection: 'radius';
+}): ComputeResult<ChartsRadiusAxisProps>;
+export declare function computeAxisValue(options: ComputeCommonParams & {
+    axis: AxisConfig<ScaleName, any, ChartsRotationAxisProps>[];
+    axisDirection: 'rotation';
+}): ComputeResult<ChartsRotationAxisProps>;
+export {};

package/{context/CartesianProvider/computeValue.js → internals/computeAxisValue.js}

@@ -1,15 +1,29 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
-import { isBandScaleConfig, isPointScaleConfig } from "../../models/axis.js";
-import { getColorScale, getOrdinalColorScale } from "../../internals/colorScale.js";
-import { getTickNumber } from "../../hooks/useTicks.js";
-import { getScale } from "../../internals/getScale.js";
-import { zoomScaleRange } from "./zoom.js";
-import { getAxisExtremum } from "./getAxisExtremum.js";
-const getRange = (drawingArea, axisDirection, isReverse) => {
+import { isBandScaleConfig, isPointScaleConfig } from "../models/axis.js";
+import { getColorScale, getOrdinalColorScale } from "./colorScale.js";
+import { getTickNumber } from "../hooks/useTicks.js";
+import { getScale } from "./getScale.js";
+import { zoomScaleRange } from "../context/CartesianProvider/zoom.js";
+import { getAxisExtremum } from "../context/CartesianProvider/getAxisExtremum.js";
+function getRange(drawingArea, axisDirection, axis) {
+  if (axisDirection === 'rotation') {
+    const {
+      startAngle = 0,
+      endAngle = startAngle + 360
+    } = axis;
+    return axis.reverse ? [Math.PI * startAngle / 180, Math.PI * endAngle / 180] : [Math.PI * endAngle / 180, Math.PI * startAngle / 180];
+  }
+  if (axisDirection === 'radius') {
+    const {
+      minRadius = 0,
+      maxRadius = Math.min(drawingArea.width, drawingArea.height) / 2
+    } = axis;
+    return [minRadius, maxRadius];
+  }
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
-  return isReverse ? range.reverse() : range;
-};
+  return axis.reverse ? [range[1], range[0]] : range;
+}
 const isDateData = data => data?.[0] instanceof Date;
 function createDateFormatter(axis, range) {
   const timeScale = scaleTime(axis.data, range);
@@ -19,7 +33,7 @@ function createDateFormatter(axis, range) {
 }
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
-export function computeValue({
+export function computeAxisValue({
   drawingArea,
   formattedSeries,
   axis: allAxis,
@@ -32,21 +46,20 @@ export function computeValue({
   const completeAxis = {};
   allAxis.forEach((eachAxis, axisIndex) => {
     const axis = eachAxis;
-    const isDefaultAxis = axisIndex === 0;
     const zoomOption = zoomOptions?.[axis.id];
     const zoom = zoomData?.find(({
       axisId
     }) => axisId === axis.id);
     const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
-    const range = getRange(drawingArea, axisDirection, axis.reverse);
-    const [minData, maxData] = getAxisExtremum(axis, extremumGetters, isDefaultAxis, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
+    const range = getRange(drawingArea, axisDirection, axis);
+    const [minData, maxData] = getAxisExtremum(axis, extremumGetters, axisIndex, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
     );
     const data = axis.data ?? [];
     if (isBandScaleConfig(axis)) {
       const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
       const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
       // Reverse range because ordinal scales are presented from top to bottom on y-axis
-      const scaleRange = axisDirection === 'x' ? range : [range[1], range[0]];
+      const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range;
       const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({
         categoryGapRatio,
@@ -65,7 +78,7 @@ export function computeValue({
       }
     }
     if (isPointScaleConfig(axis)) {
-      const scaleRange = axisDirection === 'x' ? range : [...range].reverse();
+      const scaleRange = axisDirection === 'y' ? [...range].reverse() : range;
       const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({}, axis, {
         data,

package/internals/configInit.d.ts

@@ -3,7 +3,7 @@ declare class CartesianSeriesTypes {
     types: Set<ChartSeriesType>;
     constructor();
     addType(value: ChartSeriesType): void;
-    getTypes(): Set<keyof import("../models/seriesType/config").ChartsSeriesConfig>;
+    getTypes(): Set<keyof import(".").ChartsSeriesConfig>;
 }
 export declare const cartesianSeriesTypes: CartesianSeriesTypes;
 export {};

package/internals/defaultizeColor.d.ts

@@ -4,7 +4,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
         color: string;
         label?: (string | ((location: "tooltip" | "legend" | "arc") => string)) | undefined;
         value: number;
-        id?: import("../models/seriesType").PieItemId | undefined;
+        id?: import("..").PieItemId | undefined;
     }[];
     type: "pie";
     innerRadius?: number | string;
@@ -14,8 +14,8 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     startAngle?: number;
     endAngle?: number;
     paddingAngle?: number;
-    sortingValues?: import("../models/seriesType").ChartsPieSorting;
-    arcLabel?: "formattedValue" | "label" | "value" | ((item: Omit<import("../models/seriesType").DefaultizedPieValueType, "label"> & {
+    sortingValues?: import("..").ChartsPieSorting;
+    arcLabel?: "formattedValue" | "label" | "value" | ((item: Omit<import("..").DefaultizedPieValueType, "label"> & {
         label?: string;
     }) => string);
     arcLabelMinAngle?: number;
@@ -41,7 +41,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     };
     id?: import(".").SeriesId;
     color?: string;
-    valueFormatter?: import(".").SeriesValueFormatter<import(".").MakeOptional<import("../models/seriesType").PieValueType, "id">> | undefined;
+    valueFormatter?: import(".").SeriesValueFormatter<import(".").MakeOptional<import("..").PieValueType, "id">> | undefined;
     highlightScope?: Partial<import("..").HighlightScope>;
 } | {
     type: "bar";
@@ -62,7 +62,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     stackOrder?: import("..").StackOrderType;
 } | {
     type: "scatter";
-    data: import("../models/seriesType").ScatterValueType[];
+    data: import("..").ScatterValueType[];
     markerSize?: number;
     label?: string | ((location: "tooltip" | "legend") => string);
     disableHover?: boolean;
@@ -70,7 +70,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     zAxisId?: string;
     id?: import(".").SeriesId;
     color: string;
-    valueFormatter?: import(".").SeriesValueFormatter<import("../models/seriesType").ScatterValueType> | undefined;
+    valueFormatter?: import(".").SeriesValueFormatter<import("..").ScatterValueType> | undefined;
     highlightScope?: Partial<import("..").HighlightScope>;
     xAxisKey?: string;
     yAxisKey?: string;
@@ -83,8 +83,8 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     stack?: string;
     area?: boolean;
     label?: string | ((location: "tooltip" | "legend") => string);
-    curve?: import("../models/seriesType").CurveType;
-    showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams) => boolean);
+    curve?: import("..").CurveType;
+    showMark?: boolean | ((params: import("..").ShowMarkParams) => boolean);
     disableHighlight?: boolean;
     connectNulls?: boolean;
     stackOffset?: import("..").StackOffsetType;

package/internals/domUtils.js

@@ -113,7 +113,7 @@ export const getStringSize = (text, style = {}) => {
       measurementSpan.textContent = '';
     }, 0);
     return result;
-  } catch (e) {
+  } catch {
     return {
       width: 0,
       height: 0

package/internals/geometry.js

@@ -1,7 +1,6 @@
+import { warnOnce } from '@mui/x-internals/warning';
 const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle as perfectly horizontal/vertical
 
-let warnedOnce = false;
-
 /**
  * Return the minimal translation along the x-axis to avoid overflow of a rectangle of a given width, height, and rotation.
  * This assumes that all rectangles have the same height and angle between -90 and 90.
@@ -12,9 +11,8 @@ let warnedOnce = false;
  */
 export function getMinXTranslation(width, height, angle = 0) {
   if (process.env.NODE_ENV !== 'production') {
-    if (!warnedOnce && angle > 90 && angle < -90) {
-      warnedOnce = true;
-      console.warn([`MUI X: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`, `This could cause some text overlapping.`, `If you encounter a use case where it's needed, please open an issue.`].join('\n'));
+    if (angle > 90 && angle < -90) {
+      warnOnce([`MUI X: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`, `This could cause some text overlapping.`, `If you encounter a use case where it's needed, please open an issue.`]);
     }
   }
   const standardAngle = Math.min(Math.abs(angle) % 180, Math.abs(Math.abs(angle) % 180 - 180) % 180); // Map from R to [0, 90]

package/internals/getPercentageValue.js

@@ -24,5 +24,5 @@ export function getPercentageValue(value, refValue) {
       return val;
     }
   }
-  throw Error(`MUI X: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
+  throw new Error(`MUI X: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
 }

package/internals/index.d.ts

@@ -17,6 +17,7 @@ export * from './getSVGPoint';
 export * from './isDefined';
 export { unstable_cleanupDOM } from './domUtils';
 export * from './getScale';
+export * from './computeAxisValue';
 export * from '../context/CartesianProvider';
 export * from '../context/DrawingProvider';
 export * from '../context/InteractionProvider';

package/internals/index.js

@@ -22,6 +22,7 @@ export * from "./getSVGPoint.js";
 export * from "./isDefined.js";
 export { unstable_cleanupDOM } from "./domUtils.js";
 export * from "./getScale.js";
+export * from "./computeAxisValue.js";
 
 // contexts
 

package/models/axis.d.ts

@@ -127,6 +127,26 @@ export interface ChartsXAxisProps extends ChartsAxisProps {
      */
     position?: 'top' | 'bottom';
 }
+export interface ChartsRotationAxisProps extends ChartsAxisProps {
+    /**
+     * The start angle (in deg).
+     */
+    startAngle?: number;
+    /**
+     * The end angle (in deg).
+     */
+    endAngle?: number;
+}
+export interface ChartsRadiusAxisProps extends ChartsAxisProps {
+    /**
+     * The minimal radius.
+     */
+    minRadius?: number;
+    /**
+     * The maximal radius.
+     */
+    maxRadius?: number;
+}
 export type ScaleName = keyof AxisScaleConfig;
 export type ContinuousScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
 export interface AxisScaleConfig {

package/models/seriesType/config.d.ts

@@ -1,7 +1,7 @@
-import { ScatterSeriesType, DefaultizedScatterSeriesType, ScatterItemIdentifier } from './scatter';
+import { ScatterSeriesType, DefaultizedScatterSeriesType, ScatterItemIdentifier, ScatterValueType } from './scatter';
 import { LineSeriesType, DefaultizedLineSeriesType, LineItemIdentifier } from './line';
 import { BarItemIdentifier, BarSeriesType, DefaultizedBarSeriesType } from './bar';
-import { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType } from './pie';
+import { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType, DefaultizedPieValueType } from './pie';
 import { DefaultizedProps, MakeOptional } from '../helpers';
 export interface ChartsSeriesConfig {
     bar: {
@@ -20,6 +20,7 @@ export interface ChartsSeriesConfig {
          */
         seriesProp: BarSeriesType;
         itemIdentifier: BarItemIdentifier;
+        valueType: number | null;
         canBeStacked: true;
         cartesian: true;
     };
@@ -30,6 +31,7 @@ export interface ChartsSeriesConfig {
         series: DefaultizedLineSeriesType;
         seriesProp: LineSeriesType;
         itemIdentifier: LineItemIdentifier;
+        valueType: number | null;
         canBeStacked: true;
         cartesian: true;
     };
@@ -39,6 +41,7 @@ export interface ChartsSeriesConfig {
         };
         series: DefaultizedScatterSeriesType;
         seriesProp: ScatterSeriesType;
+        valueType: ScatterValueType;
         itemIdentifier: ScatterItemIdentifier;
         cartesian: true;
     };
@@ -51,6 +54,7 @@ export interface ChartsSeriesConfig {
         series: DefaultizedPieSeriesType;
         seriesProp: PieSeriesType<MakeOptional<PieValueType, 'id'>>;
         itemIdentifier: PieItemIdentifier;
+        valueType: DefaultizedPieValueType;
     };
 }
 export type ChartSeriesType = keyof ChartsSeriesConfig;

package/models/seriesType/line.d.ts

@@ -40,6 +40,11 @@ export interface LineSeriesType extends CommonSeriesType<number | null>, Cartesi
      * The label to display on the tooltip or the legend. It can be a string or a function.
      */
     label?: string | ((location: 'tooltip' | 'legend') => string);
+    /**
+     * The type of curve to use for the line.
+     * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+     * @default 'monotoneX'
+     */
     curve?: CurveType;
     /**
      * Define which items of the series should display a mark.

package/modern/BarChart/BarChart.js

@@ -196,6 +196,16 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.

package/modern/BarChart/formatter.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
+import { warnOnce } from '@mui/x-internals/warning';
 import { getStackingGroups } from "../internals/stackSeries.js";
 import { defaultizeValueFormatter } from "../internals/defaultizeValueFormatter.js";
-let warnOnce = false;
 const formatter = (params, dataset) => {
   const {
     seriesOrder,
@@ -50,9 +50,10 @@ const formatter = (params, dataset) => {
         data: dataKey ? dataset.map(data => {
           const value = data[dataKey];
           if (typeof value !== 'number') {
-            if (process.env.NODE_ENV !== 'production' && !warnOnce && value !== null) {
-              warnOnce = true;
-              console.error([`MUI X charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.'].join('\n'));
+            if (process.env.NODE_ENV !== 'production') {
+              if (value !== null) {
+                warnOnce([`MUI X: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.']);
+              }
             }
             return 0;
           }

package/modern/ChartContainer/useDefaultizeAxis.js

@@ -18,7 +18,7 @@ const defaultizeAxis = (inAxis, dataset, axisName) => {
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+      throw new Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
     }
     return _extends({}, axisConfig, {
       data: dataset.map(d => d[dataKey])

package/modern/ChartsAxis/ChartsAxis.js

@@ -59,16 +59,16 @@ function ChartsAxis(props) {
   const topId = getAxisId(topAxis, xAxisIds[0]);
   const rightId = getAxisId(rightAxis, yAxisIds[0]);
   if (topId !== null && !xAxis[topId]) {
-    throw Error([`MUI X: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
+    throw new Error([`MUI X: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }
   if (leftId !== null && !yAxis[leftId]) {
-    throw Error([`MUI X: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
+    throw new Error([`MUI X: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
   }
   if (rightId !== null && !yAxis[rightId]) {
-    throw Error([`MUI X: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
+    throw new Error([`MUI X: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
   }
   if (bottomId !== null && !xAxis[bottomId]) {
-    throw Error([`MUI X: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
+    throw new Error([`MUI X: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }
   const topAxisProps = mergeProps(topAxis, slots, slotProps);
   const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);

package/modern/ChartsLegend/DefaultChartsLegend.js

@@ -26,7 +26,7 @@ function DefaultChartsLegend(props) {
   }
   return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
     itemsToDisplay: seriesToDisplay,
-    onItemClick: onItemClick ? (e, i) => onItemClick(e, seriesContextBuilder(seriesToDisplay[i]), i) : undefined
+    onItemClick: onItemClick ? (event, i) => onItemClick(event, seriesContextBuilder(seriesToDisplay[i]), i) : undefined
   }));
 }
 process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {

package/modern/ChartsLegend/LegendPerItem.js

@@ -122,7 +122,7 @@ export function LegendPerItem(props) {
         markGap: markGap,
         labelStyle: labelStyle,
         classes: classes,
-        onClick: onItemClick ? e => onItemClick(e, i) : undefined
+        onClick: onItemClick ? event => onItemClick(event, i) : undefined
       })))
     })
   });

package/modern/ChartsLegend/PiecewiseColorLegend.js

@@ -80,7 +80,7 @@ function PiecewiseColorLegend(props) {
   }).filter(notNull);
   return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
     itemsToDisplay: itemsToDisplay,
-    onItemClick: onItemClick ? (e, i) => onItemClick(e, piecewiseColorContextBuilder(itemsToDisplay[i]), i) : undefined
+    onItemClick: onItemClick ? (event, i) => onItemClick(event, piecewiseColorContextBuilder(itemsToDisplay[i]), i) : undefined
   }));
 }
 process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {

package/modern/ChartsTooltip/index.js

@@ -4,4 +4,7 @@ export * from "./ChartsAxisTooltipContent.js";
 export * from "./ChartsItemTooltipContent.js";
 export * from "./DefaultChartsAxisTooltipContent.js";
 export * from "./DefaultChartsItemTooltipContent.js";
-export * from "./ChartsTooltipTable.js";
+export * from "./ChartsTooltipTable.js";
+export * from "./useItemTooltip.js";
+export * from "./useAxisTooltip.js";
+export { useMouseTracker } from "./utils.js";

package/modern/ChartsTooltip/useAxisTooltip.js

@@ -0,0 +1,84 @@
+'use client';
+
+import * as React from 'react';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useSeries } from "../hooks/useSeries.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
+import { getLabel } from "../internals/getLabel.js";
+import { isCartesianSeriesType } from "../internals/isCartesian.js";
+import { utcFormatter } from "./utils.js";
+export function useAxisTooltip() {
+  const {
+    axis
+  } = React.useContext(InteractionContext);
+  const series = useSeries();
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = useCartesianContext();
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(ZAxisContext);
+  const colorProcessors = useColorProcessor();
+
+  // By default use the x-axis
+  const isXaxis = axis.x !== null && axis.x.index !== -1;
+  const axisData = isXaxis ? axis.x && axis.x : axis.y && axis.y;
+  if (axisData === null) {
+    return null;
+  }
+  const {
+    index: dataIndex,
+    value: axisValue
+  } = axisData;
+  const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
+  const usedAxis = isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
+  const relevantSeries = Object.keys(series).filter(isCartesianSeriesType).flatMap(seriesType => {
+    const seriesOfType = series[seriesType];
+    if (!seriesOfType) {
+      return [];
+    }
+    return seriesOfType.seriesOrder.map(seriesId => {
+      const seriesToAdd = seriesOfType.series[seriesId];
+      const providedXAxisId = seriesToAdd.xAxisId ?? seriesToAdd.xAxisKey;
+      const providedYAxisId = seriesToAdd.yAxisId ?? seriesToAdd.yAxisKey;
+      const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
+
+      // Test if the series uses the default axis
+      if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+        const xAxisId = providedXAxisId ?? xAxisIds[0];
+        const yAxisId = providedYAxisId ?? yAxisIds[0];
+        const zAxisId = seriesToAdd.zAxisId ?? seriesToAdd.zAxisKey ?? zAxisIds[0];
+        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId && zAxis[zAxisId])(dataIndex) ?? '';
+        const value = seriesToAdd.data[dataIndex] ?? null;
+        const formattedValue = seriesToAdd.valueFormatter(value, {
+          dataIndex
+        });
+        const formattedLabel = getLabel(seriesToAdd.label, 'tooltip') ?? null;
+        return {
+          seriesId,
+          color,
+          value,
+          formattedValue,
+          formattedLabel
+        };
+      }
+      return undefined;
+    });
+  }).filter(item => item != null);
+  const axisFormatter = usedAxis.valueFormatter ?? (v => usedAxis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
+  const axisFormattedValue = axisFormatter(axisValue, {
+    location: 'tooltip'
+  });
+  return {
+    identifier: axis,
+    seriesItems: relevantSeries,
+    axisValue,
+    axisFormattedValue
+  };
+}