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

package/RadarChart/seriesConfig/legend.mjs

@@ -1,22 +1,3 @@
-import { getLabel } from "../../internals/getLabel.mjs";
-const legendGetter = params => {
-  const {
-    seriesOrder,
-    series
-  } = params;
-  return seriesOrder.reduce((acc, seriesId) => {
-    const formattedLabel = getLabel(series[seriesId].label, 'legend');
-    if (formattedLabel === undefined) {
-      return acc;
-    }
-    acc.push({
-      type: 'radar',
-      seriesId,
-      color: series[seriesId].color,
-      label: formattedLabel,
-      markType: series[seriesId].labelMarkType ?? 'square'
-    });
-    return acc;
-  }, []);
-};
+import { getSeriesLegendItems } from "../../internals/legendUtils.mjs";
+const legendGetter = series => getSeriesLegendItems('radar', series, 'square');
 export default legendGetter;

package/ScatterChart/BatchScatter.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _scatterClasses = require("./scatterClasses");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _getValueToPositionMapper = require("../hooks/getValueToPositionMapper");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
 var _appendAtKey = require("../internals/appendAtKey");
@@ -26,7 +26,7 @@ function createPath(x, y, markerSize) {
 function useCreatePaths(seriesData, markerSize, xScale, yScale, color, colorGetter) {
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const getXPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(xScale);
   const getYPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(yScale);
   const paths = new Map();
@@ -119,7 +119,7 @@ function BatchScatter(props) {
   } = props;
   const {
     store
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const isSeriesHighlighted = store.use(_useChartHighlight.selectorChartIsSeriesHighlighted, series.id);
   const isSeriesFaded = store.use(_useChartHighlight.selectorChartIsSeriesFaded, series.id);
   const seriesHighlightedItem = store.use(_useChartHighlight.selectorChartSeriesHighlightedItem, series.id);

package/ScatterChart/BatchScatter.mjs

@@ -4,7 +4,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import { useUtilityClasses } from "./scatterClasses.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { getValueToPositionMapper } from "../hooks/getValueToPositionMapper.mjs";
 import { selectorChartIsSeriesFaded, selectorChartIsSeriesHighlighted, selectorChartSeriesUnfadedItem, selectorChartSeriesHighlightedItem } from "../internals/plugins/featurePlugins/useChartHighlight/index.mjs";
 import { appendAtKey } from "../internals/appendAtKey.mjs";
@@ -19,7 +19,7 @@ function createPath(x, y, markerSize) {
 function useCreatePaths(seriesData, markerSize, xScale, yScale, color, colorGetter) {
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const getXPosition = getValueToPositionMapper(xScale);
   const getYPosition = getValueToPositionMapper(yScale);
   const paths = new Map();
@@ -112,7 +112,7 @@ export function BatchScatter(props) {
   } = props;
   const {
     store
-  } = useChartContext();
+  } = useChartsContext();
   const isSeriesHighlighted = store.use(selectorChartIsSeriesHighlighted, series.id);
   const isSeriesFaded = store.use(selectorChartIsSeriesFaded, series.id);
   const seriesHighlightedItem = store.use(selectorChartSeriesHighlightedItem, series.id);

package/ScatterChart/Scatter.js

@@ -20,7 +20,7 @@ var _useChartClosestPoint = require("../internals/plugins/featurePlugins/useChar
 var _ScatterMarker = require("./ScatterMarker");
 var _scatterClasses = require("./scatterClasses");
 var _useScatterPlotData = require("./useScatterPlotData");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ownerState"];
 /**
@@ -46,10 +46,10 @@ function Scatter(props) {
   } = props;
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const store = (0, _useStore.useStore)();
   const isVoronoiEnabled = store.use(_useChartClosestPoint.selectorChartsIsVoronoiEnabled);
-  const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
+  const skipInteractionHandlers = isVoronoiEnabled;
   const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
   const scatterPlotData = (0, _useScatterPlotData.useScatterPlotData)(series, xScale, yScale, instance.isPointInside);
   const Marker = slots?.marker ?? _ScatterMarker.ScatterMarker;

package/ScatterChart/Scatter.mjs

@@ -14,7 +14,7 @@ import { selectorChartsIsVoronoiEnabled } from "../internals/plugins/featurePlug
 import { ScatterMarker } from "./ScatterMarker.mjs";
 import { useUtilityClasses } from "./scatterClasses.mjs";
 import { useScatterPlotData } from "./useScatterPlotData.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -39,10 +39,10 @@ function Scatter(props) {
   } = props;
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const store = useStore();
   const isVoronoiEnabled = store.use(selectorChartsIsVoronoiEnabled);
-  const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
+  const skipInteractionHandlers = isVoronoiEnabled;
   const getHighlightState = useItemHighlightStateGetter();
   const scatterPlotData = useScatterPlotData(series, xScale, yScale, instance.isPointInside);
   const Marker = slots?.marker ?? ScatterMarker;

package/ScatterChart/ScatterChart.d.mts

@@ -3,7 +3,7 @@ import { type MakeOptional } from '@mui/x-internals/types';
 import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar/index.mjs";
 import { type ChartsSlots, type ChartsSlotProps } from "../internals/material/index.mjs";
 import { type ScatterPlotProps, type ScatterPlotSlotProps, type ScatterPlotSlots } from "./ScatterPlot.mjs";
-import { type ChartContainerProps } from "../ChartContainer/index.mjs";
+import { type ChartsContainerProps } from "../ChartsContainer/index.mjs";
 import { type ChartsAxisProps } from "../ChartsAxis/index.mjs";
 import { type ScatterSeriesType } from "../models/seriesType/scatter.mjs";
 import { type ChartsTooltipProps } from "../ChartsTooltip/index.mjs";
@@ -24,7 +24,7 @@ export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotS
   tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
 }
 export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
-export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
+export interface ScatterChartProps extends Omit<ChartsContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.
@@ -40,9 +40,21 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
    * Option to display a cartesian grid in the background.
    */
   grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea?: boolean;
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint?: boolean;
   /**
    * If true, the interaction will not use the Voronoi cell and fall back to hover events.
    * @default false
+   * @deprecated Use `disableHitArea` instead.
    */
   disableVoronoi?: boolean;
   /**
@@ -66,7 +78,7 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
   slotProps?: ScatterChartSlotProps;
   /**
    * Callback fired when clicking on a scatter item.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using hit area interaction. Or the Mouse event from the scatter element, when `disableHitArea=true`.
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick?: ScatterPlotProps['onItemClick'] | UseChartClosestPointSignature['params']['onItemClick'];

package/ScatterChart/ScatterChart.d.ts

@@ -3,7 +3,7 @@ import { type MakeOptional } from '@mui/x-internals/types';
 import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar/index.js";
 import { type ChartsSlots, type ChartsSlotProps } from "../internals/material/index.js";
 import { type ScatterPlotProps, type ScatterPlotSlotProps, type ScatterPlotSlots } from "./ScatterPlot.js";
-import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type ChartsContainerProps } from "../ChartsContainer/index.js";
 import { type ChartsAxisProps } from "../ChartsAxis/index.js";
 import { type ScatterSeriesType } from "../models/seriesType/scatter.js";
 import { type ChartsTooltipProps } from "../ChartsTooltip/index.js";
@@ -24,7 +24,7 @@ export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotS
   tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
 }
 export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
-export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
+export interface ScatterChartProps extends Omit<ChartsContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.
@@ -40,9 +40,21 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
    * Option to display a cartesian grid in the background.
    */
   grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea?: boolean;
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint?: boolean;
   /**
    * If true, the interaction will not use the Voronoi cell and fall back to hover events.
    * @default false
+   * @deprecated Use `disableHitArea` instead.
    */
   disableVoronoi?: boolean;
   /**
@@ -66,7 +78,7 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
   slotProps?: ScatterChartSlotProps;
   /**
    * Callback fired when clicking on a scatter item.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using hit area interaction. Or the Mouse event from the scatter element, when `disableHitArea=true`.
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick?: ScatterPlotProps['onItemClick'] | UseChartClosestPointSignature['params']['onItemClick'];

package/ScatterChart/ScatterChart.js

@@ -19,8 +19,8 @@ var _ChartsOverlay = require("../ChartsOverlay");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _ChartsGrid = require("../ChartsGrid");
 var _useScatterChartProps = require("./useScatterChartProps");
-var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
-var _ChartDataProvider = require("../ChartDataProvider");
+var _useChartsContainerProps = require("../ChartsContainer/useChartsContainerProps");
+var _ChartsDataProvider = require("../ChartsDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _ChartsWrapper = require("../ChartsWrapper");
 var _FocusedScatterMark = require("./FocusedScatterMark");
@@ -42,7 +42,7 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
   });
   const {
     chartsWrapperProps,
-    chartContainerProps,
+    chartsContainerProps,
     chartsAxisProps,
     gridProps,
     scatterPlotProps,
@@ -52,12 +52,12 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     children
   } = (0, _useScatterChartProps.useScatterChartProps)(props);
   const {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     chartsSurfaceProps
-  } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps);
+  } = (0, _useChartsContainerProps.useChartsContainerProps)(chartsContainerProps);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   const Toolbar = props.slots?.toolbar;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsDataProvider.ChartsDataProvider, (0, _extends2.default)({}, chartsDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       ref: ref,
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
@@ -113,6 +113,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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.
@@ -120,6 +124,17 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableAxisListener: _propTypes.default.bool,
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint: _propTypes.default.bool,
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea: _propTypes.default.bool,
   /**
    * If `true`, disables keyboard navigation for the chart.
    */
@@ -127,8 +142,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   /**
    * If true, the interaction will not use the Voronoi cell and fall back to hover events.
    * @default false
+   * @deprecated Use `disableHitArea` instead.
    */
   disableVoronoi: _propTypes.default.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: _propTypes.default.object,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -185,6 +205,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.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.
@@ -261,7 +287,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   onHighlightChange: _propTypes.default.func,
   /**
    * Callback fired when clicking on a scatter item.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using hit area interaction. Or the Mouse event from the scatter element, when `disableHitArea=true`.
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: _propTypes.default.func,
@@ -315,6 +341,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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.
@@ -336,12 +366,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     dataIndex: _propTypes.default.number.isRequired,
     seriesId: _propTypes.default.string.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.
    */
@@ -356,6 +380,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -381,7 +406,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -414,6 +439,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -439,7 +465,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -472,6 +498,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -487,7 +514,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -517,6 +544,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -533,7 +561,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -563,6 +591,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -578,7 +607,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -608,6 +637,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -623,7 +653,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -653,6 +683,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -668,7 +699,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -702,6 +733,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -717,7 +749,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -751,6 +783,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -766,7 +799,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -804,6 +837,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -857,10 +891,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -914,10 +949,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -958,10 +994,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -1003,10 +1040,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -1047,10 +1085,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -1091,10 +1130,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -1139,10 +1179,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -1187,10 +1228,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -1231,7 +1273,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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.