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

package/esm/hooks/useAxisEvents.js

@@ -3,6 +3,10 @@ import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { SVGContext, DrawingContext } from '../context/DrawingProvider';
 import { isBandScale } from '../internals/isBandScale';
+import { getSVGPoint } from '../internals/utils';
+function getAsANumber(value) {
+  return value instanceof Date ? value.getTime() : value;
+}
 export const useAxisEvents = disableAxisListener => {
   const svgRef = React.useContext(SVGContext);
   const {
@@ -48,17 +52,18 @@ export const useAxisEvents = disableAxisListener => {
             value
           };
         }
-        const closestIndex = axisData == null ? void 0 : axisData.findIndex((v, index) => {
-          if (v > value) {
-            // @ts-ignore
-            if (index === 0 || Math.abs(value - v) <= Math.abs(value - axisData[index - 1])) {
+        const valueAsNumber = getAsANumber(value);
+        const closestIndex = axisData == null ? void 0 : axisData.findIndex((pointValue, index) => {
+          const v = getAsANumber(pointValue);
+          if (v > valueAsNumber) {
+            if (index === 0 || Math.abs(valueAsNumber - v) <= Math.abs(valueAsNumber - getAsANumber(axisData[index - 1]))) {
               return true;
             }
           }
-          if (v <= value) {
+          if (v <= valueAsNumber) {
             if (index === axisData.length - 1 ||
             // @ts-ignore
-            Math.abs(value - v) < Math.abs(value - axisData[index + 1])) {
+            Math.abs(value - v) < Math.abs(value - getAsANumber(axisData[index + 1]))) {
               return true;
             }
           }
@@ -84,37 +89,25 @@ export const useAxisEvents = disableAxisListener => {
         y: -1
       };
       dispatch({
-        type: 'updateAxis',
-        data: {
-          x: null,
-          y: null
-        }
+        type: 'exitChart'
       });
     };
     const handleMouseMove = event => {
-      // Get mouse coordinate in global SVG space
-      const pt = svgRef.current.createSVGPoint();
-      pt.x = event.clientX;
-      pt.y = event.clientY;
-      const svgPt = pt.matrixTransform(svgRef.current.getScreenCTM().inverse());
+      const svgPoint = getSVGPoint(svgRef.current, event);
       mousePosition.current = {
-        x: svgPt.x,
-        y: svgPt.y
+        x: svgPoint.x,
+        y: svgPoint.y
       };
-      const outsideX = svgPt.x < left || svgPt.x > left + width;
-      const outsideY = svgPt.y < top || svgPt.y > top + height;
+      const outsideX = svgPoint.x < left || svgPoint.x > left + width;
+      const outsideY = svgPoint.y < top || svgPoint.y > top + height;
       if (outsideX || outsideY) {
         dispatch({
-          type: 'updateAxis',
-          data: {
-            x: null,
-            y: null
-          }
+          type: 'exitChart'
         });
         return;
       }
-      const newStateX = getUpdate(xAxis[usedXAxis], svgPt.x);
-      const newStateY = getUpdate(yAxis[usedYAxis], svgPt.y);
+      const newStateX = getUpdate(xAxis[usedXAxis], svgPoint.x);
+      const newStateY = getUpdate(yAxis[usedYAxis], svgPoint.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/esm/hooks/useInteractionItemProps.js

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
 import { HighlighContext } from '../context/HighlightProvider';
-export const useInteractionItemProps = scope => {
+export const useInteractionItemProps = (scope, skip) => {
   const {
     dispatch: dispatchInteraction
   } = React.useContext(InteractionContext);
   const {
     dispatch: dispatchHighlight
   } = React.useContext(HighlighContext);
+  if (skip) {
+    return () => ({});
+  }
   const getInteractionItemProps = data => {
     const onMouseEnter = () => {
       dispatchInteraction({

package/esm/index.js

@@ -8,9 +8,11 @@ export * from './ChartsReferenceLine';
 export * from './ChartsAxis';
 export * from './ChartsXAxis';
 export * from './ChartsYAxis';
+export * from './ChartsText';
 export * from './ChartsTooltip';
 export * from './ChartsLegend';
 export * from './ChartsAxisHighlight';
+export * from './ChartsVoronoiHandler';
 export * from './BarChart';
 export * from './LineChart';
 export * from './PieChart';

package/esm/internals/getWordsByLines.js

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

package/esm/internals/utils.js

@@ -2,4 +2,44 @@
 export function getSymbol(shape) {
   const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
   return symbolNames.indexOf(shape) || 0;
+}
+/**
+ * Transform mouse event position to corrdinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+export function getSVGPoint(svg, event) {
+  const pt = svg.createSVGPoint();
+  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('%')) {
+    const percentage = Number.parseFloat(value.slice(0, value.length - 1));
+    if (!Number.isNaN(percentage)) {
+      return percentage * refValue / 100;
+    }
+  }
+  if (value.endsWith('px')) {
+    const val = Number.parseFloat(value.slice(0, value.length - 2));
+    if (!Number.isNaN(val)) {
+      return val;
+    }
+  }
+  throw Error(`MUI-Charts: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
 }

package/hooks/useAxisEvents.js

@@ -9,8 +9,12 @@ var _InteractionProvider = require("../context/InteractionProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
 var _isBandScale = require("../internals/isBandScale");
+var _utils = require("../internals/utils");
 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; }
+function getAsANumber(value) {
+  return value instanceof Date ? value.getTime() : value;
+}
 const useAxisEvents = disableAxisListener => {
   const svgRef = React.useContext(_DrawingProvider.SVGContext);
   const {
@@ -56,17 +60,18 @@ const useAxisEvents = disableAxisListener => {
             value
           };
         }
-        const closestIndex = axisData?.findIndex((v, index) => {
-          if (v > value) {
-            // @ts-ignore
-            if (index === 0 || Math.abs(value - v) <= Math.abs(value - axisData[index - 1])) {
+        const valueAsNumber = getAsANumber(value);
+        const closestIndex = axisData?.findIndex((pointValue, index) => {
+          const v = getAsANumber(pointValue);
+          if (v > valueAsNumber) {
+            if (index === 0 || Math.abs(valueAsNumber - v) <= Math.abs(valueAsNumber - getAsANumber(axisData[index - 1]))) {
               return true;
             }
           }
-          if (v <= value) {
+          if (v <= valueAsNumber) {
             if (index === axisData.length - 1 ||
             // @ts-ignore
-            Math.abs(value - v) < Math.abs(value - axisData[index + 1])) {
+            Math.abs(value - v) < Math.abs(value - getAsANumber(axisData[index + 1]))) {
               return true;
             }
           }
@@ -92,37 +97,25 @@ const useAxisEvents = disableAxisListener => {
         y: -1
       };
       dispatch({
-        type: 'updateAxis',
-        data: {
-          x: null,
-          y: null
-        }
+        type: 'exitChart'
       });
     };
     const handleMouseMove = event => {
-      // Get mouse coordinate in global SVG space
-      const pt = svgRef.current.createSVGPoint();
-      pt.x = event.clientX;
-      pt.y = event.clientY;
-      const svgPt = pt.matrixTransform(svgRef.current.getScreenCTM().inverse());
+      const svgPoint = (0, _utils.getSVGPoint)(svgRef.current, event);
       mousePosition.current = {
-        x: svgPt.x,
-        y: svgPt.y
+        x: svgPoint.x,
+        y: svgPoint.y
       };
-      const outsideX = svgPt.x < left || svgPt.x > left + width;
-      const outsideY = svgPt.y < top || svgPt.y > top + height;
+      const outsideX = svgPoint.x < left || svgPoint.x > left + width;
+      const outsideY = svgPoint.y < top || svgPoint.y > top + height;
       if (outsideX || outsideY) {
         dispatch({
-          type: 'updateAxis',
-          data: {
-            x: null,
-            y: null
-          }
+          type: 'exitChart'
         });
         return;
       }
-      const newStateX = getUpdate(xAxis[usedXAxis], svgPt.x);
-      const newStateY = getUpdate(yAxis[usedYAxis], svgPt.y);
+      const newStateX = getUpdate(xAxis[usedXAxis], svgPoint.x);
+      const newStateY = getUpdate(yAxis[usedYAxis], svgPoint.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/hooks/useInteractionItemProps.d.ts

@@ -1,8 +1,8 @@
 import { HighlightScope } from '../context/HighlightProvider';
 import { SeriesItemIdentifier } from '../models';
-export declare const useInteractionItemProps: (scope?: Partial<HighlightScope>) => (data: SeriesItemIdentifier) => {
+export declare const useInteractionItemProps: (scope?: Partial<HighlightScope>, skip?: boolean) => (() => {}) | ((data: SeriesItemIdentifier) => {
     onMouseEnter: () => void;
     onMouseLeave: () => void;
-};
+});
 export declare const getIsHighlighted: (selectedItem: SeriesItemIdentifier | null, currentItem: SeriesItemIdentifier, highlightScope?: Partial<HighlightScope>) => boolean;
 export declare const getIsFaded: (selectedItem: SeriesItemIdentifier | null, currentItem: SeriesItemIdentifier, highlightScope?: Partial<HighlightScope>) => boolean;

package/hooks/useInteractionItemProps.js

@@ -9,13 +9,16 @@ var _InteractionProvider = require("../context/InteractionProvider");
 var _HighlightProvider = require("../context/HighlightProvider");
 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; }
-const useInteractionItemProps = scope => {
+const useInteractionItemProps = (scope, skip) => {
   const {
     dispatch: dispatchInteraction
   } = React.useContext(_InteractionProvider.InteractionContext);
   const {
     dispatch: dispatchHighlight
   } = React.useContext(_HighlightProvider.HighlighContext);
+  if (skip) {
+    return () => ({});
+  }
   const getInteractionItemProps = data => {
     const onMouseEnter = () => {
       dispatchInteraction({

package/index.d.ts

@@ -8,9 +8,11 @@ export * from './ChartsReferenceLine';
 export * from './ChartsAxis';
 export * from './ChartsXAxis';
 export * from './ChartsYAxis';
+export * from './ChartsText';
 export * from './ChartsTooltip';
 export * from './ChartsLegend';
 export * from './ChartsAxisHighlight';
+export * from './ChartsVoronoiHandler';
 export * from './BarChart';
 export * from './LineChart';
 export * from './PieChart';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-alpha.3
+ * @mui/x-charts v7.0.0-alpha.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -120,6 +120,17 @@ Object.keys(_ChartsYAxis).forEach(function (key) {
     }
   });
 });
+var _ChartsText = require("./ChartsText");
+Object.keys(_ChartsText).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsText[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsText[key];
+    }
+  });
+});
 var _ChartsTooltip = require("./ChartsTooltip");
 Object.keys(_ChartsTooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -153,6 +164,17 @@ Object.keys(_ChartsAxisHighlight).forEach(function (key) {
     }
   });
 });
+var _ChartsVoronoiHandler = require("./ChartsVoronoiHandler");
+Object.keys(_ChartsVoronoiHandler).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsVoronoiHandler[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsVoronoiHandler[key];
+    }
+  });
+});
 var _BarChart = require("./BarChart");
 Object.keys(_BarChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/defaultizeColor.d.ts

@@ -7,8 +7,8 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
         id?: string | number | undefined;
     }[];
     type: "pie";
-    innerRadius?: number | undefined;
-    outerRadius?: number | undefined;
+    innerRadius?: string | number | undefined;
+    outerRadius?: string | number | undefined;
     cornerRadius?: number | undefined;
     startAngle?: number | undefined;
     endAngle?: number | undefined;
@@ -16,8 +16,8 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     sortingValues?: import("../models/seriesType").ChartsPieSorting | undefined;
     arcLabel?: "label" | "value" | "formattedValue" | ((item: import("../models/seriesType").DefaultizedPieValueType) => string) | undefined;
     arcLabelMinAngle?: number | undefined;
-    cx?: number | undefined;
-    cy?: number | undefined;
+    cx?: string | number | undefined;
+    cy?: string | number | undefined;
     highlighted?: {
         additionalRadius?: number | undefined;
         innerRadius?: number | undefined;
@@ -77,6 +77,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     data: import("../models/seriesType").ScatterValueType[];
     markerSize?: number | undefined;
     label?: string | undefined;
+    disableHover?: boolean | undefined;
     id?: string | undefined;
     color: string;
     valueFormatter?: ((value: import("../models/seriesType").ScatterValueType) => string) | undefined;

package/internals/{components/ChartsText.d.ts → getWordsByLines.d.ts}

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 export type ChartsTextBaseline = 'hanging' | 'central' | 'auto';
 export interface ChartsTextStyle extends React.CSSProperties {
     angle?: number;
@@ -8,7 +8,7 @@ export interface ChartsTextStyle extends React.CSSProperties {
      */
     dominantBaseline?: ChartsTextBaseline;
 }
-interface GetWordsByLinesParams {
+export interface GetWordsByLinesParams {
     /**
      * Text displayed.
      */
@@ -23,13 +23,4 @@ interface GetWordsByLinesParams {
      */
     needsComputation?: boolean;
 }
-export interface ChartsTextProps extends Omit<React.SVGTextElementAttributes<SVGTextElement>, 'width' | 'ref' | 'style' | 'dominantBaseline'>, GetWordsByLinesParams {
-    /**
-     * Height of a text line (in `em`).
-     */
-    lineHeight?: number;
-    ownerState?: any;
-}
 export declare function getWordsByLines({ style, needsComputation, text }: GetWordsByLinesParams): any[];
-export declare function ChartsText(props: ChartsTextProps): React.JSX.Element;
-export {};

package/internals/getWordsByLines.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getWordsByLines = getWordsByLines;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _domUtils = require("./domUtils");
+function getWordsByLines({
+  style,
+  needsComputation,
+  text
+}) {
+  return text.split('\n').map(subText => (0, _extends2.default)({
+    text: subText
+  }, needsComputation ? (0, _domUtils.getStringSize)(subText, style) : {
+    width: 0,
+    height: 0
+  }));
+}

package/internals/utils.d.ts

@@ -4,4 +4,17 @@ type Without<T, U> = {
     [P in Exclude<keyof T, keyof U>]?: never;
 };
 export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+/**
+ * Transform mouse event position to corrdinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+export declare function getSVGPoint(svg: SVGSVGElement, event: MouseEvent): DOMPoint;
+/**
+ * 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 declare function getPercentageValue(value: number | string, refValue: number): number;
 export {};

package/internals/utils.js

@@ -3,9 +3,51 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getPercentageValue = getPercentageValue;
+exports.getSVGPoint = getSVGPoint;
 exports.getSymbol = getSymbol;
 // Returns the index of a defined shape
 function getSymbol(shape) {
   const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
   return symbolNames.indexOf(shape) || 0;
+}
+/**
+ * Transform mouse event position to corrdinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+function getSVGPoint(svg, event) {
+  const pt = svg.createSVGPoint();
+  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.
+ */
+function getPercentageValue(value, refValue) {
+  if (typeof value === 'number') {
+    return value;
+  }
+  if (value === '100%') {
+    // Avoid potential rounding issues
+    return refValue;
+  }
+  if (value.endsWith('%')) {
+    const percentage = Number.parseFloat(value.slice(0, value.length - 1));
+    if (!Number.isNaN(percentage)) {
+      return percentage * refValue / 100;
+    }
+  }
+  if (value.endsWith('px')) {
+    const val = Number.parseFloat(value.slice(0, value.length - 2));
+    if (!Number.isNaN(val)) {
+      return val;
+    }
+  }
+  throw Error(`MUI-Charts: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
 }

package/legacy/BarChart/BarPlot.js

@@ -9,7 +9,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)
@@ -19,6 +20,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(_ref) {
   var W = _ref.bandWidth,
     N = _ref.numberOfGroups,
@@ -64,18 +66,18 @@ var useCompletedData = function useCompletedData() {
       var baseScaleConfig;
       if (verticalLayout) {
         if (!isBandScaleConfig(xAxisConfig)) {
-          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
+          throw new Error("MUI-X-Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
         }
         if (xAxis[xAxisKey].data === undefined) {
-          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
+          throw new Error("MUI-X-Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " shoud have data property"));
         }
         baseScaleConfig = xAxisConfig;
       } else {
         if (!isBandScaleConfig(yAxisConfig)) {
-          throw new Error("Axis with id \"".concat(yAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
+          throw new Error("MUI-X-Charts: ".concat(yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : "The y-axis with id \"".concat(yAxisKey, "\""), " shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
         }
         if (yAxis[yAxisKey].data === undefined) {
-          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
+          throw new Error("MUI-X-Charts: ".concat(yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : "The y-axis with id \"".concat(yAxisKey, "\""), " shoud have data property"));
         }
         baseScaleConfig = yAxisConfig;
       }

package/legacy/BarChart/formatter.js

@@ -4,13 +4,15 @@ 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 warnOnce = false;
 var formatter = function formatter(params, dataset) {
+  var _ref;
   var seriesOrder = params.seriesOrder,
     series = params.series;
   var stackingGroups = getStackingGroups(params);
 
   // Create a data set with format adapted to d3
-  var d3Dataset = dataset != null ? dataset : [];
+  var d3Dataset = (_ref = dataset) != null ? _ref : [];
   seriesOrder.forEach(function (id) {
     var data = series[id].data;
     if (data !== undefined) {
@@ -22,7 +24,7 @@ var formatter = function formatter(params, dataset) {
         }
       });
     } 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'));
+      throw new Error(["MUI-X-Charts: 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 = {};
@@ -35,19 +37,31 @@ var formatter = function formatter(params, dataset) {
       // 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);
+    })).value(function (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(function (id, index) {
       var dataKey = series[id].dataKey;
       completedSeries[id] = _extends({
         layout: 'vertical'
       }, series[id], {
-        data: dataKey ? dataset.map(function (d) {
-          return d[dataKey];
+        data: dataKey ? dataset.map(function (data) {
+          var 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 \"".concat(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(function (_ref) {
-          var _ref2 = _slicedToArray(_ref, 2),
-            a = _ref2[0],
-            b = _ref2[1];
+        stackedData: stackedSeries[index].map(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 2),
+            a = _ref3[0],
+            b = _ref3[1];
           return [a, b];
         })
       });

package/legacy/ChartsAxis/ChartsAxis.js

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

package/legacy/ChartsLegend/ChartsLegend.js

@@ -13,7 +13,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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {