@mui/x-charts 9.0.0-alpha.3 → 9.0.0-alpha.4

package/ChartsBrushOverlay/ChartsBrushOverlay.d.ts

@@ -1,4 +1,9 @@
-export interface ChartsBrushOverlayProps {}
+export interface ChartsBrushOverlayProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
+}
 /**
  * Component that renders visual feedback during brush interaction
  */

package/ChartsBrushOverlay/ChartsBrushOverlay.js

@@ -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

@@ -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

@@ -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.object,
   /**
    * 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]),
@@ -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,
@@ -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,
@@ -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]),
@@ -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]),
@@ -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]),
@@ -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]),
@@ -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]),
@@ -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]),
@@ -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]),
@@ -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,
@@ -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,
@@ -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]),
@@ -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]),
@@ -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]),
@@ -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]),
@@ -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]),
@@ -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]),
@@ -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]),
@@ -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,
@@ -1333,6 +1359,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), _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,
@@ -1390,6 +1417,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), _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]),
@@ -1434,6 +1462,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), _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]),
@@ -1479,6 +1508,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), _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]),
@@ -1523,6 +1553,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), _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]),
@@ -1567,6 +1598,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), _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]),
@@ -1615,6 +1647,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), _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]),
@@ -1663,6 +1696,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), _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]),