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

package/ScatterChart/ScatterChart.d.ts

@@ -4,7 +4,7 @@ import { ScatterPlotProps, ScatterPlotSlotProps, ScatterPlotSlots } from './Scat
 import { ChartContainerProps } from '../ChartContainer';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { ScatterSeriesType } from '../models/seriesType/scatter';
-import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
+import { ChartsTooltipSlots, ChartsTooltipSlotProps } from '../ChartsTooltip/ChartTooltip.types';
 import { ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
@@ -12,9 +12,9 @@ import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
 import { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 import { ChartsGridProps } from '../ChartsGrid';
 import { ZAxisContextProviderProps } from '../context/ZAxisContextProvider';
-export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsTooltipSlots<'scatter'>, ChartsOverlaySlots {
+export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {
 }
-export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps<'scatter'>, ChartsOverlaySlotProps {
+export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {
 }
 export interface ScatterChartProps extends Omit<ChartContainerProps, 'series' | 'plugins'>, Omit<ZAxisContextProviderProps, 'children' | 'dataset'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Omit<ChartsVoronoiHandlerProps, 'onItemClick'> {
     /**
@@ -22,15 +22,9 @@ export interface ScatterChartProps extends Omit<ChartContainerProps, 'series' |
      * An array of [[ScatterSeriesType]] objects.
      */
     series: MakeOptional<ScatterSeriesType, 'type'>[];
-    /**
-     * The configuration of the tooltip.
-     * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-     * @default { trigger: 'item' }
-     */
-    tooltip?: ChartsTooltipProps<'scatter'>;
     /**
      * The configuration of axes highlight.
-     * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+     * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
      * @default { x: 'none', y: 'none' }
      */
     axisHighlight?: ChartsAxisHighlightProps;

package/ScatterChart/ScatterChart.js

@@ -41,9 +41,9 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
     overlayProps,
     legendProps,
     axisHighlightProps,
-    tooltipProps,
     children
   } = useScatterChartProps(props);
+  const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(ChartContainer, _extends({
     ref: ref
   }, chartContainerProps, {
@@ -51,7 +51,9 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
       children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
         "data-drawing-container": true,
         children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
-      }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), children]
+      }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({
+        trigger: "item"
+      }, props.slotProps?.tooltip)), children]
     }))
   }));
 });
@@ -62,7 +64,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
    * @default { x: 'none', y: 'none' }
    */
   axisHighlight: PropTypes.shape({
@@ -155,16 +157,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: PropTypes.func,
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -193,31 +185,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
-  /**
-   * The configuration of the tooltip.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-   * @default { trigger: 'item' }
-   */
-  tooltip: PropTypes.shape({
-    axisContent: PropTypes.elementType,
-    classes: PropTypes.object,
-    itemContent: PropTypes.elementType,
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
-  }),
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
    * If `undefined`, the radius is assumed to be infinite.
@@ -258,7 +231,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -269,7 +241,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
@@ -312,7 +283,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -323,7 +293,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),

package/ScatterChart/useScatterChartProps.d.ts

@@ -3,7 +3,6 @@ import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsGridProps } from '../ChartsGrid';
 import { ChartsLegendProps } from '../ChartsLegend';
 import { ChartsOverlayProps } from '../ChartsOverlay';
-import { ChartsTooltipProps } from '../ChartsTooltip';
 import type { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler';
 import { ChartContainerProps } from '../ChartContainer';
 import { ZAxisContextProviderProps } from '../context';
@@ -26,6 +25,5 @@ export declare const useScatterChartProps: (props: ScatterChartProps) => {
     overlayProps: ChartsOverlayProps;
     legendProps: ChartsLegendProps;
     axisHighlightProps: ChartsAxisHighlightProps;
-    tooltipProps: ChartsTooltipProps<"scatter">;
     children: import("react").ReactNode;
 };

package/ScatterChart/useScatterChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "zAxis", "series", "tooltip", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -16,7 +16,6 @@ export const useScatterChartProps = props => {
       yAxis,
       zAxis,
       series,
-      tooltip,
       axisHighlight,
       voronoiMaxRadius,
       disableVoronoi,
@@ -92,12 +91,6 @@ export const useScatterChartProps = props => {
     y: 'none',
     x: 'none'
   }, axisHighlight);
-  const tooltipProps = _extends({
-    trigger: 'item'
-  }, tooltip, {
-    slots,
-    slotProps
-  });
   return {
     chartContainerProps,
     zAxisProps,
@@ -108,7 +101,6 @@ export const useScatterChartProps = props => {
     overlayProps,
     legendProps,
     axisHighlightProps,
-    tooltipProps,
     children
   };
 };

package/SparkLineChart/SparkLineChart.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
 import { ChartContainerProps } from '../ChartContainer';
-import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
+import { ChartsTooltipSlots, ChartsTooltipSlotProps } from '../ChartsTooltip/ChartTooltip.types';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../models/axis';
 import { LineSeriesType } from '../models/seriesType';
@@ -11,9 +11,9 @@ import { LinePlotSlots, LinePlotSlotProps } from '../LineChart/LinePlot';
 import { MarkPlotSlots, MarkPlotSlotProps } from '../LineChart/MarkPlot';
 import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from '../LineChart/LineHighlightPlot';
 import { BarPlotSlots, BarPlotSlotProps } from '../BarChart/BarPlot';
-export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots<'line' | 'bar'> {
+export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots {
 }
-export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps<'line' | 'bar'> {
+export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {
 }
 export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'margin' | 'plugins'> {
     /**
@@ -26,7 +26,6 @@ export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series'
      * Notice it is a single [[AxisConfig]] object, not an array of configuration.
      */
     yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>;
-    tooltip?: ChartsTooltipProps<'line' | 'bar'>;
     axisHighlight?: ChartsAxisHighlightProps;
     /**
      * Type of plot used.

package/SparkLineChart/SparkLineChart.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "colors", "sx", "showTooltip", "tooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
+const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "colors", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { BarPlot } from "../BarChart/index.js";
@@ -38,7 +38,6 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       colors,
       sx,
       showTooltip,
-      tooltip,
       showHighlight,
       axisHighlight: inAxisHighlight,
       children,
@@ -58,6 +57,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     x: 'none'
   };
   const axisHighlight = _extends({}, defaultXHighlight, inAxisHighlight);
+  const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsxs(ChartContainer, _extends({}, other, {
     ref: ref,
     series: [_extends({
@@ -86,7 +86,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     }, yAxis)],
     colors: colors,
     sx: sx,
-    disableAxisListener: (!showTooltip || tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
+    disableAxisListener: (!showTooltip || slotProps?.tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
       skipAnimation: true,
       slots: slots,
@@ -107,10 +107,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
         slots: slots,
         slotProps: slotProps
       })]
-    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
-      slotProps: slotProps,
-      slots: slots
-    })), children]
+    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
@@ -193,16 +190,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default 'line'
    */
   plotType: PropTypes.oneOf(['bar', 'line']),
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Set to `true` to highlight the value.
    * With line, it shows a point.
@@ -232,14 +219,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
-  tooltip: PropTypes.shape({
-    axisContent: PropTypes.elementType,
-    classes: PropTypes.object,
-    itemContent: PropTypes.elementType,
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
-  }),
   /**
    * Formatter used by the tooltip.
    * @param {number} value The value to format.
@@ -247,12 +226,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default (value: number | null) => (value === null ? '' : value.toString())
    */
   valueFormatter: PropTypes.func,
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -287,7 +260,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -298,7 +270,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
@@ -340,7 +311,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -351,7 +321,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),

package/context/CartesianProvider/defaultizeAxis.d.ts

@@ -12,29 +12,27 @@ export declare const defaultizeAxis: (inAxis: MakeOptional<AxisConfig<ScaleName,
     valueFormatter?: ((value: any, context: import("../../internals").AxisValueFormatterContext) => string) | undefined;
     dataKey?: string | undefined;
     sx?: import("@mui/system").SxProps | undefined;
-    classes?: Partial<import("../..").ChartsAxisClasses> | undefined;
     tickMaxStep?: number | undefined;
     tickMinStep?: number | undefined;
     tickNumber?: number | undefined;
     disableLine?: boolean | undefined;
     disableTicks?: boolean | undefined;
-    tickFontSize?: number | undefined;
-    tickLabelStyle?: import("../..").ChartsTextProps["style"];
-    labelStyle?: import("../..").ChartsTextProps["style"];
-    tickLabelInterval?: ("auto" | ((value: any, index: number) => boolean)) | undefined;
-    labelFontSize?: number | undefined;
+    tickLabelStyle?: import("../..").ChartsTextStyle | undefined;
+    labelStyle?: import("../..").ChartsTextStyle | undefined;
+    tickLabelInterval?: "auto" | ((value: any, index: number) => boolean) | undefined;
     tickSize?: number | undefined;
+    classes?: Partial<import("../..").ChartsAxisClasses> | undefined;
     slots?: Partial<import("../../internals").ChartsAxisSlots> | undefined;
     slotProps?: Partial<import("../../internals").ChartsAxisSlotProps> | undefined;
-    tickInterval?: ("auto" | ((value: any, index: number) => boolean) | any[]) | undefined;
-    tickPlacement?: ("start" | "end" | "middle" | "extremities") | undefined;
-    tickLabelPlacement?: ("middle" | "tick") | undefined;
+    tickInterval?: "auto" | ((value: any, index: number) => boolean) | any[] | undefined;
+    tickPlacement?: "start" | "end" | "middle" | "extremities" | undefined;
+    tickLabelPlacement?: "middle" | "tick" | undefined;
     scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
     colorMap?: import("../../models/colorMapping").ContinuousColorConfig<number | Date> | import("../../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
     hideTooltip?: boolean | undefined;
-    domainLimit?: ("nice" | "strict" | ((min: number, max: number) => {
+    domainLimit?: "nice" | "strict" | ((min: number, max: number) => {
         min: number;
         max: number;
-    })) | undefined;
+    }) | undefined;
     id: import("../../internals").AxisId;
 }[];

package/context/ChartDataProvider/ChartDataProvider.d.ts

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
-import { DrawingProviderProps } from '../DrawingProvider';
+import { DrawingAreaProviderProps } from '../DrawingAreaProvider';
 import { SeriesProviderProps } from '../SeriesProvider';
-import { ChartsSurfaceProps } from '../../ChartsSurface';
 import { CartesianProviderProps } from '../CartesianProvider';
-import { HighlightedProviderProps, ZAxisContextProviderProps } from '..';
 import { PluginProviderProps } from '../PluginProvider';
 import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../../models/axis';
 import { AnimationProviderProps } from '../AnimationProvider';
-export type ChartDataProviderProps = Omit<ChartsSurfaceProps & Omit<SeriesProviderProps, 'seriesFormatters'> & Omit<DrawingProviderProps, 'svgRef'> & Pick<CartesianProviderProps, 'dataset'> & ZAxisContextProviderProps & HighlightedProviderProps & PluginProviderProps & AnimationProviderProps, 'children'> & {
+import { ZAxisContextProviderProps } from '../ZAxisContextProvider';
+import { HighlightedProviderProps } from '../HighlightedProvider';
+import { SizeProviderProps } from '../SizeProvider';
+export type ChartDataProviderProps = Omit<SizeProviderProps & Omit<SeriesProviderProps, 'seriesFormatters'> & Pick<DrawingAreaProviderProps, 'margin'> & Pick<CartesianProviderProps, 'dataset'> & ZAxisContextProviderProps & HighlightedProviderProps & PluginProviderProps & AnimationProviderProps, 'children'> & {
     /**
      * The configuration of the x-axes.
      * If not provided, a default axis config is used.
@@ -23,19 +24,35 @@ export type ChartDataProviderProps = Omit<ChartsSurfaceProps & Omit<SeriesProvid
     yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[];
     children?: React.ReactNode;
 };
-declare const ChartDataProvider: React.ForwardRefExoticComponent<Omit<ChartsSurfaceProps & Omit<SeriesProviderProps, "seriesFormatters"> & Omit<DrawingProviderProps, "svgRef"> & Pick<CartesianProviderProps, "dataset"> & ZAxisContextProviderProps & HighlightedProviderProps & PluginProviderProps & AnimationProviderProps, "children"> & {
-    /**
-     * The configuration of the x-axes.
-     * If not provided, a default axis config is used.
-     * An array of [[AxisConfig]] objects.
-     */
-    xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, "id">[];
-    /**
-     * The configuration of the y-axes.
-     * If not provided, a default axis config is used.
-     * An array of [[AxisConfig]] objects.
-     */
-    yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, "id">[];
-    children?: React.ReactNode;
-} & React.RefAttributes<SVGSVGElement>>;
+/**
+ * Orchestrates the data providers for the chart components and hooks.
+ *
+ * Use this component if you have custom HTML components that need to access the chart data.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartDataProvider API](https://mui.com/x/api/charts/chart-data-provider/)
+ *
+ * @example
+ * ```jsx
+ * <ChartDataProvider
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *   <ChartsSurface>
+ *      <BarPlot />
+ *      <ChartsXAxis position="bottom" axisId="x-axis" />
+ *   </ChartsSurface>
+ *   {'Custom Legend Component'}
+ * </ChartDataProvider>
+ * ```
+ */
+declare function ChartDataProvider(props: ChartDataProviderProps): React.JSX.Element;
+declare namespace ChartDataProvider {
+    var propTypes: any;
+}
 export { ChartDataProvider };

package/context/ChartDataProvider/ChartDataProvider.js

@@ -3,56 +3,82 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingProvider } from "../DrawingProvider.js";
+import { DrawingAreaProvider } from "../DrawingAreaProvider/index.js";
 import { SeriesProvider } from "../SeriesProvider/index.js";
-import { InteractionProvider } from "../InteractionProvider.js";
-import { ChartsSurface } from "../../ChartsSurface/index.js";
 import { CartesianProvider } from "../CartesianProvider/index.js";
-import { ChartsAxesGradients } from "../../internals/components/ChartsAxesGradients/index.js";
-import { HighlightedProvider, ZAxisContextProvider } from "../index.js";
 import { PluginProvider } from "../PluginProvider/index.js";
 import { useChartDataProviderProps } from "./useChartDataProviderProps.js";
 import { AnimationProvider } from "../AnimationProvider/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ChartDataProvider = /*#__PURE__*/React.forwardRef(function ChartDataProvider(props, ref) {
+import { ZAxisContextProvider } from "../ZAxisContextProvider.js";
+import { HighlightedProvider } from "../HighlightedProvider/index.js";
+import { SizeProvider } from "../SizeProvider/index.js";
+import { ChartProvider } from "../ChartProvider/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Orchestrates the data providers for the chart components and hooks.
+ *
+ * Use this component if you have custom HTML components that need to access the chart data.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartDataProvider API](https://mui.com/x/api/charts/chart-data-provider/)
+ *
+ * @example
+ * ```jsx
+ * <ChartDataProvider
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *   <ChartsSurface>
+ *      <BarPlot />
+ *      <ChartsXAxis position="bottom" axisId="x-axis" />
+ *   </ChartsSurface>
+ *   {'Custom Legend Component'}
+ * </ChartDataProvider>
+ * ```
+ */
+function ChartDataProvider(props) {
   const {
     children,
-    drawingProviderProps,
+    drawingAreaProviderProps,
     seriesProviderProps,
     cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
-    chartsSurfaceProps,
     pluginProviderProps,
-    animationProviderProps
-  } = useChartDataProviderProps(props, ref);
-  return /*#__PURE__*/_jsx(DrawingProvider, _extends({}, drawingProviderProps, {
-    children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
-      children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
-        children: /*#__PURE__*/_jsx(CartesianProvider, _extends({}, cartesianProviderProps, {
-          children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
-            children: /*#__PURE__*/_jsx(InteractionProvider, {
-              children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
-                children: /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
-                  children: /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-                    children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), children]
+    animationProviderProps,
+    sizeProviderProps
+  } = useChartDataProviderProps(props);
+  return /*#__PURE__*/_jsx(ChartProvider, {
+    children: /*#__PURE__*/_jsx(SizeProvider, _extends({}, sizeProviderProps, {
+      children: /*#__PURE__*/_jsx(DrawingAreaProvider, _extends({}, drawingAreaProviderProps, {
+        children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
+          children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
+            children: /*#__PURE__*/_jsx(CartesianProvider, _extends({}, cartesianProviderProps, {
+              children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
+                children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
+                  children: /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
+                    children: children
                   }))
                 }))
               }))
-            })
+            }))
           }))
         }))
       }))
     }))
-  }));
-});
+  });
+}
 process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
-  className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
    * @default blueberryTwilightPalette
@@ -62,17 +88,10 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
-  desc: PropTypes.string,
   /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
-  disableAxisListener: PropTypes.bool,
-  /**
-   * The height of the chart in px.
-   */
-  height: PropTypes.number.isRequired,
+  height: PropTypes.number,
   /**
    * The item currently highlighted. Turns highlighting into a controlled prop.
    */
@@ -114,18 +133,10 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: PropTypes.bool,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  title: PropTypes.string,
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
-   * The width of the chart in px.
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
-  width: PropTypes.number.isRequired,
+  width: PropTypes.number,
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
@@ -157,7 +168,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -168,7 +178,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
@@ -211,7 +220,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -222,7 +230,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),