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

package/ChartsContainer/ChartsContainer.mjs

@@ -33,11 +33,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 const ChartsContainer = /*#__PURE__*/React.forwardRef(function ChartsContainer(props, ref) {
   const {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     children,
     chartsSurfaceProps
   } = useChartsContainerProps(props);
-  return /*#__PURE__*/_jsx(ChartsDataProvider, _extends({}, chartDataProviderProps, {
+  return /*#__PURE__*/_jsx(ChartsDataProvider, _extends({}, chartsDataProviderProps, {
     children: /*#__PURE__*/_jsx(ChartsSurface, _extends({}, chartsSurfaceProps, {
       ref: ref,
       children: children
@@ -79,6 +79,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.arrayOf(PropTypes.object),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: PropTypes.string,
   /**
    * If `true`, the charts will not listen to the mouse move event.
@@ -87,19 +91,17 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
    */
   disableAxisListener: PropTypes.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.bool,
+  disableHitArea: PropTypes.bool,
   /**
-   * If true, the voronoi interaction are ignored.
+   * If `true`, disables keyboard navigation for the chart.
    */
-  disableVoronoi: PropTypes.bool,
+  disableKeyboardNavigation: PropTypes.bool,
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures: PropTypes.shape({
-    preferStrictDomainInLineCharts: PropTypes.bool
-  }),
+  experimentalFeatures: PropTypes.any,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -153,6 +155,12 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     seriesId: PropTypes.string.isRequired,
     type: PropTypes.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.oneOfType([PropTypes.oneOf(['item']), PropTypes.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.
@@ -258,6 +266,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
    */
   radiusAxis: PropTypes.arrayOf(PropTypes.shape({
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -273,7 +282,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     ignoreTooltip: PropTypes.bool,
@@ -311,6 +320,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     barGapRatio: PropTypes.number,
     categoryGapRatio: PropTypes.number,
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -337,7 +347,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
       tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     ignoreTooltip: PropTypes.bool,
@@ -370,6 +380,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -396,7 +407,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
       tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     ignoreTooltip: PropTypes.bool,
@@ -429,6 +440,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -445,7 +457,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     endAngle: PropTypes.number,
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     ignoreTooltip: PropTypes.bool,
@@ -475,6 +487,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -492,7 +505,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     endAngle: PropTypes.number,
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     ignoreTooltip: PropTypes.bool,
@@ -522,6 +535,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -538,7 +552,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     endAngle: PropTypes.number,
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     ignoreTooltip: PropTypes.bool,
@@ -568,6 +582,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -584,7 +599,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     endAngle: PropTypes.number,
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     ignoreTooltip: PropTypes.bool,
@@ -614,6 +629,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -630,7 +646,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     endAngle: PropTypes.number,
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     ignoreTooltip: PropTypes.bool,
@@ -664,6 +680,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -680,7 +697,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     endAngle: PropTypes.number,
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     ignoreTooltip: PropTypes.bool,
@@ -714,6 +731,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -730,7 +748,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     endAngle: PropTypes.number,
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     ignoreTooltip: PropTypes.bool,
@@ -780,6 +798,10 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: PropTypes.string,
   /**
    * The controlled axis tooltip.
@@ -801,12 +823,6 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     seriesId: PropTypes.string.isRequired,
     type: PropTypes.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.oneOfType([PropTypes.oneOf(['item']), PropTypes.number]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -821,6 +837,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     barGapRatio: PropTypes.number,
     categoryGapRatio: PropTypes.number,
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -846,7 +863,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
       tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -879,6 +896,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -904,7 +922,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
       tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -937,6 +955,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -952,7 +971,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -982,6 +1001,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -998,7 +1018,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -1028,6 +1048,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1043,7 +1064,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -1073,6 +1094,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1088,7 +1110,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -1118,6 +1140,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1133,7 +1156,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -1167,6 +1190,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1182,7 +1206,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -1216,6 +1240,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1231,7 +1256,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -1269,6 +1294,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     barGapRatio: PropTypes.number,
     categoryGapRatio: PropTypes.number,
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -1322,10 +1348,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -1379,10 +1406,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1423,10 +1451,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1468,10 +1497,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1512,10 +1542,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1556,10 +1587,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1604,10 +1636,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1652,10 +1685,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1696,7 +1730,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   })]).isRequired),
   /**
    * The configuration of the z-axes.

package/ChartsContainer/useChartsContainerProps.d.mts

@@ -1,11 +1,11 @@
 import { type ChartsSurfaceProps } from "../ChartsSurface/index.mjs";
-import { type ChartDataProviderProps } from "../ChartDataProvider/index.mjs";
+import { type ChartsDataProviderProps } from "../ChartsDataProvider/index.mjs";
 import type { ChartsContainerProps } from "./ChartsContainer.mjs";
 import { type ChartSeriesType } from "../models/seriesType/config.mjs";
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.mjs";
 import { type ChartAnyPluginSignature } from "../internals/plugins/models/plugin.mjs";
 export type UseChartsContainerPropsReturnValue<SeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = {
-  chartDataProviderProps: ChartDataProviderProps<SeriesType, TSignatures>;
+  chartsDataProviderProps: ChartsDataProviderProps<SeriesType, TSignatures>;
   chartsSurfaceProps: ChartsSurfaceProps;
   children: React.ReactNode;
 };

package/ChartsContainer/useChartsContainerProps.d.ts

@@ -1,11 +1,11 @@
 import { type ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { type ChartDataProviderProps } from "../ChartDataProvider/index.js";
+import { type ChartsDataProviderProps } from "../ChartsDataProvider/index.js";
 import type { ChartsContainerProps } from "./ChartsContainer.js";
 import { type ChartSeriesType } from "../models/seriesType/config.js";
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { type ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
 export type UseChartsContainerPropsReturnValue<SeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = {
-  chartDataProviderProps: ChartDataProviderProps<SeriesType, TSignatures>;
+  chartsDataProviderProps: ChartsDataProviderProps<SeriesType, TSignatures>;
   chartsSurfaceProps: ChartsSurfaceProps;
   children: React.ReactNode;
 };

package/ChartsContainer/useChartsContainerProps.js

@@ -9,7 +9,7 @@ exports.useChartsContainerProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _allPlugins = require("../internals/plugins/allPlugins");
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "disableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableHitArea", "hitAreaRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "experimentalFeatures", "plugins", "localeText", "slots", "slotProps", "disableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
 const useChartsContainerProps = props => {
   const _ref = props,
     {
@@ -28,8 +28,8 @@ const useChartsContainerProps = props => {
       onTooltipAxisChange,
       tooltipItem,
       onTooltipItemChange,
-      disableVoronoi,
-      voronoiMaxRadius,
+      disableHitArea,
+      hitAreaRadius,
       onItemClick,
       disableAxisListener,
       highlightedItem,
@@ -44,11 +44,11 @@ const useChartsContainerProps = props => {
       radiusAxis,
       skipAnimation,
       seriesConfig,
+      experimentalFeatures,
       plugins,
       localeText,
       slots,
       slotProps,
-      experimentalFeatures,
       disableKeyboardNavigation,
       brushConfig,
       onHiddenItemsChange,
@@ -61,7 +61,7 @@ const useChartsContainerProps = props => {
     desc,
     sx
   }, other);
-  const chartDataProviderProps = {
+  const chartsDataProviderProps = {
     margin,
     series,
     colors,
@@ -76,8 +76,8 @@ const useChartsContainerProps = props => {
     onTooltipAxisChange,
     tooltipItem,
     onTooltipItemChange,
-    disableVoronoi,
-    voronoiMaxRadius,
+    disableHitArea,
+    hitAreaRadius,
     onItemClick,
     axesGap,
     xAxis,
@@ -101,7 +101,7 @@ const useChartsContainerProps = props => {
     slotProps
   };
   return {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     chartsSurfaceProps,
     children
   };