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

package/ChartsXAxis/ChartsXAxis.js

@@ -17,9 +17,10 @@ var _DrawingProvider = require("../context/DrawingProvider");
 var _useTicks = _interopRequireDefault(require("../hooks/useTicks"));
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
-var _ChartsText = require("../internals/components/ChartsText");
+var _ChartsText = require("../ChartsText");
 var _geometry = require("../internals/geometry");
 var _useMounted = require("../hooks/useMounted");
+var _getWordsByLines = require("../internals/getWordsByLines");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["scale", "tickNumber"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -51,7 +52,7 @@ function addLabelDimension(xTicks, {
         height: 0
       });
     }
-    const tickSizes = (0, _ChartsText.getWordsByLines)({
+    const tickSizes = (0, _getWordsByLines.getWordsByLines)({
       style,
       needsComputation: true,
       text: tick.formattedValue

package/ChartsYAxis/ChartsYAxis.js

@@ -16,7 +16,7 @@ var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
 var _useTicks = _interopRequireDefault(require("../hooks/useTicks"));
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
-var _ChartsText = require("../internals/components/ChartsText");
+var _ChartsText = require("../ChartsText");
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["scale", "tickNumber"];

package/LineChart/AreaPlot.js

@@ -15,6 +15,7 @@ var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _AreaElement = require("./AreaElement");
 var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
+var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -70,10 +71,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 === _constants.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 = (0, _d3Shape.area)().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/LineChart/LineHighlightPlot.js

@@ -14,6 +14,7 @@ var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _LineHighlightElement = require("./LineHighlightElement");
 var _useScale = require("../hooks/useScale");
 var _InteractionProvider = require("../context/InteractionProvider");
+var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -78,7 +79,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 === _constants.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/LineChart/LinePlot.js

@@ -15,6 +15,7 @@ var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _LineElement = require("./LineElement");
 var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
+var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -69,10 +70,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 === _constants.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 = (0, _d3Shape.line)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));

package/LineChart/MarkPlot.js

@@ -13,6 +13,7 @@ var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _MarkElement = require("./MarkElement");
 var _useScale = require("../hooks/useScale");
+var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -84,7 +85,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 === _constants.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/LineChart/formatter.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _d3Shape = require("d3-shape");
 var _stackSeries = require("../internals/stackSeries");
 var _defaultizeValueFormatter = _interopRequireDefault(require("../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 {
@@ -32,7 +34,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 = {};
@@ -52,7 +54,17 @@ const formatter = (params, dataset) => {
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = (0, _extends2.default)({}, 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/PieChart/PieArcLabelPlot.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import { DefaultizedPieSeriesType } from '../models/seriesType/pie';
+import { ComputedPieRadius, DefaultizedPieSeriesType } from '../models/seriesType/pie';
 import { PieArcLabelProps } from './PieArcLabel';
-import { DefaultizedProps } from '../models/helpers';
 export interface PieArcLabelPlotSlots {
     pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
 }
 export interface PieArcLabelPlotSlotProps {
     pieArcLabel?: Partial<PieArcLabelProps>;
 }
-export interface PieArcLabelPlotProps extends DefaultizedProps<Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'innerRadius' | 'outerRadius' | 'cornerRadius' | 'paddingAngle' | 'arcLabel' | 'arcLabelMinAngle' | 'id' | 'highlightScope'>, 'outerRadius'> {
+export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'arcLabel' | 'arcLabelMinAngle' | 'id' | 'highlightScope'>, ComputedPieRadius {
     /**
      * Overridable component slots.
      * @default {}

package/PieChart/PieArcLabelPlot.js

@@ -161,7 +161,6 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
   innerRadius: _propTypes.default.number,
   /**
    * The radius between circle center and the end of the arc.
-   * @default R_max The maximal radius that fit into the drawing area.
    */
   outerRadius: _propTypes.default.number.isRequired,
   /**

package/PieChart/PieArcPlot.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { PieArcProps } from './PieArc';
-import { DefaultizedPieSeriesType, DefaultizedPieValueType, PieItemIdentifier } from '../models/seriesType/pie';
-import { DefaultizedProps } from '../models/helpers';
+import { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType, PieItemIdentifier } from '../models/seriesType/pie';
 export interface PieArcPlotSlots {
     pieArc?: React.JSXElementConstructor<PieArcProps>;
 }
 export interface PieArcPlotSlotProps {
     pieArc?: Partial<PieArcProps>;
 }
-export interface PieArcPlotProps extends DefaultizedProps<Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'innerRadius' | 'outerRadius' | 'cornerRadius' | 'paddingAngle' | 'id' | 'highlightScope'>, 'outerRadius'> {
+export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'id' | 'highlightScope'>, ComputedPieRadius {
     /**
      * Overridable component slots.
      * @default {}

package/PieChart/PieArcPlot.js

@@ -153,7 +153,6 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
   onClick: _propTypes.default.func,
   /**
    * The radius between circle center and the end of the arc.
-   * @default R_max The maximal radius that fit into the drawing area.
    */
   outerRadius: _propTypes.default.number.isRequired,
   /**

package/PieChart/PieChart.js

@@ -248,8 +248,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     arcLabelMinAngle: _propTypes.default.number,
     color: _propTypes.default.string,
     cornerRadius: _propTypes.default.number,
-    cx: _propTypes.default.number,
-    cy: _propTypes.default.number,
+    cx: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    cy: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     data: _propTypes.default.arrayOf(_propTypes.default.shape({
       color: _propTypes.default.string,
       id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -278,8 +278,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
       highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
     }),
     id: _propTypes.default.string,
-    innerRadius: _propTypes.default.number,
-    outerRadius: _propTypes.default.number,
+    innerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    outerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     paddingAngle: _propTypes.default.number,
     sortingValues: _propTypes.default.oneOfType([_propTypes.default.oneOf(['asc', 'desc', 'none']), _propTypes.default.func]),
     startAngle: _propTypes.default.number,

package/PieChart/PiePlot.js

@@ -11,6 +11,7 @@ var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
 var _PieArcPlot = require("./PieArcPlot");
 var _PieArcLabelPlot = require("./PieArcLabelPlot");
+var _utils = require("../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -42,10 +43,6 @@ function PiePlot(props) {
     return null;
   }
   const availableRadius = Math.min(width, height) / 2;
-  const center = {
-    x: left + width / 2,
-    y: top + height / 2
-  };
   const {
     series,
     seriesOrder
@@ -53,22 +50,26 @@ function PiePlot(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
     children: [seriesOrder.map(seriesId => {
       const {
-        innerRadius,
-        outerRadius,
+        innerRadius: innerRadiusParam,
+        outerRadius: outerRadiusParam,
         cornerRadius,
         paddingAngle,
         data,
-        cx,
-        cy,
+        cx: cxParam,
+        cy: cyParam,
         highlighted,
         faded,
         highlightScope
       } = series[seriesId];
+      const outerRadius = (0, _utils.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
+      const innerRadius = (0, _utils.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
+      const cx = (0, _utils.getPercentageValue)(cxParam ?? '50%', width);
+      const cy = (0, _utils.getPercentageValue)(cyParam ?? '50%', height);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-        transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
+        transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcPlot.PieArcPlot, {
           innerRadius: innerRadius,
-          outerRadius: outerRadius ?? availableRadius,
+          outerRadius: outerRadius,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
           id: seriesId,
@@ -84,19 +85,23 @@ function PiePlot(props) {
       }, seriesId);
     }), seriesOrder.map(seriesId => {
       const {
-        innerRadius,
-        outerRadius,
+        innerRadius: innerRadiusParam,
+        outerRadius: outerRadiusParam,
         cornerRadius,
         paddingAngle,
         arcLabel,
         arcLabelMinAngle,
         data,
-        cx,
-        cy,
+        cx: cxParam,
+        cy: cyParam,
         highlightScope
       } = series[seriesId];
+      const outerRadius = (0, _utils.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
+      const innerRadius = (0, _utils.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
+      const cx = (0, _utils.getPercentageValue)(cxParam ?? '50%', width);
+      const cy = (0, _utils.getPercentageValue)(cyParam ?? '50%', height);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-        transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
+        transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcLabelPlot.PieArcLabelPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius ?? availableRadius,

package/PieChart/dataTransform/useTransformData.d.ts

@@ -1,5 +1,4 @@
-import { DefaultizedPieSeriesType, DefaultizedPieValueType } from '../../models/seriesType/pie';
-import { DefaultizedProps } from '../../models/helpers';
+import { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType } from '../../models/seriesType/pie';
 export interface AnimatedObject {
     innerRadius: number;
     outerRadius: number;
@@ -12,4 +11,4 @@ export interface ValueWithHighlight extends DefaultizedPieValueType, AnimatedObj
     isFaded: boolean;
     isHighlighted: boolean;
 }
-export declare function useTransformData(series: DefaultizedProps<Pick<DefaultizedPieSeriesType, 'innerRadius' | 'outerRadius' | 'cornerRadius' | 'paddingAngle' | 'id' | 'highlightScope' | 'highlighted' | 'faded' | 'data'>, 'outerRadius'>): ValueWithHighlight[];
+export declare function useTransformData(series: Pick<DefaultizedPieSeriesType, 'cornerRadius' | 'paddingAngle' | 'id' | 'highlightScope' | 'highlighted' | 'faded' | 'data'> & ComputedPieRadius): ValueWithHighlight[];

package/ResponsiveChartContainer/index.js

@@ -69,11 +69,11 @@ const 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/context/CartesianContextProvider.js

@@ -62,7 +62,7 @@ function CartesianContextProvider({
       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 (0, _extends2.default)({}, axisConfig, {
       data: dataset.map(d => d[dataKey])
@@ -74,7 +74,7 @@ function CartesianContextProvider({
       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 (0, _extends2.default)({}, axisConfig, {
       data: dataset.map(d => d[dataKey])

package/context/SeriesContextProvider.js

@@ -49,7 +49,7 @@ const formatSeries = (series, colors, dataset) => {
       };
     }
     if (seriesGroups[type]?.series[id] !== undefined) {
-      throw new Error(`MUI: series' id "${id}" is not unique`);
+      throw new Error(`MUI-X-Charts: series' id "${id}" is not unique`);
     }
     seriesGroups[type].series[id] = (0, _extends2.default)({
       id

package/esm/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,
@@ -69,18 +71,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/esm/BarChart/formatter.js

@@ -2,7 +2,9 @@ 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) => {
+  var _ref;
   const {
     seriesOrder,
     series
@@ -10,7 +12,7 @@ const formatter = (params, dataset) => {
   const stackingGroups = getStackingGroups(params);
 
   // Create a data set with format adapted to d3
-  const d3Dataset = dataset != null ? dataset : [];
+  const d3Dataset = (_ref = dataset) != null ? _ref : [];
   seriesOrder.forEach(id => {
     const data = series[id].data;
     if (data !== undefined) {
@@ -24,7 +26,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 +41,27 @@ 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) => {
+      var _d$key;
+      return (_d$key = d[key]) != null ? _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/esm/ChartsAxis/ChartsAxis.js

@@ -59,16 +59,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/esm/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/esm/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/esm/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/esm/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";

package/esm/{internals/components → ChartsText}/ChartsText.js

@@ -1,23 +1,15 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["x", "y", "style", "text", "ownerState"],
   _excluded2 = ["angle", "textAnchor", "dominantBaseline"];
 import * as React from 'react';
-import { getStringSize } from '../domUtils';
+import PropTypes from 'prop-types';
+import { getWordsByLines } from '../internals/getWordsByLines';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getWordsByLines({
-  style,
-  needsComputation,
-  text
-}) {
-  return text.split('\n').map(subText => _extends({
-    text: subText
-  }, needsComputation ? getStringSize(subText, style) : {
-    width: 0,
-    height: 0
-  }));
-}
-export function ChartsText(props) {
+/**
+ * Helper component to manage multiline text in SVG
+ */
+function ChartsText(props) {
   const {
       x,
       y,
@@ -74,4 +66,29 @@ export function ChartsText(props) {
       children: line.text
     }, index))
   }));
-}
+}
+process.env.NODE_ENV !== "production" ? ChartsText.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Height of a text line (in `em`).
+   */
+  lineHeight: PropTypes.number,
+  /**
+   * If `true`, the line width is computed.
+   * @default false
+   */
+  needsComputation: PropTypes.bool,
+  ownerState: PropTypes.any,
+  /**
+   * Style applied to text elements.
+   */
+  style: PropTypes.object,
+  /**
+   * Text displayed.
+   */
+  text: PropTypes.string.isRequired
+} : void 0;
+export { ChartsText };

package/esm/ChartsText/index.js

@@ -0,0 +1 @@
+export { ChartsText } from './ChartsText';

package/esm/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/esm/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";