@mui/x-charts 6.0.0-alpha.0 → 6.0.0-alpha.2

package/esm/PieChart/PiePlot.js

@@ -0,0 +1,92 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { SeriesContext } from '../context/SeriesContextProvider';
+import PieArc from './PieArc';
+import PieArcLabel from './PieArcLabel';
+import { DrawingContext } from '../context/DrawingProvider';
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+const RATIO = 180 / Math.PI;
+function getItemLabel(arcLabel, arcLabelMinAngle, item) {
+  if (!arcLabel) {
+    return null;
+  }
+  const angle = (item.endAngle - item.startAngle) * RATIO;
+  if (angle < arcLabelMinAngle) {
+    return null;
+  }
+  if (typeof arcLabel === 'string') {
+    var _item$arcLabel;
+    return (_item$arcLabel = item[arcLabel]) == null ? void 0 : _item$arcLabel.toString();
+  }
+  return arcLabel(item);
+}
+export function PiePlot() {
+  const seriesData = React.useContext(SeriesContext).pie;
+  const {
+    left,
+    top,
+    width,
+    height
+  } = React.useContext(DrawingContext);
+  if (seriesData === undefined) {
+    return null;
+  }
+  const availableRadius = Math.min(width, height) / 2;
+  const center = {
+    x: left + width / 2,
+    y: top + height / 2
+  };
+  const {
+    series,
+    seriesOrder
+  } = seriesData;
+  return /*#__PURE__*/_jsx("g", {
+    children: seriesOrder.map(seriesId => {
+      const {
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+        arcLabel,
+        arcLabelMinAngle = 0,
+        data,
+        cx,
+        cy,
+        highlighted,
+        faded
+      } = series[seriesId];
+      return /*#__PURE__*/_jsx("g", {
+        transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
+        children: /*#__PURE__*/_jsxs("g", {
+          children: [data.map((item, index) => {
+            return /*#__PURE__*/_createElement(PieArc, _extends({}, item, {
+              key: item.id,
+              innerRadius: innerRadius,
+              outerRadius: outerRadius != null ? outerRadius : availableRadius,
+              cornerRadius: cornerRadius,
+              id: seriesId,
+              color: item.color,
+              dataIndex: index,
+              highlightScope: series[seriesId].highlightScope,
+              highlighted: highlighted,
+              faded: faded
+            }));
+          }), data.map((item, index) => {
+            return /*#__PURE__*/_createElement(PieArcLabel, _extends({}, item, {
+              key: item.id,
+              innerRadius: innerRadius,
+              outerRadius: outerRadius != null ? outerRadius : availableRadius,
+              cornerRadius: cornerRadius,
+              id: seriesId,
+              color: item.color,
+              dataIndex: index,
+              highlightScope: series[seriesId].highlightScope,
+              formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
+            }));
+          })]
+        })
+      }, seriesId);
+    })
+  });
+}

package/esm/PieChart/formatter.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { pie as d3Pie } from 'd3-shape';
+const getSortingComparator = (comparator = 'none') => {
+  if (typeof comparator === 'function') {
+    return comparator;
+  }
+  switch (comparator) {
+    case 'none':
+      return null;
+    case 'desc':
+      return (a, b) => b - a;
+    case 'asc':
+      return (a, b) => a - b;
+    default:
+      return null;
+  }
+};
+const formatter = params => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  const defaultizedSeries = {};
+  seriesOrder.forEach(seriesId => {
+    var _series$seriesId$star, _series$seriesId$endA, _series$seriesId$padd, _series$seriesId$sort;
+    const arcs = d3Pie().startAngle(2 * Math.PI * ((_series$seriesId$star = series[seriesId].startAngle) != null ? _series$seriesId$star : 0) / 360).endAngle(2 * Math.PI * ((_series$seriesId$endA = series[seriesId].endAngle) != null ? _series$seriesId$endA : 360) / 360).padAngle(2 * Math.PI * ((_series$seriesId$padd = series[seriesId].paddingAngle) != null ? _series$seriesId$padd : 0) / 360).sortValues(getSortingComparator((_series$seriesId$sort = series[seriesId].sortingValues) != null ? _series$seriesId$sort : 'none'))(series[seriesId].data.map(piePoint => piePoint.value));
+    defaultizedSeries[seriesId] = _extends({
+      valueFormatter: item => item.value.toLocaleString()
+    }, series[seriesId], {
+      data: series[seriesId].data.map((item, index) => {
+        var _item$id;
+        return _extends({}, item, {
+          id: (_item$id = item.id) != null ? _item$id : `auto-generated-pie-id-${seriesId}-${index}`
+        }, arcs[index]);
+      }).map(item => {
+        var _series$seriesId$valu, _series$seriesId$valu2, _series$seriesId;
+        return _extends({}, item, {
+          formattedValue: (_series$seriesId$valu = (_series$seriesId$valu2 = (_series$seriesId = series[seriesId]).valueFormatter) == null ? void 0 : _series$seriesId$valu2.call(_series$seriesId, item)) != null ? _series$seriesId$valu : item.value.toLocaleString()
+        });
+      })
+    });
+  });
+  return {
+    seriesOrder,
+    series: defaultizedSeries
+  };
+};
+export default formatter;

package/esm/PieChart/index.js

@@ -0,0 +1,4 @@
+export { PiePlot } from './PiePlot';
+export { PieChart } from './PieChart';
+export * from './PieArc';
+export * from './PieArcLabel';

package/esm/PieChart/legend.js

@@ -0,0 +1,12 @@
+const legendGetter = params => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  return seriesOrder.flatMap(seriesId => series[seriesId].data.map(item => ({
+    color: item.color,
+    label: item.label,
+    id: item.id
+  })).filter(item => item.label !== undefined));
+};
+export default legendGetter;

package/esm/ResponsiveChartContainer/index.js

@@ -1,44 +1,112 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["width", "height"];
 import * as React from 'react';
-import { ResizeObserver } from '@juggle/resize-observer';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import ownerWindow from '@mui/utils/ownerWindow';
+import { styled } from '@mui/material/styles';
 import { ChartContainer } from '../ChartContainer';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useChartDimensions = (inWidth, inHeight) => {
-  const ref = React.useRef(null);
+  const rootRef = React.useRef(null);
+  const displayError = React.useRef(false);
   const [width, setWidth] = React.useState(0);
   const [height, setHeight] = React.useState(0);
+
+  // Adaptation of the `computeSizeAndPublishResizeEvent` from the grid.
+  const computeSize = React.useCallback(() => {
+    const mainEl = rootRef == null ? void 0 : rootRef.current;
+    if (!mainEl) {
+      return;
+    }
+    const win = ownerWindow(mainEl);
+    const computedStyle = win.getComputedStyle(mainEl);
+    const newHeight = parseFloat(computedStyle.height) || 0;
+    const newWidth = parseFloat(computedStyle.width) || 0;
+    setWidth(newWidth);
+    setHeight(newHeight);
+  }, []);
   React.useEffect(() => {
-    const element = ref.current;
-    if (element === null || inHeight !== undefined && inWidth !== undefined) {
+    // Ensure the error detection occurs after the first rendering.
+    displayError.current = true;
+  }, []);
+  useEnhancedEffect(() => {
+    if (inWidth !== undefined && inHeight !== undefined) {
       return () => {};
     }
-    const resizeObserver = new ResizeObserver(entries => {
-      if (Array.isArray(entries) && entries.length) {
-        const entry = entries[0];
-        if (inWidth === undefined) {
-          setWidth(entry.contentRect.width);
-        }
-        if (inHeight === undefined) {
-          setHeight(entry.contentRect.height);
-        }
-      }
+    computeSize();
+    const elementToObserve = rootRef.current;
+    if (typeof ResizeObserver === 'undefined') {
+      return () => {};
+    }
+    let animationFrame;
+    const observer = new ResizeObserver(() => {
+      // See https://github.com/mui/mui-x/issues/8733
+      animationFrame = window.requestAnimationFrame(() => {
+        computeSize();
+      });
     });
-    resizeObserver.observe(element);
-    return () => resizeObserver.disconnect();
-  }, [height, inHeight, inWidth, width]);
-  return [ref, inWidth != null ? inWidth : width, inHeight != null ? inHeight : height];
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
+    return () => {
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+      if (elementToObserve) {
+        observer.unobserve(elementToObserve);
+      }
+    };
+  }, [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.`);
+      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.`);
+      displayError.current = false;
+    }
+  }
+  return [rootRef, inWidth != null ? inWidth : width, inHeight != null ? inHeight : height];
 };
+const ResizableContainer = styled('div', {
+  name: 'MuiResponsiveChart',
+  slot: 'Container'
+})(({
+  ownerState
+}) => {
+  var _ownerState$width, _ownerState$height;
+  return {
+    width: (_ownerState$width = ownerState.width) != null ? _ownerState$width : '100%',
+    height: (_ownerState$height = ownerState.height) != null ? _ownerState$height : '100%',
+    display: 'flex',
+    position: 'relative',
+    flexGrow: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    '&>svg': {
+      width: '100%',
+      height: '100%'
+    }
+  };
+});
 export function ResponsiveChartContainer(props) {
-  var _props$width, _props$height;
-  const [containerRef, width, height] = useChartDimensions(props.width, props.height);
-  return /*#__PURE__*/_jsx("div", {
+  const {
+      width: propsWidth,
+      height: propsHeight
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const [containerRef, width, height] = useChartDimensions(propsWidth, propsHeight);
+  return /*#__PURE__*/_jsx(ResizableContainer, {
     ref: containerRef,
-    style: {
-      width: (_props$width = props.width) != null ? _props$width : '100%',
-      height: (_props$height = props.height) != null ? _props$height : '100%',
-      padding: 0
+    ownerState: {
+      width: props.width,
+      height: props.height
     },
-    children: /*#__PURE__*/_jsx(ChartContainer, _extends({}, props, {
+    children: /*#__PURE__*/_jsx(ChartContainer, _extends({}, other, {
       width: width,
       height: height
     }))

package/esm/ScatterChart/Scatter.js

@@ -82,7 +82,7 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
   color: PropTypes.string.isRequired,
   markerSize: PropTypes.number.isRequired,
   series: PropTypes.shape({
-    color: PropTypes.string.isRequired,
+    color: PropTypes.string,
     data: PropTypes.arrayOf(PropTypes.shape({
       id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
       x: PropTypes.number.isRequired,

package/esm/ScatterChart/ScatterChart.js

@@ -62,7 +62,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     y: PropTypes.oneOf(['line', 'none'])
   }),
   /**
-   * Indicate which axis to display the the bottom of the charts.
+   * Indicate which axis to display the bottom of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
    * @default xAxisIds[0] The id of the first provided axis
    */
@@ -89,7 +89,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   disableAxisListener: PropTypes.bool,
   height: PropTypes.number,
   /**
-   * Indicate which axis to display the the left of the charts.
+   * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
    * @default yAxisIds[0] The id of the first provided axis
    */
@@ -109,6 +109,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
+    hidden: PropTypes.bool,
     itemWidth: PropTypes.number,
     markSize: PropTypes.number,
     offset: PropTypes.shape({
@@ -128,7 +129,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     top: PropTypes.number
   }),
   /**
-   * Indicate which axis to display the the right of the charts.
+   * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
    * @default null
    */
@@ -173,7 +174,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**
-   * Indicate which axis to display the the top of the charts.
+   * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
    * @default null
    */

package/esm/ScatterChart/legend.js

@@ -0,0 +1,13 @@
+const legendGetter = params => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  const data = seriesOrder.map(seriesId => ({
+    color: series[seriesId].color,
+    label: series[seriesId].label,
+    id: seriesId
+  }));
+  return data.filter(item => item.label !== undefined);
+};
+export default legendGetter;

package/esm/context/SeriesContextProvider.js

@@ -4,6 +4,7 @@ import { useTheme } from '@mui/material/styles';
 import barSeriesFormatter from '../BarChart/formatter';
 import scatterSeriesFormatter from '../ScatterChart/formatter';
 import lineSeriesFormatter from '../LineChart/formatter';
+import pieSeriesFormatter from '../PieChart/formatter';
 import { defaultizeColor } from '../internals/defaultizeColor';
 import { blueberryTwilightPalette } from '../colorPalettes';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,8 +12,17 @@ export const SeriesContext = /*#__PURE__*/React.createContext({});
 const seriesTypeFormatter = {
   bar: barSeriesFormatter,
   scatter: scatterSeriesFormatter,
-  line: lineSeriesFormatter
+  line: lineSeriesFormatter,
+  pie: pieSeriesFormatter
 };
+/**
+ * This methods is the interface between what the developper is providing and what compoenents receives
+ * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if soe line data are modified
+ * It also add defaultized values such as the ids, colors
+ * @param series The array of series provided by devs
+ * @param colors The color palette used to defaultize series colors
+ * @returns An object structuring all the series by type.
+ */
 const formatSeries = (series, colors) => {
   // Group series by type
   const seriesGroups = {};

package/esm/index.js

@@ -10,6 +10,7 @@ export * from './ChartsTooltip';
 export * from './ChartsAxisHighlight';
 export * from './BarChart';
 export * from './LineChart';
+export * from './PieChart';
 export * from './ScatterChart';
 export * from './ChartContainer';
 export * from './ResponsiveChartContainer';

package/esm/internals/defaultizeColor.js

@@ -1,6 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 const DEFAULT_COLORS = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
 export function defaultizeColor(series, seriesIndex, colors = DEFAULT_COLORS) {
+  if (series.type === 'pie') {
+    return _extends({}, series, {
+      data: series.data.map((d, index) => _extends({
+        color: colors[index % colors.length]
+      }, d))
+    });
+  }
   return _extends({
     color: colors[seriesIndex % colors.length]
   }, series);

package/esm/models/seriesType/index.js

@@ -1,12 +1,5 @@
-// import { PieSeriesType } from './pie';
-
-// | PieSeriesType;
-
-// | PieSeriesType;
-
-// | PieSeriesType
-
 export * from './line';
 export * from './bar';
 export * from './scatter';
+export * from './pie';
 export {};

package/index.d.ts

@@ -10,6 +10,7 @@ export * from './ChartsTooltip';
 export * from './ChartsAxisHighlight';
 export * from './BarChart';
 export * from './LineChart';
+export * from './PieChart';
 export * from './ScatterChart';
 export * from './ChartContainer';
 export * from './ResponsiveChartContainer';

package/index.js

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

package/internals/defaultizeColor.d.ts

@@ -1,5 +1,40 @@
 import { AllSeriesType } from '../models/seriesType';
 export declare function defaultizeColor(series: AllSeriesType, seriesIndex: number, colors?: string[]): {
+    data: {
+        color: string;
+        label?: string | undefined;
+        value: number;
+        id?: string | number | undefined;
+    }[];
+    type: "pie";
+    innerRadius?: number | undefined;
+    outerRadius?: number | undefined;
+    cornerRadius?: number | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    paddingAngle?: number | undefined;
+    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;
+    highlighted?: {
+        additionalRadius?: number | undefined;
+        innerRadius?: number | undefined;
+        outerRadius?: number | undefined;
+        cornerRadius?: number | undefined;
+    } | undefined;
+    faded?: {
+        additionalRadius?: number | undefined;
+        innerRadius?: number | undefined;
+        outerRadius?: number | undefined;
+        cornerRadius?: number | undefined;
+    } | undefined;
+    id?: string | undefined;
+    color?: string | undefined;
+    valueFormatter?: ((value: import("../models/helpers").MakeOptional<import("../models/seriesType").PieValueType, "id">) => string) | undefined;
+    highlightScope?: Partial<import("..").HighlightScope> | undefined;
+} | {
     type: "bar";
     data: number[];
     label?: string | undefined;

package/internals/defaultizeColor.js

@@ -8,6 +8,13 @@ exports.defaultizeColor = defaultizeColor;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const DEFAULT_COLORS = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
 function defaultizeColor(series, seriesIndex, colors = DEFAULT_COLORS) {
+  if (series.type === 'pie') {
+    return (0, _extends2.default)({}, series, {
+      data: series.data.map((d, index) => (0, _extends2.default)({
+        color: colors[index % colors.length]
+      }, d))
+    });
+  }
   return (0, _extends2.default)({
     color: colors[seriesIndex % colors.length]
   }, series);

package/legacy/BarChart/BarChart.js

@@ -44,9 +44,11 @@ function BarChart(props) {
     xAxis: xAxis != null ? xAxis : [{
       id: DEFAULT_X_AXIS_KEY,
       scaleType: 'band',
-      data: _toConsumableArray(new Array(Math.max.apply(Math, _toConsumableArray(series.map(function (s) {
-        return s.data.length;
-      }))))).map(function (_, index) {
+      data: Array.from({
+        length: Math.max.apply(Math, _toConsumableArray(series.map(function (s) {
+          return s.data.length;
+        })))
+      }, function (_, index) {
         return index;
       })
     }],
@@ -79,7 +81,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     y: PropTypes.oneOf(['line', 'none'])
   }),
   /**
-   * Indicate which axis to display the the bottom of the charts.
+   * Indicate which axis to display the bottom of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
    * @default xAxisIds[0] The id of the first provided axis
    */
@@ -106,7 +108,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   disableAxisListener: PropTypes.bool,
   height: PropTypes.number,
   /**
-   * Indicate which axis to display the the left of the charts.
+   * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
    * @default yAxisIds[0] The id of the first provided axis
    */
@@ -126,6 +128,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
+    hidden: PropTypes.bool,
     itemWidth: PropTypes.number,
     markSize: PropTypes.number,
     offset: PropTypes.shape({
@@ -145,7 +148,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     top: PropTypes.number
   }),
   /**
-   * Indicate which axis to display the the right of the charts.
+   * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
    * @default null
    */
@@ -188,7 +191,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**
-   * Indicate which axis to display the the top of the charts.
+   * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
    * @default null
    */

package/legacy/BarChart/legend.js

@@ -0,0 +1,15 @@
+var legendGetter = function legendGetter(params) {
+  var seriesOrder = params.seriesOrder,
+    series = params.series;
+  var data = seriesOrder.map(function (seriesId) {
+    return {
+      color: series[seriesId].color,
+      label: series[seriesId].label,
+      id: seriesId
+    };
+  });
+  return data.filter(function (item) {
+    return item.label !== undefined;
+  });
+};
+export default legendGetter;

package/legacy/ChartsAxis/ChartsAxis.js

@@ -68,7 +68,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Indicate which axis to display the the bottom of the charts.
+   * Indicate which axis to display the bottom of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
    * @default xAxisIds[0] The id of the first provided axis
    */
@@ -86,7 +86,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
-   * Indicate which axis to display the the left of the charts.
+   * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
    * @default yAxisIds[0] The id of the first provided axis
    */
@@ -104,7 +104,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
-   * Indicate which axis to display the the right of the charts.
+   * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
    * @default null
    */
@@ -122,7 +122,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
-   * Indicate which axis to display the the top of the charts.
+   * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
    * @default null
    */

package/legacy/ChartsLegend/ChartsLegend.js

@@ -143,13 +143,17 @@ export function ChartsLegend(inProps) {
   });
   var position = props.position,
     direction = props.direction,
-    offset = props.offset;
+    offset = props.offset,
+    hidden = props.hidden;
   var theme = useTheme();
   var classes = useUtilityClasses(_extends({}, props, {
     theme: theme
   }));
   var drawingArea = React.useContext(DrawingContext);
   var series = React.useContext(SeriesContext);
+  if (hidden) {
+    return null;
+  }
   var seriesToDisplay = getSeriesToDisplay(series);
   return /*#__PURE__*/_jsx(ChartsLegendRoot, {
     ownerState: {