@mui/x-charts 6.0.0-alpha.5 → 6.0.0-alpha.7

package/context/CartesianContextProvider.js

@@ -43,12 +43,37 @@ const CartesianContext = /*#__PURE__*/React.createContext({
 });
 exports.CartesianContext = CartesianContext;
 function CartesianContextProvider({
-  xAxis,
-  yAxis,
+  xAxis: inXAxis,
+  yAxis: inYAxis,
+  dataset,
   children
 }) {
   const formattedSeries = React.useContext(_SeriesContextProvider.SeriesContext);
   const drawingArea = React.useContext(_DrawingProvider.DrawingContext);
+  const xAxis = React.useMemo(() => inXAxis?.map(axisConfig => {
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return axisConfig;
+    }
+    if (dataset === undefined) {
+      throw Error('MUI: x-axis uses `dataKey` but no `dataset` is provided.');
+    }
+    return (0, _extends2.default)({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  }), [inXAxis, dataset]);
+  const yAxis = React.useMemo(() => inYAxis?.map(axisConfig => {
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return axisConfig;
+    }
+    if (dataset === undefined) {
+      throw Error('MUI: y-axis uses `dataKey` but no `dataset` is provided.');
+    }
+    return (0, _extends2.default)({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  }), [inYAxis, dataset]);
   const value = React.useMemo(() => {
     const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis) => {
       const getter = getters[chartType];
@@ -109,7 +134,8 @@ function CartesianContextProvider({
       const scaleType = axis.scaleType ?? 'linear';
       const extremums = [axis.min ?? minData, axis.max ?? maxData];
       const ticksNumber = (0, _useTicks.getTicksNumber)((0, _extends2.default)({}, axis, {
-        range
+        range,
+        domain: extremums
       }));
       const niceScale = (0, _getScale.getScale)(scaleType, extremums, range).nice(ticksNumber);
       const niceDomain = niceScale.domain();
@@ -156,7 +182,8 @@ function CartesianContextProvider({
       const scaleType = axis.scaleType ?? 'linear';
       const extremums = [axis.min ?? minData, axis.max ?? maxData];
       const ticksNumber = (0, _useTicks.getTicksNumber)((0, _extends2.default)({}, axis, {
-        range
+        range,
+        domain: extremums
       }));
       const niceScale = (0, _getScale.getScale)(scaleType, extremums, range).nice(ticksNumber);
       const niceDomain = niceScale.domain();
@@ -191,48 +218,57 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
+  dataset: _propTypes.default.arrayOf(_propTypes.default.object),
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
-    max: _propTypes.default.number,
-    maxTicks: _propTypes.default.number,
-    min: _propTypes.default.number,
-    minTicks: _propTypes.default.number,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number,
-    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   })),
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
-    max: _propTypes.default.number,
-    maxTicks: _propTypes.default.number,
-    min: _propTypes.default.number,
-    minTicks: _propTypes.default.number,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number,
-    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }))
 } : void 0;

package/context/SeriesContextProvider.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { AllSeriesType } from '../models/seriesType';
-import { ChartSeriesType, FormatterResult } from '../models/seriesType/config';
+import { ChartSeriesType, DatasetType, FormatterResult } from '../models/seriesType/config';
 import { ChartsColorPalette } from '../colorPalettes';
 export type SeriesContextProviderProps = {
+    dataset?: DatasetType;
     series: AllSeriesType[];
     /**
      * Color palette used to colorize multiple series.
@@ -14,4 +15,4 @@ export type FormattedSeries = {
     [type in ChartSeriesType]?: FormatterResult<type>;
 };
 export declare const SeriesContext: React.Context<FormattedSeries>;
-export declare function SeriesContextProvider({ series, colors, children, }: SeriesContextProviderProps): React.JSX.Element;
+export declare function SeriesContextProvider({ series, dataset, colors, children, }: SeriesContextProviderProps): React.JSX.Element;

package/context/SeriesContextProvider.js

@@ -26,6 +26,7 @@ const seriesTypeFormatter = {
   line: _formatter3.default,
   pie: _formatter4.default
 };
+
 /**
  * This methods is the interface between what the developer is providing and what components receives
  * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
@@ -34,7 +35,7 @@ const seriesTypeFormatter = {
  * @param colors The color palette used to defaultize series colors
  * @returns An object structuring all the series by type.
  */
-const formatSeries = (series, colors) => {
+const formatSeries = (series, colors, dataset) => {
   // Group series by type
   const seriesGroups = {};
   series.forEach((seriesData, seriesIndex) => {
@@ -60,18 +61,19 @@ const formatSeries = (series, colors) => {
   // Apply formater on a type group
   Object.keys(seriesTypeFormatter).forEach(type => {
     if (seriesGroups[type] !== undefined) {
-      formattedSeries[type] = seriesTypeFormatter[type]?.(seriesGroups[type]) ?? seriesGroups[type];
+      formattedSeries[type] = seriesTypeFormatter[type]?.(seriesGroups[type], dataset) ?? seriesGroups[type];
     }
   });
   return formattedSeries;
 };
 function SeriesContextProvider({
   series,
+  dataset,
   colors = _colorPalettes.blueberryTwilightPalette,
   children
 }) {
   const theme = (0, _styles.useTheme)();
-  const formattedSeries = React.useMemo(() => formatSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors), [series, colors, theme.palette.mode]);
+  const formattedSeries = React.useMemo(() => formatSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors, dataset), [series, colors, theme.palette.mode, dataset]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SeriesContext.Provider, {
     value: formattedSeries,
     children: children

package/esm/BarChart/BarChart.js

@@ -21,6 +21,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     height,
     margin,
     colors,
+    dataset,
     sx,
     tooltip,
     axisHighlight,
@@ -29,7 +30,9 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     leftAxis,
     rightAxis,
     bottomAxis,
-    children
+    children,
+    slots,
+    slotProps
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -45,24 +48,39 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
       id: DEFAULT_X_AXIS_KEY,
       scaleType: 'band',
       data: Array.from({
-        length: Math.max(...series.map(s => s.data.length))
+        length: Math.max(...series.map(s => {
+          var _ref, _s$data;
+          return ((_ref = (_s$data = s.data) != null ? _s$data : dataset) != null ? _ref : []).length;
+        }))
       }, (_, index) => index)
     }],
     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", {
       clipPath: `url(#${clipPathId})`,
-      children: /*#__PURE__*/_jsx(BarPlot, {})
+      children: /*#__PURE__*/_jsx(BarPlot, {
+        slots: slots,
+        slotProps: slotProps
+      })
     }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
-      bottomAxis: bottomAxis
-    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
+      bottomAxis: bottomAxis,
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
       x: "band"
-    }, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
+    }, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -90,8 +108,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'top']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   children: PropTypes.node,
@@ -100,6 +123,7 @@ 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,
@@ -117,8 +141,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['left', 'right']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   legend: PropTypes.shape({
@@ -135,6 +164,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     spacing: PropTypes.number
   }),
   margin: PropTypes.shape({
@@ -157,13 +188,19 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['left', 'right']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), 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'])
@@ -178,6 +215,16 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     xAxisKey: PropTypes.string,
     yAxisKey: PropTypes.string
   })).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
   tooltip: PropTypes.shape({
@@ -200,8 +247,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'top']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   viewBox: PropTypes.shape({
@@ -215,44 +267,52 @@ 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,
-    maxTicks: PropTypes.number,
-    min: PropTypes.number,
-    minTicks: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
   yAxis: PropTypes.arrayOf(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,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
-    max: PropTypes.number,
-    maxTicks: PropTypes.number,
-    min: PropTypes.number,
-    minTicks: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }))
 } : void 0;

package/esm/BarChart/BarElement.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope"];
+const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps"];
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
+import { useSlotProps } from '@mui/base/utils';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import { color as d3Color } from 'd3-color';
@@ -24,7 +25,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getBarElementUtilityClass, classes);
 };
-const BarElementPath = styled('rect', {
+export const BarElementPath = styled('rect', {
   name: 'MuiBarElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -38,12 +39,15 @@ const BarElementPath = styled('rect', {
   opacity: ownerState.isFaded && 0.3 || 1
 }));
 export function BarElement(props) {
+  var _slots$bar;
   const {
       id,
       dataIndex,
       classes: innerClasses,
       color,
-      highlightScope
+      highlightScope,
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const getInteractionItemProps = useInteractionItemProps(highlightScope);
@@ -69,12 +73,18 @@ export function BarElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(BarElementPath, _extends({}, other, {
-    ownerState: ownerState,
-    className: classes.root
-  }, getInteractionItemProps({
-    type: 'bar',
-    seriesId: id,
-    dataIndex
-  })));
+  const Bar = (_slots$bar = slots == null ? void 0 : slots.bar) != null ? _slots$bar : BarElementPath;
+  const barProps = useSlotProps({
+    elementType: Bar,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.bar,
+    additionalProps: _extends({}, other, getInteractionItemProps({
+      type: 'bar',
+      seriesId: id,
+      dataIndex
+    }), {
+      className: classes.root
+    }),
+    ownerState
+  });
+  return /*#__PURE__*/_jsx(Bar, _extends({}, barProps));
 }

package/esm/BarChart/BarPlot.js

@@ -1,4 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
@@ -32,7 +34,7 @@ function getBandSize({
     offset
   };
 }
-export function BarPlot() {
+function BarPlot(props) {
   const seriesData = React.useContext(SeriesContext).bar;
   const axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
@@ -89,7 +91,7 @@ export function BarPlot() {
           var _xAxis$xAxisKey$data;
           const baseline = Math.min(...values);
           const value = Math.max(...values);
-          return /*#__PURE__*/_jsx(BarElement, {
+          return /*#__PURE__*/_jsx(BarElement, _extends({
             id: seriesId,
             dataIndex: dataIndex,
             x: xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + groupIndex * (barWidth + offset),
@@ -98,9 +100,26 @@ export function BarPlot() {
             width: barWidth,
             color: color,
             highlightScope: series[seriesId].highlightScope
-          }, `${seriesId}-${dataIndex}`);
+          }, props), `${seriesId}-${dataIndex}`);
         });
       });
     })
   });
-}
+}
+process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { BarPlot };

package/esm/BarChart/formatter.js

@@ -2,7 +2,7 @@ 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';
-const formatter = params => {
+const formatter = (params, dataset) => {
   const {
     seriesOrder,
     series
@@ -10,17 +10,22 @@ const formatter = params => {
   const stackingGroups = getStackingGroups(params);
 
   // Create a data set with format adapted to d3
-  const d3Dataset = [];
+  const d3Dataset = dataset != null ? dataset : [];
   seriesOrder.forEach(id => {
-    series[id].data.forEach((value, index) => {
-      if (d3Dataset.length <= index) {
-        d3Dataset.push({
-          [id]: value
-        });
-      } else {
-        d3Dataset[index][id] = value;
-      }
-    });
+    const data = series[id].data;
+    if (data !== undefined) {
+      data.forEach((value, index) => {
+        if (d3Dataset.length <= index) {
+          d3Dataset.push({
+            [id]: value
+          });
+        } else {
+          d3Dataset[index][id] = value;
+        }
+      });
+    } else if (dataset === undefined) {
+      throw new Error([`MUI: bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+    }
   });
   const completedSeries = {};
   stackingGroups.forEach(stackingGroup => {
@@ -30,9 +35,15 @@ const formatter = params => {
       stackingOrder
     } = stackingGroup;
     // Get stacked values, and derive the domain
-    const stackedSeries = d3Stack().keys(ids).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    const stackedSeries = d3Stack().keys(ids.map(id => {
+      // Use dataKey if needed and available
+      const dataKey = series[id].dataKey;
+      return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
+    })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach((id, index) => {
+      const dataKey = series[id].dataKey;
       completedSeries[id] = _extends({}, series[id], {
+        data: dataKey ? dataset.map(d => d[dataKey]) : series[id].data,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b])
       });
     });

package/esm/ChartContainer/index.js

@@ -16,6 +16,7 @@ export const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContai
     xAxis,
     yAxis,
     colors,
+    dataset,
     sx,
     title,
     desc,
@@ -32,9 +33,11 @@ export const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContai
     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, {