@mui/x-charts 7.4.0 → 7.5.1

package/modern/BarChart/index.js

@@ -1,3 +1,4 @@
 export * from './BarChart';
 export * from './BarPlot';
-export * from './BarElement';
+export * from './BarElement';
+export * from './BarLabel';

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

@@ -64,7 +64,7 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
 process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
   className: PropTypes.string,
@@ -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/ChartsAxis/ChartsAxis.js

@@ -91,7 +91,7 @@ function ChartsAxis(props) {
 process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Indicate which axis to display the bottom of the charts.

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -97,7 +97,7 @@ function ChartsAxisHighlight(props) {
 process.env.NODE_ENV !== "production" ? ChartsAxisHighlight.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   x: PropTypes.oneOf(['band', 'line', 'none']),
   y: PropTypes.oneOf(['band', 'line', 'none'])

package/modern/ChartsClipPath/ChartsClipPath.js

@@ -38,7 +38,7 @@ function ChartsClipPath(props) {
 process.env.NODE_ENV !== "production" ? ChartsClipPath.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   id: PropTypes.string.isRequired,
   offset: PropTypes.shape({

package/modern/ChartsGrid/ChartsGrid.js

@@ -113,7 +113,7 @@ function ChartsGrid(props) {
 process.env.NODE_ENV !== "production" ? ChartsGrid.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Override or extend the styles applied to the component.

package/modern/ChartsLegend/ChartsLegend.js

@@ -69,7 +69,7 @@ function ChartsLegend(inProps) {
 process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Override or extend the styles applied to the component.

package/modern/ChartsLegend/DefaultChartsLegend.js

@@ -204,7 +204,7 @@ function DefaultChartsLegend(props) {
 process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Override or extend the styles applied to the component.

package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -62,7 +62,7 @@ function ChartsOnAxisClickHandler(props) {
 process.env.NODE_ENV !== "production" ? ChartsOnAxisClickHandler.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The function called for onClick events.

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

@@ -23,7 +23,7 @@ function ChartsReferenceLine(props) {
 process.env.NODE_ENV !== "production" ? ChartsReferenceLine.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The id of the axis used for the reference value.

package/modern/ChartsSurface.js

@@ -44,7 +44,7 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props
 process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
   className: PropTypes.string,

package/modern/ChartsText/ChartsText.js

@@ -70,7 +70,7 @@ function ChartsText(props) {
 process.env.NODE_ENV !== "production" ? ChartsText.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Height of a text line (in `em`).

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -80,7 +80,7 @@ function ChartsAxisTooltipContent(props) {
 process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   axisData: PropTypes.shape({
     x: PropTypes.shape({

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -60,7 +60,7 @@ function ChartsItemTooltipContent(props) {
 process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object.isRequired,
   content: PropTypes.elementType,

package/modern/ChartsTooltip/ChartsTooltip.js

@@ -110,7 +110,7 @@ function ChartsTooltip(props) {
 process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Component to override the tooltip content when trigger is set to 'axis'.

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),
@@ -78,7 +80,7 @@ function DefaultChartsAxisTooltipContent(props) {
 process.env.NODE_ENV !== "production" ? DefaultChartsAxisTooltipContent.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The properties of the triggered axis.

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
   });
@@ -57,7 +61,7 @@ function DefaultChartsItemTooltipContent(props) {
 process.env.NODE_ENV !== "production" ? DefaultChartsItemTooltipContent.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Override or extend the styles applied to the component.

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/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -195,7 +195,7 @@ function ChartsVoronoiHandler(props) {
 process.env.NODE_ENV !== "production" ? ChartsVoronoiHandler.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Callback fired when clicking on a scatter item.

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: {}
@@ -249,7 +248,7 @@ function ChartsXAxis(inProps) {
 process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The id of the axis to render.

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({
@@ -184,7 +184,7 @@ function ChartsYAxis(inProps) {
 process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The id of the axis to render.

package/modern/Gauge/Gauge.js

@@ -44,7 +44,7 @@ function Gauge(props) {
 process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
   classes: PropTypes.object,

package/modern/Gauge/GaugeContainer.js

@@ -106,7 +106,7 @@ const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(pro
 process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
   className: PropTypes.string,

package/modern/Gauge/GaugeValueText.js

@@ -48,7 +48,7 @@ function GaugeValueText(props) {
 process.env.NODE_ENV !== "production" ? GaugeValueText.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Height of a text line (in `em`).

package/modern/LineChart/AnimatedArea.js

@@ -83,7 +83,7 @@ function AnimatedArea(props) {
 process.env.NODE_ENV !== "production" ? AnimatedArea.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   d: PropTypes.string.isRequired,
   ownerState: PropTypes.shape({

package/modern/LineChart/AnimatedLine.js

@@ -86,7 +86,7 @@ function AnimatedLine(props) {
 process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   d: PropTypes.string.isRequired,
   ownerState: PropTypes.shape({

package/modern/LineChart/AreaElement.js

@@ -74,22 +74,22 @@ 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 --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   color: PropTypes.string.isRequired,

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,
@@ -118,7 +119,7 @@ function AreaPlot(props) {
 process.env.NODE_ENV !== "production" ? AreaPlot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Callback fired when a line area item is clicked.

package/modern/LineChart/LineChart.js

@@ -133,7 +133,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
@@ -205,6 +205,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   }),
   /**
    * If `true`, a loading overlay is displayed.
+   * @default false
    */
   loading: PropTypes.bool,
   /**
@@ -304,6 +305,11 @@ process.env.NODE_ENV !== "production" ? LineChart.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]),
@@ -312,11 +318,6 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -357,6 +358,11 @@ process.env.NODE_ENV !== "production" ? LineChart.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]),
@@ -365,11 +371,6 @@ process.env.NODE_ENV !== "production" ? LineChart.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/LineChart/LineElement.js

@@ -74,22 +74,22 @@ function LineElement(props) {
   const lineProps = useSlotProps({
     elementType: Line,
     externalSlotProps: slotProps?.line,
-    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(Line, _extends({}, lineProps));
+  return /*#__PURE__*/_jsx(Line, _extends({}, other, lineProps));
 }
 process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   color: PropTypes.string.isRequired,