npm - @mui/x-charts - Versions diffs - 9.0.0-alpha.3 → 9.0.0-beta.0 - Mend

@mui/x-charts 9.0.0-alpha.3 → 9.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (627) hide show

package/ChartsBrushOverlay/ChartsBrushOverlay.js CHANGED Viewed

@@ -28,6 +28,9 @@ function BrushRect(props) {
  * Component that renders visual feedback during brush interaction
  */
 function ChartsBrushOverlay(props) {
+  const {
+    className
+  } = props;
   const store = (0, _useStore.useStore)();
   const drawingArea = store.use(_useChartDimensions.selectorChartDrawingArea);
   const theme = (0, _styles.useTheme)();
@@ -60,14 +63,14 @@ function ChartsBrushOverlay(props) {
     const rectWidth = currentX - startX;
     const rectHeight = currentY - startY;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-      className: (0, _clsx.default)(_ChartsBrushOverlay.brushOverlayClasses.root, _ChartsBrushOverlay.brushOverlayClasses.x, _ChartsBrushOverlay.brushOverlayClasses.y),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrushRect, (0, _extends2.default)({
+      className: (0, _clsx.default)(_ChartsBrushOverlay.brushOverlayClasses.root, _ChartsBrushOverlay.brushOverlayClasses.x, _ChartsBrushOverlay.brushOverlayClasses.y, className),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrushRect, {
         fill: rectColor,
         x: rectWidth >= 0 ? startX : currentX,
         y: rectHeight >= 0 ? startY : currentY,
         width: Math.abs(rectWidth),
         height: Math.abs(rectHeight)
-      }, props))
+      })
     });
   }
   if (brushConfig === 'y') {
@@ -75,27 +78,27 @@ function ChartsBrushOverlay(props) {
     const maxY = Math.max(startY, currentY);
     const rectHeight = maxY - minY;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-      className: (0, _clsx.default)(_ChartsBrushOverlay.brushOverlayClasses.root, _ChartsBrushOverlay.brushOverlayClasses.y),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrushRect, (0, _extends2.default)({
+      className: (0, _clsx.default)(_ChartsBrushOverlay.brushOverlayClasses.root, _ChartsBrushOverlay.brushOverlayClasses.y, className),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrushRect, {
         fill: rectColor,
         x: left,
         y: minY,
         width: width,
         height: rectHeight
-      }, props))
+      })
     });
   }
   const minX = Math.min(startX, currentX);
   const maxX = Math.max(startX, currentX);
   const rectWidth = maxX - minX;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-    className: (0, _clsx.default)(_ChartsBrushOverlay.brushOverlayClasses.root, _ChartsBrushOverlay.brushOverlayClasses.x),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrushRect, (0, _extends2.default)({
+    className: (0, _clsx.default)(_ChartsBrushOverlay.brushOverlayClasses.root, _ChartsBrushOverlay.brushOverlayClasses.x, className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrushRect, {
       fill: rectColor,
       x: minX,
       y: top,
       width: rectWidth,
       height: height
-    }, props))
+    })
   });
 }

package/ChartsBrushOverlay/ChartsBrushOverlay.mjs CHANGED Viewed

@@ -21,6 +21,9 @@ function BrushRect(props) {
  * Component that renders visual feedback during brush interaction
  */
 export function ChartsBrushOverlay(props) {
+  const {
+    className
+  } = props;
   const store = useStore();
   const drawingArea = store.use(selectorChartDrawingArea);
   const theme = useTheme();
@@ -53,14 +56,14 @@ export function ChartsBrushOverlay(props) {
     const rectWidth = currentX - startX;
     const rectHeight = currentY - startY;
     return /*#__PURE__*/_jsx("g", {
-      className: clsx(brushOverlayClasses.root, brushOverlayClasses.x, brushOverlayClasses.y),
-      children: /*#__PURE__*/_jsx(BrushRect, _extends({
+      className: clsx(brushOverlayClasses.root, brushOverlayClasses.x, brushOverlayClasses.y, className),
+      children: /*#__PURE__*/_jsx(BrushRect, {
         fill: rectColor,
         x: rectWidth >= 0 ? startX : currentX,
         y: rectHeight >= 0 ? startY : currentY,
         width: Math.abs(rectWidth),
         height: Math.abs(rectHeight)
-      }, props))
+      })
     });
   }
   if (brushConfig === 'y') {
@@ -68,27 +71,27 @@ export function ChartsBrushOverlay(props) {
     const maxY = Math.max(startY, currentY);
     const rectHeight = maxY - minY;
     return /*#__PURE__*/_jsx("g", {
-      className: clsx(brushOverlayClasses.root, brushOverlayClasses.y),
-      children: /*#__PURE__*/_jsx(BrushRect, _extends({
+      className: clsx(brushOverlayClasses.root, brushOverlayClasses.y, className),
+      children: /*#__PURE__*/_jsx(BrushRect, {
         fill: rectColor,
         x: left,
         y: minY,
         width: width,
         height: rectHeight
-      }, props))
+      })
     });
   }
   const minX = Math.min(startX, currentX);
   const maxX = Math.max(startX, currentX);
   const rectWidth = maxX - minX;
   return /*#__PURE__*/_jsx("g", {
-    className: clsx(brushOverlayClasses.root, brushOverlayClasses.x),
-    children: /*#__PURE__*/_jsx(BrushRect, _extends({
+    className: clsx(brushOverlayClasses.root, brushOverlayClasses.x, className),
+    children: /*#__PURE__*/_jsx(BrushRect, {
       fill: rectColor,
       x: minX,
       y: top,
       width: rectWidth,
       height: height
-    }, props))
+    })
   });
 }

package/ChartsContainer/ChartsContainer.js CHANGED Viewed

@@ -40,11 +40,11 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 const ChartsContainer = exports.ChartsContainer = /*#__PURE__*/React.forwardRef(function ChartsContainer(props, ref) {
   const {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     children,
     chartsSurfaceProps
   } = (0, _useChartsContainerProps.useChartsContainerProps)(props);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsDataProvider.ChartsDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsDataProvider.ChartsDataProvider, (0, _extends2.default)({}, chartsDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
       ref: ref,
       children: children
@@ -86,6 +86,10 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: _propTypes.default.arrayOf(_propTypes.default.object),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: _propTypes.default.string,
   /**
    * If `true`, the charts will not listen to the mouse move event.
@@ -94,19 +98,17 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
    */
   disableAxisListener: _propTypes.default.bool,
   /**
-   * If `true`, disables keyboard navigation for the chart.
+   * If true, the hit area interaction is disabled and falls back to hover events.
    */
-  disableKeyboardNavigation: _propTypes.default.bool,
+  disableHitArea: _propTypes.default.bool,
   /**
-   * If true, the voronoi interaction are ignored.
+   * If `true`, disables keyboard navigation for the chart.
    */
-  disableVoronoi: _propTypes.default.bool,
+  disableKeyboardNavigation: _propTypes.default.bool,
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures: _propTypes.default.shape({
-    preferStrictDomainInLineCharts: _propTypes.default.bool
-  }),
+  experimentalFeatures: _propTypes.default.any,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -160,6 +162,12 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['bar', 'line', 'pie', 'radar', 'scatter']).isRequired
   })]),
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius: _propTypes.default.oneOfType([_propTypes.default.oneOf(['item']), _propTypes.default.number]),
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
@@ -265,6 +273,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
    */
   radiusAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -280,7 +289,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     ignoreTooltip: _propTypes.default.bool,
@@ -318,6 +327,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     barGapRatio: _propTypes.default.number,
     categoryGapRatio: _propTypes.default.number,
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       type: _propTypes.default.oneOf(['ordinal']).isRequired,
@@ -344,7 +354,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
       tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     ignoreTooltip: _propTypes.default.bool,
@@ -377,6 +387,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       type: _propTypes.default.oneOf(['ordinal']).isRequired,
@@ -403,7 +414,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
       tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     ignoreTooltip: _propTypes.default.bool,
@@ -436,6 +447,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -452,7 +464,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     endAngle: _propTypes.default.number,
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     ignoreTooltip: _propTypes.default.bool,
@@ -482,6 +494,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -499,7 +512,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     endAngle: _propTypes.default.number,
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     ignoreTooltip: _propTypes.default.bool,
@@ -529,6 +542,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -545,7 +559,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     endAngle: _propTypes.default.number,
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     ignoreTooltip: _propTypes.default.bool,
@@ -575,6 +589,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -591,7 +606,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     endAngle: _propTypes.default.number,
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     ignoreTooltip: _propTypes.default.bool,
@@ -621,6 +636,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -637,7 +653,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     endAngle: _propTypes.default.number,
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     ignoreTooltip: _propTypes.default.bool,
@@ -671,6 +687,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -687,7 +704,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     endAngle: _propTypes.default.number,
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     ignoreTooltip: _propTypes.default.bool,
@@ -721,6 +738,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -737,7 +755,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     endAngle: _propTypes.default.number,
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     ignoreTooltip: _propTypes.default.bool,
@@ -787,6 +805,10 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: _propTypes.default.string,
   /**
    * The controlled axis tooltip.
@@ -808,12 +830,6 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['bar', 'line', 'pie', 'radar', 'scatter']).isRequired
   })]),
-  /**
-   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
-   * If set to `'item'`, the radius is the `markerSize`.
-   * If `undefined`, the radius is assumed to be infinite.
-   */
-  voronoiMaxRadius: _propTypes.default.oneOfType([_propTypes.default.oneOf(['item']), _propTypes.default.number]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -828,6 +844,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     barGapRatio: _propTypes.default.number,
     categoryGapRatio: _propTypes.default.number,
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       type: _propTypes.default.oneOf(['ordinal']).isRequired,
@@ -853,7 +870,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
       tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -886,6 +903,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       type: _propTypes.default.oneOf(['ordinal']).isRequired,
@@ -911,7 +929,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
       tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -944,6 +962,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -959,7 +978,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -989,6 +1008,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1005,7 +1025,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -1035,6 +1055,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1050,7 +1071,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -1080,6 +1101,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1095,7 +1117,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -1125,6 +1147,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1140,7 +1163,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -1174,6 +1197,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1189,7 +1213,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -1223,6 +1247,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1238,7 +1263,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -1276,6 +1301,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     barGapRatio: _propTypes.default.number,
     categoryGapRatio: _propTypes.default.number,
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       type: _propTypes.default.oneOf(['ordinal']).isRequired,
@@ -1329,10 +1355,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       type: _propTypes.default.oneOf(['ordinal']).isRequired,
@@ -1386,10 +1413,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1430,10 +1458,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1475,10 +1504,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1519,10 +1549,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1563,10 +1594,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1611,10 +1643,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1659,10 +1692,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1703,7 +1737,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   })]).isRequired),
   /**
    * The configuration of the z-axes.