@mui/x-charts 6.18.2 → 6.18.4

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,64 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import clsx from 'clsx';
+import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
-import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
+import { DefaultChartsItemTooltipContent } from './DefaultChartsItemTooltipContent';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export function DefaultChartsItemContent(props) {
-  const {
-    series,
-    itemData,
-    sx,
-    classes
-  } = props;
-  if (itemData.dataIndex === undefined) {
-    return null;
-  }
-  const {
-    displayedLabel,
-    color
-  } = series.type === 'pie' ? {
-    color: series.data[itemData.dataIndex].color,
-    displayedLabel: series.data[itemData.dataIndex].label
-  } : {
-    color: series.color,
-    displayedLabel: series.label
-  };
-
-  // TODO: Manage to let TS understand series.data and series.valueFormatter are coherent
-  // @ts-ignore
-  const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
-  return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
-    sx: sx,
-    className: classes.root,
-    children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
-      className: classes.table,
-      children: /*#__PURE__*/_jsx("tbody", {
-        children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-          className: classes.row,
-          children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: clsx(classes.markCell, classes.cell),
-            children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
-              ownerState: {
-                color
-              },
-              className: classes.mark
-            })
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: clsx(classes.labelCell, classes.cell),
-            children: displayedLabel
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: clsx(classes.valueCell, classes.cell),
-            children: formattedValue
-          })]
-        })
-      })
-    })
-  });
-}
-export function ChartsItemTooltipContent(props) {
+function ChartsItemTooltipContent(props) {
   const {
     content,
     itemData,
@@ -67,7 +14,7 @@ export function ChartsItemTooltipContent(props) {
     contentProps
   } = props;
   const series = React.useContext(SeriesContext)[itemData.type].series[itemData.seriesId];
-  const Content = content ?? DefaultChartsItemContent;
+  const Content = content ?? DefaultChartsItemTooltipContent;
   const chartTooltipContentProps = useSlotProps({
     elementType: Content,
     externalSlotProps: contentProps,
@@ -80,4 +27,39 @@ export function ChartsItemTooltipContent(props) {
     ownerState: {}
   });
   return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
-}
+}
+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"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object.isRequired,
+  content: PropTypes.elementType,
+  contentProps: PropTypes.shape({
+    classes: PropTypes.object,
+    itemData: PropTypes.shape({
+      dataIndex: PropTypes.number,
+      seriesId: PropTypes.string.isRequired,
+      type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
+    }),
+    series: PropTypes.shape({
+      color: PropTypes.string,
+      data: PropTypes.arrayOf(PropTypes.number).isRequired,
+      highlightScope: PropTypes.shape({
+        faded: PropTypes.oneOf(['global', 'none', 'series']),
+        highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+      }),
+      id: PropTypes.string.isRequired,
+      type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired,
+      valueFormatter: PropTypes.func.isRequired
+    }),
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  }),
+  itemData: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
+  }).isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { ChartsItemTooltipContent };

package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -0,0 +1,167 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import Typography from '@mui/material/Typography';
+import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function DefaultChartsAxisTooltipContent(props) {
+  const {
+    series,
+    axis,
+    dataIndex,
+    axisValue,
+    sx,
+    classes
+  } = props;
+  if (dataIndex == null) {
+    return null;
+  }
+  const axisFormatter = axis.valueFormatter ?? (v => v.toLocaleString());
+  return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
+    sx: sx,
+    className: classes.root,
+    children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
+      className: classes.table,
+      children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
+        children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
+          children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
+            colSpan: 3,
+            children: /*#__PURE__*/_jsx(Typography, {
+              children: axisFormatter(axisValue)
+            })
+          })
+        })
+      }), /*#__PURE__*/_jsx("tbody", {
+        children: series.map(({
+          color,
+          id,
+          label,
+          valueFormatter,
+          data
+        }) => {
+          const formattedValue = valueFormatter(data[dataIndex]);
+          if (formattedValue == null) {
+            return null;
+          }
+          return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+            className: classes.row,
+            children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
+              className: clsx(classes.markCell, classes.cell),
+              children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
+                ownerState: {
+                  color
+                },
+                boxShadow: 1,
+                className: classes.mark
+              })
+            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+              className: clsx(classes.labelCell, classes.cell),
+              children: label ? /*#__PURE__*/_jsx(Typography, {
+                children: label
+              }) : null
+            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+              className: clsx(classes.valueCell, classes.cell),
+              children: /*#__PURE__*/_jsx(Typography, {
+                children: formattedValue
+              })
+            })]
+          }, id);
+        })
+      })]
+    })
+  });
+}
+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"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The properties of the triggered axis.
+   */
+  axis: PropTypes.shape({
+    axisId: PropTypes.string,
+    classes: PropTypes.object,
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    scale: PropTypes.func.isRequired,
+    scaleType: PropTypes.oneOf(['time']).isRequired,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number.isRequired,
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func
+  }).isRequired,
+  /**
+   * Data identifying the triggered axis.
+   */
+  axisData: PropTypes.shape({
+    x: PropTypes.shape({
+      index: PropTypes.number,
+      value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired
+    }),
+    y: PropTypes.shape({
+      index: PropTypes.number,
+      value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired
+    })
+  }).isRequired,
+  /**
+   * The value associated to the current mouse position.
+   */
+  axisValue: PropTypes.any.isRequired,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * The index of the data item triggered.
+   */
+  dataIndex: PropTypes.number,
+  /**
+   * The series linked to the triggered axis.
+   */
+  series: PropTypes.arrayOf(PropTypes.shape({
+    area: PropTypes.bool,
+    color: PropTypes.string.isRequired,
+    connectNulls: PropTypes.bool,
+    curve: PropTypes.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
+    data: PropTypes.arrayOf(PropTypes.number).isRequired,
+    dataKey: PropTypes.string,
+    disableHighlight: PropTypes.bool,
+    highlightScope: PropTypes.shape({
+      faded: PropTypes.oneOf(['global', 'none', 'series']),
+      highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+    }),
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    showMark: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+    stack: PropTypes.string,
+    stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
+    stackOrder: PropTypes.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
+    type: PropTypes.oneOf(['line']).isRequired,
+    valueFormatter: PropTypes.func.isRequired,
+    xAxisKey: PropTypes.string,
+    yAxisKey: PropTypes.string
+  })).isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { DefaultChartsAxisTooltipContent };

package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function DefaultChartsItemTooltipContent(props) {
+  const {
+    series,
+    itemData,
+    sx,
+    classes
+  } = props;
+  if (itemData.dataIndex === undefined) {
+    return null;
+  }
+  const {
+    displayedLabel,
+    color
+  } = series.type === 'pie' ? {
+    color: series.data[itemData.dataIndex].color,
+    displayedLabel: series.data[itemData.dataIndex].label
+  } : {
+    color: series.color,
+    displayedLabel: series.label
+  };
+
+  // TODO: Manage to let TS understand series.data and series.valueFormatter are coherent
+  // @ts-ignore
+  const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
+  return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
+    sx: sx,
+    className: classes.root,
+    children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
+      className: classes.table,
+      children: /*#__PURE__*/_jsx("tbody", {
+        children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+          className: classes.row,
+          children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
+            className: clsx(classes.markCell, classes.cell),
+            children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
+              ownerState: {
+                color
+              },
+              className: classes.mark
+            })
+          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+            className: clsx(classes.labelCell, classes.cell),
+            children: displayedLabel
+          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+            className: clsx(classes.valueCell, classes.cell),
+            children: formattedValue
+          })]
+        })
+      })
+    })
+  });
+}
+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"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * The data used to identify the triggered item.
+   */
+  itemData: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
+  }).isRequired,
+  /**
+   * The series linked to the triggered axis.
+   */
+  series: PropTypes.shape({
+    color: PropTypes.string,
+    data: PropTypes.arrayOf(PropTypes.number).isRequired,
+    highlightScope: PropTypes.shape({
+      faded: PropTypes.oneOf(['global', 'none', 'series']),
+      highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+    }),
+    id: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired,
+    valueFormatter: PropTypes.func.isRequired
+  }).isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { DefaultChartsItemTooltipContent };

package/modern/ChartsTooltip/index.js

@@ -1,2 +1,6 @@
 export * from './ChartsTooltip';
-export * from './chartsTooltipClasses';
+export * from './chartsTooltipClasses';
+export * from './ChartsAxisTooltipContent';
+export * from './ChartsItemTooltipContent';
+export * from './DefaultChartsAxisTooltipContent';
+export * from './DefaultChartsItemTooltipContent';

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -11,9 +11,10 @@ import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
-import { ChartsText, getWordsByLines } from '../internals/components/ChartsText';
+import { ChartsText } from '../ChartsText';
 import { getMinXTranslation } from '../internals/geometry';
 import { useMounted } from '../hooks/useMounted';
+import { getWordsByLines } from '../internals/getWordsByLines';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -10,7 +10,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
-import { ChartsText } from '../internals/components/ChartsText';
+import { ChartsText } from '../ChartsText';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -74,6 +74,8 @@ function ChartsYAxis(inProps) {
     tickFontSize,
     label,
     labelFontSize,
+    labelStyle,
+    tickLabelStyle,
     tickSize: tickSizeProp,
     valueFormatter,
     slots,
@@ -108,11 +110,11 @@ function ChartsYAxis(inProps) {
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
-      style: {
+      style: _extends({
         fontSize: tickFontSize,
         textAnchor: position === 'right' ? 'start' : 'end',
         dominantBaseline: 'central'
-      },
+      }, tickLabelStyle),
       className: classes.tickLabel
     },
     ownerState: {}
@@ -121,12 +123,12 @@ function ChartsYAxis(inProps) {
     elementType: Label,
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
-      style: {
+      style: _extends({
         fontSize: labelFontSize,
         angle: positionSign * 90,
         textAnchor: 'middle',
         dominantBaseline: 'auto'
-      }
+      }, labelStyle)
     },
     ownerState: {}
   });

package/modern/LineChart/AreaPlot.js

@@ -9,6 +9,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { AreaElement } from './AreaElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -61,10 +62,10 @@ function AreaPlot(props) {
         const xData = xAxis[xAxisKey].data;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
-            throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+            throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
           }
           if (xData.length < stackedData.length) {
-            throw new Error(`MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
+            throw new Error(`MUI-X-Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
           }
         }
         const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));

package/modern/LineChart/LineHighlightPlot.js

@@ -8,6 +8,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { LineHighlightElement } from './LineHighlightElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { InteractionContext } from '../context/InteractionProvider';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -69,7 +70,7 @@ function LineHighlightPlot(props) {
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
         if (xData === undefined) {
-          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+          throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
         }
         const x = xScale(xData[highlightedIndex]);
         const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale

package/modern/LineChart/LinePlot.js

@@ -9,6 +9,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { LineElement } from './LineElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -60,10 +61,10 @@ function LinePlot(props) {
         const xData = xAxis[xAxisKey].data;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
-            throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
+            throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot`);
           }
           if (xData.length < stackedData.length) {
-            throw new Error(`MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
+            throw new Error(`MUI-X-Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
           }
         }
         const linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));

package/modern/LineChart/MarkPlot.js

@@ -7,6 +7,7 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -75,7 +76,7 @@ function MarkPlot(props) {
           return true;
         };
         if (xData === undefined) {
-          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
+          throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot`);
         }
         return xData?.map((x, index) => {
           const value = data[index] == null ? null : stackedData[index][1];

package/modern/LineChart/extremums.js

@@ -6,6 +6,18 @@ export const getExtremumX = params => {
   const maxX = Math.max(...(axis.data ?? []));
   return [minX, maxX];
 };
+function getSeriesExtremums(getValues, stackedData) {
+  if (stackedData.length === 0) {
+    return [null, null];
+  }
+  return stackedData.reduce((seriesAcc, stackedValue) => {
+    const [base, value] = getValues(stackedValue);
+    if (seriesAcc[0] === null) {
+      return [Math.min(base, value), Math.max(base, value)];
+    }
+    return [Math.min(base, value, seriesAcc[0]), Math.max(base, value, seriesAcc[1])];
+  }, getValues(stackedData[0]));
+}
 export const getExtremumY = params => {
   const {
     series,
@@ -13,16 +25,21 @@ export const getExtremumY = params => {
     isDefaultAxis
   } = params;
   return Object.keys(series).filter(seriesId => series[seriesId].yAxisKey === axis.id || isDefaultAxis && series[seriesId].yAxisKey === undefined).reduce((acc, seriesId) => {
-    const isArea = series[seriesId].area !== undefined;
-    const getValues = isArea ? d => d : d => [d[1], d[1]]; // Id area should go from bottom to top, without area should only consider the top
+    const {
+      area,
+      stackedData
+    } = series[seriesId];
+    const isArea = area !== undefined;
+    const getValues = isArea ? d => d : d => [d[1], d[1]]; // Since this series is not used to display an area, we do not consider the base (the d[0]).
 
-    const [seriesMin, seriesMax] = series[seriesId].stackedData.reduce((seriesAcc, stackedValue) => {
-      const [base, value] = getValues(stackedValue);
-      return [Math.min(base, value, seriesAcc[0]), Math.max(base, value, seriesAcc[1])];
-    }, getValues(series[seriesId].stackedData[0]));
-    if (acc[0] === null || acc[1] === null) {
-      return [seriesMin, seriesMax];
+    const seriesExtremums = getSeriesExtremums(getValues, stackedData);
+    if (acc[0] === null) {
+      return seriesExtremums;
+    }
+    if (seriesExtremums[0] === null) {
+      return acc;
     }
+    const [seriesMin, seriesMax] = seriesExtremums;
     return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
   }, [null, null]);
 };

package/modern/LineChart/formatter.js

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from 'd3-shape';
 import { getStackingGroups } from '../internals/stackSeries';
 import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
+let warnedOnce = false;
+
 // For now it's a copy past of bar charts formatter, but maybe will diverge later
 const formatter = (params, dataset) => {
   const {
@@ -25,7 +27,7 @@ const formatter = (params, dataset) => {
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
-      throw new Error([`MUI: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+      throw new Error([`MUI-X-Charts: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
   const completedSeries = {};
@@ -45,7 +47,17 @@ const formatter = (params, dataset) => {
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = _extends({}, series[id], {
-        data: dataKey ? dataset.map(d => d[dataKey]) : series[id].data,
+        data: dataKey ? dataset.map(data => {
+          const value = data[dataKey];
+          if (typeof value !== 'number') {
+            if (process.env.NODE_ENV !== 'production' && !warnedOnce && value !== null) {
+              warnedOnce = true;
+              console.error([`MUI-X charts: your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
+            }
+            return 0;
+          }
+          return value;
+        }) : series[id].data,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b])
       });
     });

package/modern/LineChart/index.js

@@ -1,8 +1,8 @@
-export { LinePlot } from './LinePlot';
-export { AreaPlot } from './AreaPlot';
-export { MarkPlot } from './MarkPlot';
-export { LineHighlightPlot } from './LineHighlightPlot';
-export { LineChart } from './LineChart';
+export * from './LineChart';
+export * from './LinePlot';
+export * from './AreaPlot';
+export * from './MarkPlot';
+export * from './LineHighlightPlot';
 export * from './AreaElement';
 export * from './LineElement';
 export * from './MarkElement';