@mui/x-charts 7.3.2 → 7.5.0

package/esm/BarChart/BarPlot.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["skipAnimation", "onItemClick"];
+const _excluded = ["skipAnimation", "onItemClick", "borderRadius"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
@@ -10,6 +10,8 @@ import { BarElement } from './BarElement';
 import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import getColor from './getColor';
+import { useChartId } from '../hooks';
+import { BarClipPath } from './BarClipPath';
 
 /**
  * Solution of the equations
@@ -20,7 +22,7 @@ import getColor from './getColor';
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,
@@ -46,6 +48,7 @@ const useAggregatedData = () => {
     seriesOrder: []
   };
   const axisData = React.useContext(CartesianContext);
+  const chartId = useChartId();
   const {
     series,
     stackingGroups
@@ -58,6 +61,7 @@ const useAggregatedData = () => {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
+  const masks = {};
   const data = stackingGroups.flatMap(({
     ids: groupIds
   }, groupIndex) => {
@@ -111,7 +115,8 @@ const useAggregatedData = () => {
         const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
         const minValueCoord = Math.round(Math.min(...valueCoordinates));
         const maxValueCoord = Math.round(Math.max(...valueCoordinates));
-        return {
+        const stackId = series[seriesId].stack;
+        const result = {
           seriesId,
           dataIndex,
           layout: series[seriesId].layout,
@@ -122,14 +127,41 @@ const useAggregatedData = () => {
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
           width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
           color: colorGetter(dataIndex),
-          highlightScope: series[seriesId].highlightScope
+          highlightScope: series[seriesId].highlightScope,
+          value: series[seriesId].data[dataIndex],
+          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
+        if (!masks[result.maskId]) {
+          masks[result.maskId] = {
+            id: result.maskId,
+            width: 0,
+            height: 0,
+            hasNegative: false,
+            hasPositive: false,
+            layout: result.layout,
+            xOrigin: xScale(0),
+            yOrigin: yScale(0),
+            x: 0,
+            y: 0
+          };
+        }
+        const mask = masks[result.maskId];
+        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
+        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
+        mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
+        mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
+        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
+        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
+        return result;
       });
     });
   });
-  return data;
+  return {
+    completedData: data,
+    masksData: Object.values(masks)
+  };
 };
-const getOutStyle = ({
+const leaveStyle = ({
   layout,
   yOrigin,
   x,
@@ -148,7 +180,7 @@ const getOutStyle = ({
   height,
   width: 0
 });
-const getInStyle = ({
+const enterStyle = ({
   x,
   width,
   y,
@@ -172,41 +204,77 @@ const getInStyle = ({
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
  */
 function BarPlot(props) {
-  const completedData = useAggregatedData();
+  const {
+    completedData,
+    masksData
+  } = useAggregatedData();
   const {
       skipAnimation,
-      onItemClick
+      onItemClick,
+      borderRadius
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const transition = useTransition(completedData, {
     keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
-    from: getOutStyle,
-    leave: getOutStyle,
-    enter: getInStyle,
-    update: getInStyle,
+    from: leaveStyle,
+    leave: leaveStyle,
+    enter: enterStyle,
+    update: enterStyle,
+    immediate: skipAnimation
+  });
+  const maskTransition = useTransition(masksData, {
+    keys: v => v.id,
+    from: leaveStyle,
+    leave: leaveStyle,
+    enter: enterStyle,
+    update: enterStyle,
     immediate: skipAnimation
   });
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: transition((style, {
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [maskTransition((style, {
+      id,
+      hasPositive,
+      hasNegative,
+      layout
+    }) => {
+      return /*#__PURE__*/_jsx(BarClipPath, {
+        maskId: id,
+        borderRadius: borderRadius,
+        hasNegative: hasNegative,
+        hasPositive: hasPositive,
+        layout: layout,
+        style: style
+      });
+    }), transition((style, {
       seriesId,
       dataIndex,
       color,
-      highlightScope
-    }) => /*#__PURE__*/_jsx(BarElement, _extends({
-      id: seriesId,
-      dataIndex: dataIndex,
-      highlightScope: highlightScope,
-      color: color
-    }, other, {
-      onClick: onItemClick && (event => {
-        onItemClick(event, {
-          type: 'bar',
-          seriesId,
-          dataIndex
-        });
-      }),
-      style: style
-    })))
+      highlightScope,
+      maskId
+    }) => {
+      const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
+        id: seriesId,
+        dataIndex: dataIndex,
+        color: color,
+        highlightScope: highlightScope
+      }, other, {
+        onClick: onItemClick && (event => {
+          onItemClick(event, {
+            type: 'bar',
+            seriesId,
+            dataIndex
+          });
+        }),
+        style: style
+      }));
+      if (!borderRadius || borderRadius <= 0) {
+        return barElement;
+      }
+      return /*#__PURE__*/_jsx("g", {
+        clipPath: `url(#${maskId})`,
+        children: barElement
+      });
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
@@ -214,6 +282,10 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: PropTypes.number,
   /**
    * Callback fired when a bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/esm/BarChart/getRadius.js

@@ -0,0 +1,30 @@
+/**
+ * Returns if the corner should have a radius or not based on the layout and the data.
+ * @param {GetRadiusCorner} corner The corner to check.
+ * @param {GetRadiusData} cornerData The data for the corner.
+ * @returns {number} The radius for the corner.
+ */
+export const getRadius = (corner, {
+  hasNegative,
+  hasPositive,
+  borderRadius,
+  layout
+}) => {
+  if (!borderRadius) {
+    return 0;
+  }
+  const isVertical = layout === 'vertical';
+  if (corner === 'top-left' && (isVertical && hasPositive || !isVertical && hasNegative)) {
+    return borderRadius;
+  }
+  if (corner === 'top-right' && (isVertical && hasPositive || !isVertical && hasPositive)) {
+    return borderRadius;
+  }
+  if (corner === 'bottom-right' && (isVertical && hasNegative || !isVertical && hasPositive)) {
+    return borderRadius;
+  }
+  if (corner === 'bottom-left' && (isVertical && hasNegative || !isVertical && hasNegative)) {
+    return borderRadius;
+  }
+  return 0;
+};

package/esm/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/esm/BarChart/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -4,7 +4,7 @@ const _excluded = ["vertical", "horizontal"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { useTicks } from '../hooks/useTicks';
 import { getChartsGridUtilityClass, chartsGridClasses } from './chartsGridClasses';
@@ -12,15 +12,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridRoot = styled('g', {
   name: 'MuiChartsGrid',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (props, styles) => [{
+    [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine
+  }, {
+    [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine
+  }, styles.root]
+})({});
+const GridLine = styled('line', {
+  name: 'MuiChartsGrid',
+  slot: 'Line',
+  overridesResolver: (props, styles) => styles.line
 })(({
   theme
 }) => ({
-  [`& .${chartsGridClasses.line}`]: {
-    stroke: (theme.vars || theme).palette.divider,
-    shapeRendering: 'crispEdges',
-    strokeWidth: 1
-  }
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1
 }));
 const useUtilityClasses = ({
   classes
@@ -42,18 +49,22 @@ const useUtilityClasses = ({
  * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
  */
 function ChartsGrid(props) {
+  const themeProps = useThemeProps({
+    props,
+    name: 'MuiChartsGrid'
+  });
   const {
       vertical,
       horizontal
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    } = themeProps,
+    other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const {
     xAxis,
     xAxisIds,
     yAxis,
     yAxisIds
   } = React.useContext(CartesianContext);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(themeProps);
   const horizontalAxisId = yAxisIds[0];
   const verticalAxisId = xAxisIds[0];
   const {
@@ -81,7 +92,7 @@ function ChartsGrid(props) {
     children: [vertical && xTicks.map(({
       formattedValue,
       offset
-    }) => /*#__PURE__*/_jsx("line", {
+    }) => /*#__PURE__*/_jsx(GridLine, {
       y1: yScale.range()[0],
       y2: yScale.range()[1],
       x1: offset,
@@ -90,7 +101,7 @@ function ChartsGrid(props) {
     }, `vertical-${formattedValue}`)), horizontal && yTicks.map(({
       formattedValue,
       offset
-    }) => /*#__PURE__*/_jsx("line", {
+    }) => /*#__PURE__*/_jsx(GridLine, {
       y1: offset,
       y2: offset,
       x1: xScale.range()[0],

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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,

package/esm/LineChart/LineChart.js

@@ -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,