@mui/x-charts 7.0.0-alpha.4 → 7.0.0-alpha.7

package/legacy/PieChart/PieChart.js

@@ -250,10 +250,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   series: PropTypes.arrayOf(PropTypes.shape({
     arcLabel: PropTypes.oneOfType([PropTypes.oneOf(['formattedValue', 'label', 'value']), PropTypes.func]),
     arcLabelMinAngle: PropTypes.number,
+    arcLabelRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
-    cx: PropTypes.number,
-    cy: PropTypes.number,
+    cx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     data: PropTypes.arrayOf(PropTypes.shape({
       color: PropTypes.string,
       id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -263,6 +264,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     endAngle: PropTypes.number,
     faded: PropTypes.shape({
       additionalRadius: PropTypes.number,
+      arcLabelRadius: PropTypes.number,
       color: PropTypes.string,
       cornerRadius: PropTypes.number,
       innerRadius: PropTypes.number,
@@ -271,6 +273,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     }),
     highlighted: PropTypes.shape({
       additionalRadius: PropTypes.number,
+      arcLabelRadius: PropTypes.number,
       color: PropTypes.string,
       cornerRadius: PropTypes.number,
       innerRadius: PropTypes.number,
@@ -282,8 +285,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])
     }),
     id: PropTypes.string,
-    innerRadius: PropTypes.number,
-    outerRadius: PropTypes.number,
+    innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    outerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     paddingAngle: PropTypes.number,
     sortingValues: PropTypes.oneOfType([PropTypes.oneOf(['asc', 'desc', 'none']), PropTypes.func]),
     startAngle: PropTypes.number,

package/legacy/PieChart/PiePlot.js

@@ -4,6 +4,7 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import { PieArcPlot } from './PieArcPlot';
 import { PieArcLabelPlot } from './PieArcLabelPlot';
+import { getPercentageValue } from '../internals/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -31,30 +32,30 @@ function PiePlot(props) {
     return null;
   }
   var availableRadius = Math.min(width, height) / 2;
-  var center = {
-    x: left + width / 2,
-    y: top + height / 2
-  };
   var series = seriesData.series,
     seriesOrder = seriesData.seriesOrder;
   return /*#__PURE__*/_jsxs("g", {
     children: [seriesOrder.map(function (seriesId) {
       var _series$seriesId = series[seriesId],
-        innerRadius = _series$seriesId.innerRadius,
-        outerRadius = _series$seriesId.outerRadius,
+        innerRadiusParam = _series$seriesId.innerRadius,
+        outerRadiusParam = _series$seriesId.outerRadius,
         cornerRadius = _series$seriesId.cornerRadius,
         paddingAngle = _series$seriesId.paddingAngle,
         data = _series$seriesId.data,
-        cx = _series$seriesId.cx,
-        cy = _series$seriesId.cy,
+        cxParam = _series$seriesId.cx,
+        cyParam = _series$seriesId.cy,
         highlighted = _series$seriesId.highlighted,
         faded = _series$seriesId.faded,
         highlightScope = _series$seriesId.highlightScope;
+      var outerRadius = getPercentageValue(outerRadiusParam != null ? outerRadiusParam : availableRadius, availableRadius);
+      var innerRadius = getPercentageValue(innerRadiusParam != null ? innerRadiusParam : 0, availableRadius);
+      var cx = getPercentageValue(cxParam != null ? cxParam : '50%', width);
+      var cy = getPercentageValue(cyParam != null ? cyParam : '50%', height);
       return /*#__PURE__*/_jsx("g", {
-        transform: "translate(".concat(cx === undefined ? center.x : left + cx, ", ").concat(cy === undefined ? center.y : top + cy, ")"),
+        transform: "translate(".concat(left + cx, ", ").concat(top + cy, ")"),
         children: /*#__PURE__*/_jsx(PieArcPlot, {
           innerRadius: innerRadius,
-          outerRadius: outerRadius != null ? outerRadius : availableRadius,
+          outerRadius: outerRadius,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
           id: seriesId,
@@ -70,21 +71,28 @@ function PiePlot(props) {
       }, seriesId);
     }), seriesOrder.map(function (seriesId) {
       var _series$seriesId2 = series[seriesId],
-        innerRadius = _series$seriesId2.innerRadius,
-        outerRadius = _series$seriesId2.outerRadius,
+        innerRadiusParam = _series$seriesId2.innerRadius,
+        outerRadiusParam = _series$seriesId2.outerRadius,
+        arcLabelRadiusParam = _series$seriesId2.arcLabelRadius,
         cornerRadius = _series$seriesId2.cornerRadius,
         paddingAngle = _series$seriesId2.paddingAngle,
         arcLabel = _series$seriesId2.arcLabel,
         arcLabelMinAngle = _series$seriesId2.arcLabelMinAngle,
         data = _series$seriesId2.data,
-        cx = _series$seriesId2.cx,
-        cy = _series$seriesId2.cy,
+        cxParam = _series$seriesId2.cx,
+        cyParam = _series$seriesId2.cy,
         highlightScope = _series$seriesId2.highlightScope;
+      var outerRadius = getPercentageValue(outerRadiusParam != null ? outerRadiusParam : availableRadius, availableRadius);
+      var innerRadius = getPercentageValue(innerRadiusParam != null ? innerRadiusParam : 0, availableRadius);
+      var arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : getPercentageValue(arcLabelRadiusParam, availableRadius);
+      var cx = getPercentageValue(cxParam != null ? cxParam : '50%', width);
+      var cy = getPercentageValue(cyParam != null ? cyParam : '50%', height);
       return /*#__PURE__*/_jsx("g", {
-        transform: "translate(".concat(cx === undefined ? center.x : left + cx, ", ").concat(cy === undefined ? center.y : top + cy, ")"),
+        transform: "translate(".concat(left + cx, ", ").concat(top + cy, ")"),
         children: /*#__PURE__*/_jsx(PieArcLabelPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius != null ? outerRadius : availableRadius,
+          arcLabelRadius: arcLabelRadius,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
           id: seriesId,

package/legacy/PieChart/dataTransform/transition.js

@@ -78,6 +78,7 @@ export var defaultLabelTransitionConfig = {
   from: function from(_ref5) {
     var innerRadius = _ref5.innerRadius,
       outerRadius = _ref5.outerRadius,
+      arcLabelRadius = _ref5.arcLabelRadius,
       cornerRadius = _ref5.cornerRadius,
       startAngle = _ref5.startAngle,
       endAngle = _ref5.endAngle,
@@ -86,6 +87,7 @@ export var defaultLabelTransitionConfig = {
       innerRadius: innerRadius,
       outerRadius: (innerRadius + outerRadius) / 2,
       cornerRadius: cornerRadius,
+      arcLabelRadius: arcLabelRadius,
       startAngle: (startAngle + endAngle) / 2,
       endAngle: (startAngle + endAngle) / 2,
       paddingAngle: paddingAngle,
@@ -99,6 +101,7 @@ export var defaultLabelTransitionConfig = {
     return {
       innerRadius: innerRadius,
       outerRadius: innerRadius,
+      arcLabelRadius: innerRadius,
       startAngle: (startAngle + endAngle) / 2,
       endAngle: (startAngle + endAngle) / 2,
       opacity: 0
@@ -108,12 +111,14 @@ export var defaultLabelTransitionConfig = {
     var innerRadius = _ref7.innerRadius,
       outerRadius = _ref7.outerRadius,
       startAngle = _ref7.startAngle,
-      endAngle = _ref7.endAngle;
+      endAngle = _ref7.endAngle,
+      arcLabelRadius = _ref7.arcLabelRadius;
     return {
       innerRadius: innerRadius,
       outerRadius: outerRadius,
       startAngle: startAngle,
       endAngle: endAngle,
+      arcLabelRadius: arcLabelRadius,
       opacity: 1
     };
   },
@@ -123,7 +128,8 @@ export var defaultLabelTransitionConfig = {
       cornerRadius = _ref8.cornerRadius,
       startAngle = _ref8.startAngle,
       endAngle = _ref8.endAngle,
-      paddingAngle = _ref8.paddingAngle;
+      paddingAngle = _ref8.paddingAngle,
+      arcLabelRadius = _ref8.arcLabelRadius;
     return {
       innerRadius: innerRadius,
       outerRadius: outerRadius,
@@ -131,6 +137,7 @@ export var defaultLabelTransitionConfig = {
       startAngle: startAngle,
       endAngle: endAngle,
       paddingAngle: paddingAngle,
+      arcLabelRadius: arcLabelRadius,
       opacity: 1
     };
   },

package/legacy/PieChart/dataTransform/useTransformData.js

@@ -12,6 +12,7 @@ export function useTransformData(series) {
     basePaddingAngle = _series$paddingAngle === void 0 ? 0 : _series$paddingAngle,
     _series$innerRadius = series.innerRadius,
     baseInnerRadius = _series$innerRadius === void 0 ? 0 : _series$innerRadius,
+    baseArcLabelRadius = series.arcLabelRadius,
     baseOuterRadius = series.outerRadius,
     _series$cornerRadius = series.cornerRadius,
     baseCornerRadius = _series$cornerRadius === void 0 ? 0 : _series$cornerRadius;
@@ -35,26 +36,28 @@ export function useTransformData(series) {
   }, [highlightScope, highlightedItem, seriesId]);
   var dataWithHighlight = React.useMemo(function () {
     return data.map(function (item, itemIndex) {
-      var _attibuesOverride$pad, _attibuesOverride$inn, _attibuesOverride$out, _attibuesOverride$cor;
+      var _attributesOverride$p, _attributesOverride$i, _attributesOverride$o, _attributesOverride$c, _ref, _attributesOverride$a;
       var _getHighlightStatus = getHighlightStatus(itemIndex),
         isHighlighted = _getHighlightStatus.isHighlighted,
         isFaded = _getHighlightStatus.isFaded;
-      var attibuesOverride = _extends({
+      var attributesOverride = _extends({
         additionalRadius: 0
       }, isFaded && faded || isHighlighted && highlighted || {});
-      var paddingAngle = Math.max(0, Math.PI * ((_attibuesOverride$pad = attibuesOverride.paddingAngle) != null ? _attibuesOverride$pad : basePaddingAngle) / 180);
-      var innerRadius = Math.max(0, (_attibuesOverride$inn = attibuesOverride.innerRadius) != null ? _attibuesOverride$inn : baseInnerRadius);
-      var outerRadius = Math.max(0, (_attibuesOverride$out = attibuesOverride.outerRadius) != null ? _attibuesOverride$out : baseOuterRadius + attibuesOverride.additionalRadius);
-      var cornerRadius = (_attibuesOverride$cor = attibuesOverride.cornerRadius) != null ? _attibuesOverride$cor : baseCornerRadius;
-      return _extends({}, item, attibuesOverride, {
+      var paddingAngle = Math.max(0, Math.PI * ((_attributesOverride$p = attributesOverride.paddingAngle) != null ? _attributesOverride$p : basePaddingAngle) / 180);
+      var innerRadius = Math.max(0, (_attributesOverride$i = attributesOverride.innerRadius) != null ? _attributesOverride$i : baseInnerRadius);
+      var outerRadius = Math.max(0, (_attributesOverride$o = attributesOverride.outerRadius) != null ? _attributesOverride$o : baseOuterRadius + attributesOverride.additionalRadius);
+      var cornerRadius = (_attributesOverride$c = attributesOverride.cornerRadius) != null ? _attributesOverride$c : baseCornerRadius;
+      var arcLabelRadius = (_ref = (_attributesOverride$a = attributesOverride.arcLabelRadius) != null ? _attributesOverride$a : baseArcLabelRadius) != null ? _ref : (innerRadius + outerRadius) / 2;
+      return _extends({}, item, attributesOverride, {
         isFaded: isFaded,
         isHighlighted: isHighlighted,
         paddingAngle: paddingAngle,
         innerRadius: innerRadius,
         outerRadius: outerRadius,
-        cornerRadius: cornerRadius
+        cornerRadius: cornerRadius,
+        arcLabelRadius: arcLabelRadius
       });
     });
-  }, [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, data, faded, getHighlightStatus, highlighted]);
+  }, [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, getHighlightStatus, highlighted]);
   return dataWithHighlight;
 }

package/legacy/ResponsiveChartContainer/index.js

@@ -67,11 +67,11 @@ var useChartDimensions = function useChartDimensions(inWidth, inHeight) {
   }, [computeSize, inHeight, inWidth]);
   if (process.env.NODE_ENV !== 'production') {
     if (displayError.current && inWidth === undefined && width === 0) {
-      console.error("MUI: Charts does not have `width` prop, and its container has no `width` defined.");
+      console.error("MUI-X-Charts: ChartContainer does not have `width` prop, and its container has no `width` defined.");
       displayError.current = false;
     }
     if (displayError.current && inHeight === undefined && height === 0) {
-      console.error("MUI: Charts does not have `height` prop, and its container has no `height` defined.");
+      console.error("MUI-X-Charts: ChartContainer does not have `height` prop, and its container has no `height` defined.");
       displayError.current = false;
     }
   }

package/legacy/context/CartesianContextProvider.js

@@ -54,7 +54,7 @@ function CartesianContextProvider(_ref) {
         return axisConfig;
       }
       if (dataset === undefined) {
-        throw Error('MUI: x-axis uses `dataKey` but no `dataset` is provided.');
+        throw Error('MUI-X-Charts: x-axis uses `dataKey` but no `dataset` is provided.');
       }
       return _extends({}, axisConfig, {
         data: dataset.map(function (d) {
@@ -70,7 +70,7 @@ function CartesianContextProvider(_ref) {
         return axisConfig;
       }
       if (dataset === undefined) {
-        throw Error('MUI: y-axis uses `dataKey` but no `dataset` is provided.');
+        throw Error('MUI-X-Charts: y-axis uses `dataKey` but no `dataset` is provided.');
       }
       return _extends({}, axisConfig, {
         data: dataset.map(function (d) {

package/legacy/context/SeriesContextProvider.js

@@ -39,7 +39,7 @@ var formatSeries = function formatSeries(series, colors, dataset) {
       };
     }
     if (((_seriesGroups$type = seriesGroups[type]) == null ? void 0 : _seriesGroups$type.series[id]) !== undefined) {
-      throw new Error("MUI: series' id \"".concat(id, "\" is not unique"));
+      throw new Error("MUI-X-Charts: series' id \"".concat(id, "\" is not unique"));
     }
     seriesGroups[type].series[id] = _extends({
       id: id

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-alpha.4
+ * @mui/x-charts v7.0.0-alpha.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -15,6 +15,7 @@ export * from './ChartsReferenceLine';
 export * from './ChartsAxis';
 export * from './ChartsXAxis';
 export * from './ChartsYAxis';
+export * from './ChartsText';
 export * from './ChartsTooltip';
 export * from './ChartsLegend';
 export * from './ChartsAxisHighlight';

package/legacy/internals/getWordsByLines.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { getStringSize } from './domUtils';
+export function getWordsByLines(_ref) {
+  var style = _ref.style,
+    needsComputation = _ref.needsComputation,
+    text = _ref.text;
+  return text.split('\n').map(function (subText) {
+    return _extends({
+      text: subText
+    }, needsComputation ? getStringSize(subText, style) : {
+      width: 0,
+      height: 0
+    });
+  });
+}

package/legacy/internals/utils.js

@@ -13,4 +13,33 @@ export function getSVGPoint(svg, event) {
   pt.x = event.clientX;
   pt.y = event.clientY;
   return pt.matrixTransform(svg.getScreenCTM().inverse());
+}
+
+/**
+ * Helper that converts values and percentages into values.
+ * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.
+ * @param refValue The numerical value associated to 100%.
+ * @returns The numerical value associated to the provided value.
+ */
+export function getPercentageValue(value, refValue) {
+  if (typeof value === 'number') {
+    return value;
+  }
+  if (value === '100%') {
+    // Avoid potential rounding issues
+    return refValue;
+  }
+  if (value.endsWith('%')) {
+    var percentage = Number.parseFloat(value.slice(0, value.length - 1));
+    if (!Number.isNaN(percentage)) {
+      return percentage * refValue / 100;
+    }
+  }
+  if (value.endsWith('px')) {
+    var val = Number.parseFloat(value.slice(0, value.length - 2));
+    if (!Number.isNaN(val)) {
+      return val;
+    }
+  }
+  throw Error("MUI-Charts: Received an unknown value \"".concat(value, "\". It should be a number, or a string with a percentage value."));
 }

package/models/axis.d.ts

@@ -2,7 +2,7 @@
 import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint } from 'd3-scale';
 import { ChartsAxisClasses } from '../ChartsAxis/axisClasses';
 import type { TickParams } from '../hooks/useTicks';
-import { ChartsTextProps } from '../internals/components/ChartsText';
+import { ChartsTextProps } from '../ChartsText';
 export type D3Scale<Domain extends {
     toString(): string;
 } = number | Date | string, Range = number, Output = number> = ScaleBand<Domain> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;

package/models/seriesType/config.d.ts

@@ -77,10 +77,11 @@ export type FormatterResult<T extends ChartSeriesType> = {
 } ? {
     stackingGroups: StackingGroupsType;
 } : {});
-export type DatasetType<T extends number | string | Date = number | string | Date> = {
+export type DatasetElementType<T> = {
     [key: string]: T;
-}[];
-export type Formatter<T extends ChartSeriesType> = (params: FormatterParams<T>, dataset?: DatasetType<number>) => FormatterResult<T>;
+};
+export type DatasetType<T = number | string | Date | null | undefined> = DatasetElementType<T>[];
+export type Formatter<T extends ChartSeriesType> = (params: FormatterParams<T>, dataset?: DatasetType) => FormatterResult<T>;
 export type LegendParams = {
     /**
      * The color used in the legend

package/models/seriesType/pie.d.ts

@@ -17,14 +17,25 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
     data: Tdata[];
     /**
      * The radius between circle center and the begining of the arc.
+     * Can be a number (in px) or a string with a percentage such as '50%'.
+     * The '100%' is the maximal radius that fit into the drawing area.
      * @default 0
      */
-    innerRadius?: number;
+    innerRadius?: number | string;
     /**
      * The radius between circle center and the end of the arc.
-     * @default R_max The maximal radius that fit into the drawing area.
+     * Can be a number (in px) or a string with a percentage such as '50%'.
+     * The '100%' is the maximal radius that fit into the drawing area.
+     * @default '100%'
+     */
+    outerRadius?: number | string;
+    /**
+     * The radius between circle center and the arc label.
+     * Can be a number (in px) or a string with a percentage such as '50%'.
+     * The '100%' is the maximal radius that fit into the drawing area.
+     * @default (innerRadius - outerRadius) / 2
      */
-    outerRadius?: number;
+    arcLabelRadius?: number | string;
     /**
      * The radius applied to arc corners (similar to border radius).
      * @default 0
@@ -56,14 +67,18 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
     arcLabelMinAngle?: number;
     /**
      * The x coordinate of the pie center.
-     * @default width/2 the center of the drawing area.
+     * Can be a number (in px) or a string with a percentage such as '50%'.
+     * The '100%' is the width the drawing area.
+     * @default '50%'
      */
-    cx?: number;
+    cx?: number | string;
     /**
      * The y coordinate of the pie center.
-     * @default height/2 the center of the drawing area.
+     * Can be a number (in px) or a string with a percentage such as '50%'.
+     * The '100%' is the height the drawing area.
+     * @default '50%'
      */
-    cy?: number;
+    cy?: number | string;
     /**
      * Override the arc attibutes when it is highlighted.
      */
@@ -77,6 +92,7 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
         outerRadius?: number;
         cornerRadius?: number;
         paddingAngle?: number;
+        arcLabelRadius?: number;
         color?: string;
     };
     /**
@@ -92,6 +108,7 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
         outerRadius?: number;
         cornerRadius?: number;
         paddingAngle?: number;
+        arcLabelRadius?: number;
         color?: string;
     };
 }
@@ -107,3 +124,22 @@ export type PieItemIdentifier = {
 export interface DefaultizedPieSeriesType extends DefaultizedProps<PieSeriesType, CommonDefaultizedProps> {
     data: DefaultizedPieValueType[];
 }
+/**
+ * Props received when the parent components has done the percentage conversion.
+ */
+export interface ComputedPieRadius {
+    /**
+     * The radius between circle center and the begining of the arc.
+     * @default 0
+     */
+    innerRadius?: number;
+    /**
+     * The radius between circle center and the end of the arc.
+     */
+    outerRadius: number;
+    /**
+     * The radius between circle center and the arc label in px.
+     * @default (innerRadius - outerRadius) / 2
+     */
+    arcLabelRadius?: number;
+}

package/modern/BarChart/BarPlot.js

@@ -8,7 +8,8 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
 import { isBandScaleConfig } from '../models/axis';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -18,6 +19,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @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";
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,
@@ -67,18 +69,18 @@ const useCompletedData = () => {
       let baseScaleConfig;
       if (verticalLayout) {
         if (!isBandScaleConfig(xAxisConfig)) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
+          throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}"`);
         }
         if (xAxis[xAxisKey].data === undefined) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+          throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud have data property`);
         }
         baseScaleConfig = xAxisConfig;
       } else {
         if (!isBandScaleConfig(yAxisConfig)) {
-          throw new Error(`Axis with id "${yAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
+          throw new Error(`MUI-X-Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}"`);
         }
         if (yAxis[yAxisKey].data === undefined) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+          throw new Error(`MUI-X-Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud have data property`);
         }
         baseScaleConfig = yAxisConfig;
       }

package/modern/BarChart/formatter.js

@@ -2,6 +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';
+let warnOnce = false;
 const formatter = (params, dataset) => {
   const {
     seriesOrder,
@@ -24,7 +25,7 @@ const formatter = (params, dataset) => {
         }
       });
     } 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'));
+      throw new Error([`MUI-X-Charts: 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 = {};
@@ -39,13 +40,24 @@ const formatter = (params, dataset) => {
       // 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);
+    })).value((d, key) => d[key] ?? 0) // defaultize null value to 0
+    .order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = _extends({
         layout: 'vertical'
       }, 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' && !warnOnce && value !== null) {
+              warnOnce = true;
+              console.error([`MUI-X charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.']);
+            }
+            return 0;
+          }
+          return value;
+        }) : series[id].data,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b])
       });
     });

package/modern/ChartsAxis/ChartsAxis.js

@@ -58,16 +58,16 @@ function ChartsAxis(props) {
   const topId = getAxisId(topAxis);
   const rightId = getAxisId(rightAxis);
   if (topId !== null && !xAxis[topId]) {
-    throw Error(`MUI: id used for top axis "${topId}" is not defined`);
+    throw Error([`MUI-X-Charts: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }
   if (leftId !== null && !yAxis[leftId]) {
-    throw Error(`MUI: id used for left axis "${leftId}" is not defined`);
+    throw Error([`MUI-X-Charts: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
   }
   if (rightId !== null && !yAxis[rightId]) {
-    throw Error(`MUI: id used for right axis "${rightId}" is not defined`);
+    throw Error([`MUI-X-Charts: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
   }
   if (bottomId !== null && !xAxis[bottomId]) {
-    throw Error(`MUI: id used for bottom axis "${bottomId}" is not defined`);
+    throw Error([`MUI-X-Charts: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }
   const topAxisProps = mergeProps(topAxis, slots, slotProps);
   const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);

package/modern/ChartsLegend/ChartsLegend.js

@@ -12,7 +12,8 @@ import { DrawingContext } from '../context/DrawingProvider';
 import { getSeriesToDisplay } from './utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { getLegendUtilityClass } from './chartsLegendClasses';
-import { ChartsText, getWordsByLines } from '../internals/components/ChartsText';
+import { ChartsText } from '../ChartsText';
+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/ChartsReferenceLine/ChartsReferenceLine.js

@@ -6,10 +6,10 @@ import { ChartsYReferenceLine } from './ChartsYReferenceLine';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsReferenceLine(props) {
   if (props.x !== undefined && props.y !== undefined) {
-    throw new Error('MUI-X: The ChartsReferenceLine can not have both `x` and `y` props set.');
+    throw new Error('MUI-X-Charts: The ChartsReferenceLine can not have both `x` and `y` props set.');
   }
   if (props.x === undefined && props.y === undefined) {
-    throw new Error('MUI-X: The ChartsReferenceLine should have a value in `x` or `y` prop.');
+    throw new Error('MUI-X-Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
   }
   if (props.x !== undefined) {
     return /*#__PURE__*/_jsx(ChartsXReferenceLine, _extends({}, props));

package/modern/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import { useDrawingArea, useXScale } from '../hooks';
 import { ReferenceLineRoot } from './common';
-import { ChartsText } from '../internals/components/ChartsText';
+import { ChartsText } from '../ChartsText';
 import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/modern/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import { useDrawingArea, useYScale } from '../hooks';
 import { ReferenceLineRoot } from './common';
-import { ChartsText } from '../internals/components/ChartsText';
+import { ChartsText } from '../ChartsText';
 import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";