@mui/x-charts 6.0.0-alpha.4 → 6.0.0-alpha.6

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.4
+ * @mui/x-charts v6.0.0-alpha.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -175,6 +175,17 @@ Object.keys(_ScatterChart).forEach(function (key) {
     }
   });
 });
+var _SparkLineChart = require("./SparkLineChart");
+Object.keys(_SparkLineChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SparkLineChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SparkLineChart[key];
+    }
+  });
+});
 var _ChartContainer = require("./ChartContainer");
 Object.keys(_ChartContainer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/defaultizeColor.d.ts

@@ -36,7 +36,8 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     highlightScope?: Partial<import("..").HighlightScope> | undefined;
 } | {
     type: "bar";
-    data: number[];
+    data?: number[] | undefined;
+    dataKey?: string | undefined;
     label?: string | undefined;
     id?: string | undefined;
     color: string;
@@ -49,7 +50,8 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     stackOrder?: "reverse" | "none" | "appearance" | "ascending" | "descending" | "insideOut" | undefined;
 } | {
     type: "line";
-    data: number[];
+    data?: number[] | undefined;
+    dataKey?: string | undefined;
     stack?: string | undefined;
     area?: boolean | undefined;
     label?: string | undefined;

package/legacy/BarChart/BarChart.js

@@ -21,6 +21,7 @@ var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     height = props.height,
     margin = props.margin,
     colors = props.colors,
+    dataset = props.dataset,
     sx = props.sx,
     tooltip = props.tooltip,
     axisHighlight = props.axisHighlight,
@@ -47,7 +48,8 @@ var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
       scaleType: 'band',
       data: Array.from({
         length: Math.max.apply(Math, _toConsumableArray(series.map(function (s) {
-          return s.data.length;
+          var _ref, _s$data;
+          return ((_ref = (_s$data = s.data) != null ? _s$data : dataset) != null ? _ref : []).length;
         })))
       }, function (_, index) {
         return index;
@@ -55,6 +57,7 @@ var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     }],
     yAxis: yAxis,
     colors: colors,
+    dataset: dataset,
     sx: sx,
     disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
     children: [/*#__PURE__*/_jsx("g", {
@@ -83,7 +86,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -105,12 +108,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
   disableAxisListener: PropTypes.bool,
   height: PropTypes.number,
   /**
    * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -150,7 +154,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -168,7 +172,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   }), PropTypes.string]),
   series: PropTypes.arrayOf(PropTypes.shape({
     color: PropTypes.string,
-    data: PropTypes.arrayOf(PropTypes.number).isRequired,
+    data: PropTypes.arrayOf(PropTypes.number),
+    dataKey: PropTypes.string,
     highlightScope: PropTypes.shape({
       faded: PropTypes.oneOf(['global', 'none', 'series']),
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])
@@ -193,7 +198,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -220,15 +225,17 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     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,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
-    max: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     maxTicks: PropTypes.number,
-    min: PropTypes.number,
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
@@ -242,15 +249,17 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     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,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
-    max: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     maxTicks: PropTypes.number,
-    min: PropTypes.number,
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),

package/legacy/BarChart/formatter.js

@@ -4,21 +4,26 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { stack as d3Stack } from 'd3-shape';
 import { getStackingGroups } from '../internals/stackSeries';
 import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
-var formatter = function formatter(params) {
+var formatter = function formatter(params, dataset) {
   var seriesOrder = params.seriesOrder,
     series = params.series;
   var stackingGroups = getStackingGroups(params);
 
   // Create a data set with format adapted to d3
-  var d3Dataset = [];
+  var d3Dataset = dataset != null ? dataset : [];
   seriesOrder.forEach(function (id) {
-    series[id].data.forEach(function (value, index) {
-      if (d3Dataset.length <= index) {
-        d3Dataset.push(_defineProperty({}, id, value));
-      } else {
-        d3Dataset[index][id] = value;
-      }
-    });
+    var data = series[id].data;
+    if (data !== undefined) {
+      data.forEach(function (value, index) {
+        if (d3Dataset.length <= index) {
+          d3Dataset.push(_defineProperty({}, id, value));
+        } else {
+          d3Dataset[index][id] = value;
+        }
+      });
+    } else if (dataset === undefined) {
+      throw new Error(["MUI: bar series with id='".concat(id, "' has no data."), 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+    }
   });
   var completedSeries = {};
   stackingGroups.forEach(function (stackingGroup) {
@@ -26,9 +31,17 @@ var formatter = function formatter(params) {
       stackingOffset = stackingGroup.stackingOffset,
       stackingOrder = stackingGroup.stackingOrder;
     // Get stacked values, and derive the domain
-    var stackedSeries = d3Stack().keys(ids).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    var stackedSeries = d3Stack().keys(ids.map(function (id) {
+      // Use dataKey if needed and available
+      var dataKey = series[id].dataKey;
+      return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
+    })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach(function (id, index) {
+      var dataKey = series[id].dataKey;
       completedSeries[id] = _extends({}, series[id], {
+        data: dataKey ? dataset.map(function (d) {
+          return d[dataKey];
+        }) : series[id].data,
         stackedData: stackedSeries[index].map(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 2),
             a = _ref2[0],

package/legacy/ChartContainer/index.js

@@ -15,6 +15,7 @@ export var ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContaine
     xAxis = props.xAxis,
     yAxis = props.yAxis,
     colors = props.colors,
+    dataset = props.dataset,
     sx = props.sx,
     title = props.title,
     desc = props.desc,
@@ -30,9 +31,11 @@ export var ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContaine
     children: /*#__PURE__*/_jsx(SeriesContextProvider, {
       series: series,
       colors: colors,
+      dataset: dataset,
       children: /*#__PURE__*/_jsx(CartesianContextProvider, {
         xAxis: xAxis,
         yAxis: yAxis,
+        dataset: dataset,
         children: /*#__PURE__*/_jsx(InteractionProvider, {
           children: /*#__PURE__*/_jsx(HighlightProvider, {
             children: /*#__PURE__*/_jsx(ChartsSurface, {

package/legacy/ChartsAxis/ChartsAxis.js

@@ -69,7 +69,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -87,7 +87,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   }), PropTypes.string]),
   /**
    * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -105,7 +105,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   }), PropTypes.string]),
   /**
    * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -123,7 +123,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   }), PropTypes.string]),
   /**
    * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({

package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -24,7 +24,7 @@ export function DefaultChartsAxisContent(props) {
     variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
-      children: [axisValue != null && /*#__PURE__*/_jsx("thead", {
+      children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
         children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
           children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
             colSpan: 3,

package/legacy/LineChart/AreaPlot.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { area as d3Area } from 'd3-shape';
 import { SeriesContext } from '../context/SeriesContextProvider';
@@ -6,7 +7,7 @@ import { AreaElement } from './AreaElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function AreaPlot() {
+export function AreaPlot(props) {
   var seriesData = React.useContext(SeriesContext).line;
   var axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
@@ -20,7 +21,7 @@ export function AreaPlot() {
     yAxisIds = axisData.yAxisIds;
   var defaultXAxisId = xAxisIds[0];
   var defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx("g", {
+  return /*#__PURE__*/_jsx("g", _extends({}, props, {
     children: stackingGroups.flatMap(function (_ref) {
       var groupIds = _ref.ids;
       return groupIds.flatMap(function (seriesId) {
@@ -58,5 +59,5 @@ export function AreaPlot() {
         }, seriesId);
       });
     })
-  });
+  }));
 }

package/legacy/LineChart/LineChart.js

@@ -23,6 +23,7 @@ var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     height = props.height,
     margin = props.margin,
     colors = props.colors,
+    dataset = props.dataset,
     sx = props.sx,
     tooltip = props.tooltip,
     _props$axisHighlight = props.axisHighlight,
@@ -52,7 +53,8 @@ var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
       scaleType: 'point',
       data: Array.from({
         length: Math.max.apply(Math, _toConsumableArray(series.map(function (s) {
-          return s.data.length;
+          var _ref, _s$data;
+          return ((_ref = (_s$data = s.data) != null ? _s$data : dataset) != null ? _ref : []).length;
         })))
       }, function (_, index) {
         return index;
@@ -60,6 +62,7 @@ var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     }],
     yAxis: yAxis,
     colors: colors,
+    dataset: dataset,
     sx: sx,
     disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
     children: [/*#__PURE__*/_jsxs("g", {
@@ -86,7 +89,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -108,12 +111,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
   disableAxisListener: PropTypes.bool,
   height: PropTypes.number,
   /**
    * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -153,7 +157,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -173,7 +177,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     area: PropTypes.bool,
     color: PropTypes.string,
     curve: PropTypes.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
-    data: PropTypes.arrayOf(PropTypes.number).isRequired,
+    data: PropTypes.arrayOf(PropTypes.number),
+    dataKey: PropTypes.string,
     highlightScope: PropTypes.shape({
       faded: PropTypes.oneOf(['global', 'none', 'series']),
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])
@@ -198,7 +203,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -225,15 +230,17 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     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,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
-    max: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     maxTicks: PropTypes.number,
-    min: PropTypes.number,
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
@@ -247,15 +254,17 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     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,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
-    max: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     maxTicks: PropTypes.number,
-    min: PropTypes.number,
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),

package/legacy/LineChart/LinePlot.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { line as d3Line } from 'd3-shape';
 import { SeriesContext } from '../context/SeriesContextProvider';
@@ -6,7 +7,7 @@ import { LineElement } from './LineElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function LinePlot() {
+export function LinePlot(props) {
   var seriesData = React.useContext(SeriesContext).line;
   var axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
@@ -20,7 +21,7 @@ export function LinePlot() {
     yAxisIds = axisData.yAxisIds;
   var defaultXAxisId = xAxisIds[0];
   var defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx("g", {
+  return /*#__PURE__*/_jsx("g", _extends({}, props, {
     children: stackingGroups.flatMap(function (_ref) {
       var groupIds = _ref.ids;
       return groupIds.flatMap(function (seriesId) {
@@ -56,5 +57,5 @@ export function LinePlot() {
         }, seriesId);
       });
     })
-  });
+  }));
 }

package/legacy/LineChart/MarkElement.js

@@ -38,7 +38,7 @@ var MarkElementPath = styled('path', {
   return {
     transform: "translate(".concat(ownerState.x, "px, ").concat(ownerState.y, "px)"),
     transformOrigin: "".concat(ownerState.x, "px ").concat(ownerState.y, "px"),
-    fill: (theme.vars || theme).palette.background.paper,
+    fill: theme.palette.background.paper,
     stroke: ownerState.color,
     strokeWidth: 2,
     '&.MuiMarkElement-highlighted': {

package/legacy/LineChart/MarkPlot.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import { SeriesContext } from '../context/SeriesContextProvider';
@@ -5,7 +6,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function MarkPlot() {
+export function MarkPlot(props) {
   var seriesData = React.useContext(SeriesContext).line;
   var axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
@@ -19,7 +20,7 @@ export function MarkPlot() {
     yAxisIds = axisData.yAxisIds;
   var defaultXAxisId = xAxisIds[0];
   var defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx("g", {
+  return /*#__PURE__*/_jsx("g", _extends({}, props, {
     children: stackingGroups.flatMap(function (_ref) {
       var groupIds = _ref.ids;
       return groupIds.flatMap(function (seriesId) {
@@ -71,5 +72,5 @@ export function MarkPlot() {
         });
       });
     })
-  });
+  }));
 }

package/legacy/LineChart/formatter.js

@@ -4,23 +4,27 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { stack as d3Stack } from 'd3-shape';
 import { getStackingGroups } from '../internals/stackSeries';
 import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
-
 // For now it's a copy past of bar charts formatter, but maybe will diverge later
-var formatter = function formatter(params) {
+var formatter = function formatter(params, dataset) {
   var seriesOrder = params.seriesOrder,
     series = params.series;
   var stackingGroups = getStackingGroups(params);
 
   // Create a data set with format adapted to d3
-  var d3Dataset = [];
+  var d3Dataset = dataset != null ? dataset : [];
   seriesOrder.forEach(function (id) {
-    series[id].data.forEach(function (value, index) {
-      if (d3Dataset.length <= index) {
-        d3Dataset.push(_defineProperty({}, id, value));
-      } else {
-        d3Dataset[index][id] = value;
-      }
-    });
+    var data = series[id].data;
+    if (data !== undefined) {
+      data.forEach(function (value, index) {
+        if (d3Dataset.length <= index) {
+          d3Dataset.push(_defineProperty({}, id, value));
+        } else {
+          d3Dataset[index][id] = value;
+        }
+      });
+    } else if (dataset === undefined) {
+      throw new Error(["MUI: line series with id='".concat(id, "' has no data."), 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+    }
   });
   var completedSeries = {};
   stackingGroups.forEach(function (stackingGroup) {
@@ -28,9 +32,17 @@ var formatter = function formatter(params) {
     var ids = stackingGroup.ids,
       stackingOrder = stackingGroup.stackingOrder,
       stackingOffset = stackingGroup.stackingOffset;
-    var stackedSeries = d3Stack().keys(ids).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    var stackedSeries = d3Stack().keys(ids.map(function (id) {
+      // Use dataKey if needed and available
+      var dataKey = series[id].dataKey;
+      return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
+    })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach(function (id, index) {
+      var dataKey = series[id].dataKey;
       completedSeries[id] = _extends({}, series[id], {
+        data: dataKey ? dataset.map(function (d) {
+          return d[dataKey];
+        }) : series[id].data,
         stackedData: stackedSeries[index].map(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 2),
             a = _ref2[0],

package/legacy/PieChart/PieChart.js

@@ -94,7 +94,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -116,12 +116,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
   disableAxisListener: PropTypes.bool,
   height: PropTypes.number,
   /**
    * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -161,7 +162,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -226,7 +227,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -253,15 +254,17 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     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,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
-    max: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     maxTicks: PropTypes.number,
-    min: PropTypes.number,
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
@@ -275,15 +278,17 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     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,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
-    max: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     maxTicks: PropTypes.number,
-    min: PropTypes.number,
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),