@mui/x-charts 7.4.0 → 7.5.0

package/esm/SparkLineChart/SparkLineChart.js

@@ -226,6 +226,11 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -234,11 +239,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,

package/esm/context/ZAxisContextProvider.js

@@ -67,6 +67,11 @@ process.env.NODE_ENV !== "production" ? ZAxisContextProvider.propTypes = {
    */
   zAxis: PropTypes.arrayOf(PropTypes.shape({
     colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -75,11 +80,6 @@ process.env.NODE_ENV !== "production" ? ZAxisContextProvider.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,

package/esm/hooks/useAxisEvents.js

@@ -90,7 +90,7 @@ export const useAxisEvents = disableAxisListener => {
         value: axisData[dataIndex]
       };
     };
-    const handleMouseOut = () => {
+    const handleOut = () => {
       mousePosition.current = {
         x: -1,
         y: -1
@@ -99,8 +99,9 @@ export const useAxisEvents = disableAxisListener => {
         type: 'exitChart'
       });
     };
-    const handleMouseMove = event => {
-      const svgPoint = getSVGPoint(svgRef.current, event);
+    const handleMove = event => {
+      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
+      const svgPoint = getSVGPoint(svgRef.current, target);
       mousePosition.current = {
         x: svgPoint.x,
         y: svgPoint.y
@@ -123,11 +124,15 @@ export const useAxisEvents = disableAxisListener => {
         }
       });
     };
-    element.addEventListener('mouseout', handleMouseOut);
-    element.addEventListener('mousemove', handleMouseMove);
+    element.addEventListener('mouseout', handleOut);
+    element.addEventListener('mousemove', handleMove);
+    element.addEventListener('touchend', handleOut);
+    element.addEventListener('touchmove', handleMove);
     return () => {
-      element.removeEventListener('mouseout', handleMouseOut);
-      element.removeEventListener('mousemove', handleMouseMove);
+      element.removeEventListener('mouseout', handleOut);
+      element.removeEventListener('mousemove', handleMove);
+      element.removeEventListener('touchend', handleOut);
+      element.removeEventListener('touchmove', handleMove);
     };
   }, [svgRef, dispatch, left, width, top, height, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener]);
 };

package/esm/internals/getLabel.js

@@ -0,0 +1,3 @@
+export function getLabel(value, location) {
+  return typeof value === 'function' ? value(location) : value;
+}

package/hooks/useAxisEvents.js

@@ -98,7 +98,7 @@ const useAxisEvents = disableAxisListener => {
         value: axisData[dataIndex]
       };
     };
-    const handleMouseOut = () => {
+    const handleOut = () => {
       mousePosition.current = {
         x: -1,
         y: -1
@@ -107,8 +107,9 @@ const useAxisEvents = disableAxisListener => {
         type: 'exitChart'
       });
     };
-    const handleMouseMove = event => {
-      const svgPoint = (0, _utils.getSVGPoint)(svgRef.current, event);
+    const handleMove = event => {
+      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
+      const svgPoint = (0, _utils.getSVGPoint)(svgRef.current, target);
       mousePosition.current = {
         x: svgPoint.x,
         y: svgPoint.y
@@ -131,11 +132,15 @@ const useAxisEvents = disableAxisListener => {
         }
       });
     };
-    element.addEventListener('mouseout', handleMouseOut);
-    element.addEventListener('mousemove', handleMouseMove);
+    element.addEventListener('mouseout', handleOut);
+    element.addEventListener('mousemove', handleMove);
+    element.addEventListener('touchend', handleOut);
+    element.addEventListener('touchmove', handleMove);
     return () => {
-      element.removeEventListener('mouseout', handleMouseOut);
-      element.removeEventListener('mousemove', handleMouseMove);
+      element.removeEventListener('mouseout', handleOut);
+      element.removeEventListener('mousemove', handleMove);
+      element.removeEventListener('touchend', handleOut);
+      element.removeEventListener('touchmove', handleMove);
     };
   }, [svgRef, dispatch, left, width, top, height, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener]);
 };

package/index.js

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

package/internals/defaultizeColor.d.ts

@@ -2,7 +2,7 @@ import { AllSeriesType } from '../models/seriesType';
 export declare function defaultizeColor(series: AllSeriesType, seriesIndex: number, colors?: string[]): {
     data: {
         color: string;
-        label?: string | undefined;
+        label?: string | ((location: "tooltip" | "legend" | "arc") => string) | undefined;
         value: number;
         id?: import("../models/seriesType").PieItemId | undefined;
     }[];
@@ -15,7 +15,9 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     endAngle?: number | undefined;
     paddingAngle?: number | undefined;
     sortingValues?: import("../models/seriesType").ChartsPieSorting | undefined;
-    arcLabel?: "label" | "value" | "formattedValue" | ((item: import("../models/seriesType").DefaultizedPieValueType) => string) | undefined;
+    arcLabel?: "label" | "value" | "formattedValue" | ((item: Omit<import("../models/seriesType").DefaultizedPieValueType, "label"> & {
+        label?: string | undefined;
+    }) => string) | undefined;
     arcLabelMinAngle?: number | undefined;
     cx?: string | number | undefined;
     cy?: string | number | undefined;
@@ -45,7 +47,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     type: "bar";
     data?: (number | null)[] | undefined;
     dataKey?: string | undefined;
-    label?: string | undefined;
+    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
     layout?: "horizontal" | "vertical" | undefined;
     stackOffset?: import("..").StackOffsetType | undefined;
     id?: import("../models/seriesType/common").SeriesId | undefined;
@@ -60,7 +62,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     type: "scatter";
     data: import("../models/seriesType").ScatterValueType[];
     markerSize?: number | undefined;
-    label?: string | undefined;
+    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
     disableHover?: boolean | undefined;
     zAxisKey?: string | undefined;
     id?: import("../models/seriesType/common").SeriesId | undefined;
@@ -75,7 +77,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     dataKey?: string | undefined;
     stack?: string | undefined;
     area?: boolean | undefined;
-    label?: string | undefined;
+    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
     curve?: import("../models/seriesType").CurveType | undefined;
     showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams<number | Date>) => boolean) | undefined;
     disableHighlight?: boolean | undefined;

package/internals/getLabel.d.ts

@@ -0,0 +1 @@
+export declare function getLabel<Location extends string>(value: string | ((location: Location) => string) | undefined, location: Location): string | undefined;

package/internals/getLabel.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLabel = getLabel;
+function getLabel(value, location) {
+  return typeof value === 'function' ? value(location) : value;
+}

package/internals/utils.d.ts

@@ -9,7 +9,7 @@ export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U,
  * @param svg The SVG element
  * @param event The mouseEvent to transform
  */
-export declare function getSVGPoint(svg: SVGSVGElement, event: MouseEvent): DOMPoint;
+export declare function getSVGPoint(svg: SVGSVGElement, event: Pick<MouseEvent, 'clientX' | 'clientY'>): DOMPoint;
 /**
  * Helper that converts values and percentages into values.
  * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.

package/models/seriesType/bar.d.ts

@@ -11,7 +11,10 @@ export interface BarSeriesType extends CommonSeriesType<number | null>, Cartesia
      * The key used to retrieve data from the dataset.
      */
     dataKey?: string;
-    label?: string;
+    /**
+     * The label to display on the tooltip or the legend. It can be a string or a function.
+     */
+    label?: string | ((location: 'tooltip' | 'legend') => string);
     /**
      * Layout of the bars. All bar should have the same layout.
      * @default 'vertical'

package/models/seriesType/line.d.ts

@@ -36,7 +36,10 @@ export interface LineSeriesType extends CommonSeriesType<number | null>, Cartesi
     dataKey?: string;
     stack?: string;
     area?: boolean;
-    label?: string;
+    /**
+     * The label to display on the tooltip or the legend. It can be a string or a function.
+     */
+    label?: string | ((location: 'tooltip' | 'legend') => string);
     curve?: CurveType;
     /**
      * Define which items of the series should display a mark.

package/models/seriesType/pie.d.ts

@@ -8,7 +8,10 @@ export type PieValueType = {
      */
     id: PieItemId;
     value: number;
-    label?: string;
+    /**
+     * The label to display on the tooltip, arc, or the legend. It can be a string or a function.
+     */
+    label?: string | ((location: 'tooltip' | 'legend' | 'arc') => string);
     color?: string;
 };
 export type DefaultizedPieValueType = PieValueType & Omit<D3PieArcDatum<any>, 'data'> & {
@@ -16,9 +19,9 @@ export type DefaultizedPieValueType = PieValueType & Omit<D3PieArcDatum<any>, 'd
     formattedValue: string;
 };
 export type ChartsPieSorting = 'none' | 'asc' | 'desc' | ((a: number, b: number) => number);
-export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Tdata> {
+export interface PieSeriesType<TData = PieValueType> extends CommonSeriesType<TData> {
     type: 'pie';
-    data: Tdata[];
+    data: TData[];
     /**
      * The radius between circle center and the beginning of the arc.
      * Can be a number (in px) or a string with a percentage such as '50%'.
@@ -69,7 +72,9 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
     /**
      * The label displayed into the arc.
      */
-    arcLabel?: 'formattedValue' | 'label' | 'value' | ((item: DefaultizedPieValueType) => string);
+    arcLabel?: 'formattedValue' | 'label' | 'value' | ((item: Omit<DefaultizedPieValueType, 'label'> & {
+        label?: string;
+    }) => string);
     /**
      * The minimal angle required to display the arc label.
      * @default 0

package/models/seriesType/scatter.d.ts

@@ -13,7 +13,10 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType>, C
     type: 'scatter';
     data: ScatterValueType[];
     markerSize?: number;
-    label?: string;
+    /**
+     * The label to display on the tooltip or the legend. It can be a string or a function.
+     */
+    label?: string | ((location: 'tooltip' | 'legend') => string);
     /**
      * If true, the interaction will not use element hover for this series.
      * @default false

package/modern/BarChart/BarChart.js

@@ -205,6 +205,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   }),
   /**
    * If `true`, a loading overlay is displayed.
+   * @default false
    */
   loading: PropTypes.bool,
   /**
@@ -297,6 +298,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -305,11 +311,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -350,6 +351,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -358,11 +364,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,

package/modern/BarChart/BarElement.js

@@ -79,16 +79,17 @@ function BarElement(props) {
   const barProps = useSlotProps({
     elementType: Bar,
     externalSlotProps: slotProps?.bar,
-    additionalProps: _extends({}, other, getInteractionItemProps({
+    externalForwardedProps: other,
+    additionalProps: _extends({}, getInteractionItemProps({
       type: 'bar',
       seriesId: id,
       dataIndex
     }), {
       style,
-      className: classes.root,
       onClick,
       cursor: onClick ? 'pointer' : 'unset'
     }),
+    className: classes.root,
     ownerState
   });
   return /*#__PURE__*/_jsx(Bar, _extends({}, barProps));

package/modern/BarChart/legend.js

@@ -1,13 +1,20 @@
+import { getLabel } from '../internals/getLabel';
 const legendGetter = params => {
   const {
     seriesOrder,
     series
   } = params;
-  const data = seriesOrder.map(seriesId => ({
-    color: series[seriesId].color,
-    label: series[seriesId].label,
-    id: seriesId
-  }));
-  return data.filter(item => item.label !== undefined);
+  return seriesOrder.reduce((acc, seriesId) => {
+    const formattedLabel = getLabel(series[seriesId].label, 'legend');
+    if (formattedLabel === undefined) {
+      return acc;
+    }
+    acc.push({
+      color: series[seriesId].color,
+      label: formattedLabel,
+      id: seriesId
+    });
+    return acc;
+  }, []);
 };
 export default legendGetter;

package/modern/ChartContainer/ChartContainer.js

@@ -127,6 +127,11 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -135,11 +140,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -180,6 +180,11 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -188,11 +193,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,

package/modern/ChartsOverlay/ChartsLoadingOverlay.js

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["message"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
@@ -7,7 +7,7 @@ import { useDrawingArea } from '../hooks/useDrawingArea';
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledText = styled('text')(({
   theme
-}) => ({
+}) => _extends({}, theme.typography.body2, {
   stroke: 'none',
   fill: theme.palette.text.primary,
   shapeRendering: 'crispEdges',
@@ -29,6 +29,6 @@ export function ChartsLoadingOverlay(props) {
     x: left + width / 2,
     y: top + height / 2
   }, other, {
-    children: message ?? 'Loading data ...'
+    children: message ?? 'Loading data…'
   }));
 }

package/modern/ChartsOverlay/ChartsNoDataOverlay.js

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["message"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
@@ -7,7 +7,7 @@ import { useDrawingArea } from '../hooks/useDrawingArea';
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledText = styled('text')(({
   theme
-}) => ({
+}) => _extends({}, theme.typography.body2, {
   stroke: 'none',
   fill: theme.palette.text.primary,
   shapeRendering: 'crispEdges',

package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
 import { isCartesianSeries, utcFormatter } from './utils';
+import { getLabel } from '../internals/getLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DefaultChartsAxisTooltipContent(props) {
   const {
@@ -50,6 +51,7 @@ function DefaultChartsAxisTooltipContent(props) {
           if (formattedValue == null) {
             return null;
           }
+          const formattedLabel = getLabel(label, 'tooltip');
           return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
             className: classes.row,
             children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
@@ -60,8 +62,8 @@ function DefaultChartsAxisTooltipContent(props) {
               })
             }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
               className: clsx(classes.labelCell, classes.cell),
-              children: label ? /*#__PURE__*/_jsx(Typography, {
-                children: label
+              children: formattedLabel ? /*#__PURE__*/_jsx(Typography, {
+                children: formattedLabel
               }) : null
             }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
               className: clsx(classes.valueCell, classes.cell),

package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -1,7 +1,9 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
+import { getLabel } from '../internals/getLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DefaultChartsItemTooltipContent(props) {
   const {
@@ -19,12 +21,14 @@ function DefaultChartsItemTooltipContent(props) {
     color
   } = series.type === 'pie' ? {
     color: getColor(itemData.dataIndex),
-    displayedLabel: series.data[itemData.dataIndex].label
+    displayedLabel: getLabel(series.data[itemData.dataIndex].label, 'tooltip')
   } : {
     color: getColor(itemData.dataIndex) ?? series.color,
-    displayedLabel: series.label
+    displayedLabel: getLabel(series.label, 'tooltip')
   };
-  const value = series.data[itemData.dataIndex];
+  const value = series.type === 'pie' ? _extends({}, series.data[itemData.dataIndex], {
+    label: getLabel(series.data[itemData.dataIndex].label, 'tooltip')
+  }) : series.data[itemData.dataIndex];
   const formattedValue = series.valueFormatter?.(value, {
     dataIndex: itemData.dataIndex
   });

package/modern/ChartsTooltip/utils.js

@@ -53,20 +53,25 @@ export function useMouseTracker() {
     if (element === null) {
       return () => {};
     }
-    const handleMouseOut = () => {
+    const handleOut = () => {
       setMousePosition(null);
     };
-    const handleMouseMove = event => {
+    const handleMove = event => {
+      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
       setMousePosition({
-        x: event.clientX,
-        y: event.clientY
+        x: target.clientX,
+        y: target.clientY
       });
     };
-    element.addEventListener('mouseout', handleMouseOut);
-    element.addEventListener('mousemove', handleMouseMove);
+    element.addEventListener('mouseout', handleOut);
+    element.addEventListener('mousemove', handleMove);
+    element.addEventListener('touchend', handleOut);
+    element.addEventListener('touchmove', handleMove);
     return () => {
-      element.removeEventListener('mouseout', handleMouseOut);
-      element.removeEventListener('mousemove', handleMouseMove);
+      element.removeEventListener('mouseout', handleOut);
+      element.removeEventListener('mousemove', handleMove);
+      element.addEventListener('touchend', handleOut);
+      element.addEventListener('touchmove', handleMove);
     };
   }, [svgRef]);
   return mousePosition;

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -167,8 +167,7 @@ function ChartsXAxis(inProps) {
         textAnchor: 'middle',
         dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
         fontSize: tickFontSize ?? 12
-      }, tickLabelStyle),
-      className: classes.tickLabel
+      }, tickLabelStyle)
     },
     className: classes.tickLabel,
     ownerState: {}

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -120,9 +120,9 @@ function ChartsYAxis(inProps) {
         fontSize: tickFontSize,
         textAnchor: position === 'right' ? 'start' : 'end',
         dominantBaseline: 'central'
-      }, tickLabelStyle),
-      className: classes.tickLabel
+      }, tickLabelStyle)
     },
+    className: classes.tickLabel,
     ownerState: {}
   });
   const axisLabelProps = useSlotProps({

package/modern/LineChart/AreaElement.js

@@ -74,17 +74,17 @@ function AreaElement(props) {
   const areaProps = useSlotProps({
     elementType: Area,
     externalSlotProps: slotProps?.area,
-    additionalProps: _extends({}, other, getInteractionItemProps({
+    additionalProps: _extends({}, getInteractionItemProps({
       type: 'line',
       seriesId: id
     }), {
-      className: classes.root,
       onClick,
       cursor: onClick ? 'pointer' : 'unset'
     }),
+    className: classes.root,
     ownerState
   });
-  return /*#__PURE__*/_jsx(Area, _extends({}, areaProps));
+  return /*#__PURE__*/_jsx(Area, _extends({}, other, areaProps));
 }
 process.env.NODE_ENV !== "production" ? AreaElement.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/LineChart/AreaPlot.js

@@ -33,7 +33,8 @@ const useAggregatedData = () => {
   return stackingGroups.flatMap(({
     ids: groupIds
   }) => {
-    return groupIds.flatMap(seriesId => {
+    return [...groupIds].reverse() // Revert stacked area for a more pleasant animation
+    .map(seriesId => {
       const {
         xAxisKey = defaultXAxisId,
         yAxisKey = defaultYAxisId,
@@ -92,7 +93,7 @@ function AreaPlot(props) {
   const getGradientId = useChartGradient();
   const completedData = useAggregatedData();
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: completedData.reverse().map(({
+    children: completedData.map(({
       d,
       seriesId,
       color,