@mui/x-charts 7.22.3 → 8.0.0-alpha.1

package/ScatterChart/ScatterPlot.js

@@ -52,18 +52,15 @@ function ScatterPlot(props) {
     children: seriesOrder.map(seriesId => {
       const {
         id,
-        xAxisKey,
-        yAxisKey,
-        zAxisKey,
         xAxisId,
         yAxisId,
         zAxisId,
         markerSize,
         color
       } = series[seriesId];
-      const colorGetter = getColor(series[seriesId], xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId], yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId], zAxis[zAxisId ?? zAxisKey ?? defaultZAxisId]);
-      const xScale = xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId].scale;
-      const yScale = yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId].scale;
+      const colorGetter = getColor(series[seriesId], xAxis[xAxisId ?? defaultXAxisId], yAxis[yAxisId ?? defaultYAxisId], zAxis[zAxisId ?? defaultZAxisId]);
+      const xScale = xAxis[xAxisId ?? defaultXAxisId].scale;
+      const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
       return /*#__PURE__*/_jsx(ScatterItems, _extends({
         xScale: xScale,
         yScale: yScale,

package/ScatterChart/extremums.js

@@ -9,14 +9,14 @@ export const getExtremumX = params => {
     getFilters
   } = params;
   return Object.keys(series).filter(seriesId => {
-    const axisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey;
+    const axisId = series[seriesId].xAxisId;
     return axisId === axis.id || axisId === undefined && isDefaultAxis;
   }).reduce((acc, seriesId) => {
     const filter = getFilters?.({
       currentAxisId: axis.id,
       isDefaultAxis,
-      seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
-      seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
+      seriesXAxisId: series[seriesId].xAxisId,
+      seriesYAxisId: series[seriesId].yAxisId
     });
     const seriesMinMax = series[seriesId].data?.reduce((accSeries, d, dataIndex) => {
       if (filter && !filter(d, dataIndex)) {
@@ -35,14 +35,14 @@ export const getExtremumY = params => {
     getFilters
   } = params;
   return Object.keys(series).filter(seriesId => {
-    const axisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+    const axisId = series[seriesId].yAxisId;
     return axisId === axis.id || axisId === undefined && isDefaultAxis;
   }).reduce((acc, seriesId) => {
     const filter = getFilters?.({
       currentAxisId: axis.id,
       isDefaultAxis,
-      seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
-      seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
+      seriesXAxisId: series[seriesId].xAxisId,
+      seriesYAxisId: series[seriesId].yAxisId
     });
     const seriesMinMax = series[seriesId].data?.reduce((accSeries, d, dataIndex) => {
       if (filter && !filter(d, dataIndex)) {

package/ScatterChart/useScatterChartProps.d.ts

@@ -3,9 +3,8 @@ 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 { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { ChartContainerProps } from '../ChartContainer';
 import { ZAxisContextProviderProps } from '../context';
 import type { ScatterChartProps } from './ScatterChart';
 import type { ScatterPlotProps } from './ScatterPlot';
@@ -17,7 +16,7 @@ import type { ScatterPlotProps } from './ScatterPlot';
  * @returns An object with props for the children components of ScatterChart
  */
 export declare const useScatterChartProps: (props: ScatterChartProps) => {
-    chartContainerProps: ResponsiveChartContainerProps;
+    chartContainerProps: ChartContainerProps;
     zAxisProps: Omit<ZAxisContextProviderProps, "children">;
     voronoiHandlerProps: ChartsVoronoiHandlerProps;
     chartsAxisProps: ChartsAxisProps;
@@ -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", "legend", "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,11 +16,9 @@ export const useScatterChartProps = props => {
       yAxis,
       zAxis,
       series,
-      tooltip,
       axisHighlight,
       voronoiMaxRadius,
       disableVoronoi,
-      legend,
       width,
       height,
       margin,
@@ -85,20 +83,14 @@ export const useScatterChartProps = props => {
     slots,
     slotProps
   };
-  const legendProps = _extends({}, legend, {
+  const legendProps = {
     slots,
     slotProps
-  });
+  };
   const axisHighlightProps = _extends({
     y: 'none',
     x: 'none'
   }, axisHighlight);
-  const tooltipProps = _extends({
-    trigger: 'item'
-  }, tooltip, {
-    slots,
-    slotProps
-  });
   return {
     chartContainerProps,
     zAxisProps,
@@ -109,7 +101,6 @@ export const useScatterChartProps = props => {
     overlayProps,
     legendProps,
     axisHighlightProps,
-    tooltipProps,
     children
   };
 };

package/SparkLineChart/SparkLineChart.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
-import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
+import { MakeOptional } from '@mui/x-internals/types';
+import { ChartContainerProps } from '../ChartContainer';
+import { ChartsTooltipSlots, ChartsTooltipSlotProps } from '../ChartsTooltip/ChartTooltip.types';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../models/axis';
-import { MakeOptional } from '../models/helpers';
 import { LineSeriesType } from '../models/seriesType';
 import { CardinalDirections } from '../models/layout';
 import { AreaPlotSlots, AreaPlotSlotProps } from '../LineChart/AreaPlot';
@@ -11,11 +11,11 @@ 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<ResponsiveChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'margin' | 'plugins'> {
+export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'margin' | 'plugins'> {
     /**
      * The xAxis configuration.
      * Notice it is a single [[AxisConfig]] object, not an array of configuration.
@@ -26,7 +26,6 @@ export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps,
      * 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.
@@ -98,5 +97,5 @@ export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps,
  *
  * - [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
  */
-declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps & React.RefAttributes<unknown>>;
+declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps & React.RefAttributes<SVGSVGElement>>;
 export { SparkLineChart };

package/SparkLineChart/SparkLineChart.js

@@ -2,12 +2,12 @@
 
 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";
 import { LinePlot, AreaPlot, LineHighlightPlot } from "../LineChart/index.js";
-import { ResponsiveChartContainer } from "../ResponsiveChartContainer/index.js";
+import { ChartContainer } from "../ChartContainer/index.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
@@ -38,7 +38,6 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       colors,
       sx,
       showTooltip,
-      tooltip,
       showHighlight,
       axisHighlight: inAxisHighlight,
       children,
@@ -58,7 +57,8 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     x: 'none'
   };
   const axisHighlight = _extends({}, defaultXHighlight, inAxisHighlight);
-  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({}, other, {
+  const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  return /*#__PURE__*/_jsxs(ChartContainer, _extends({}, other, {
     ref: ref,
     series: [_extends({
       type: plotType,
@@ -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.
    */

package/context/CartesianProvider/defaultizeAxis.d.ts

@@ -1,4 +1,4 @@
-import { MakeOptional } from '../../models/helpers';
+import { MakeOptional } from '@mui/x-internals/types';
 import { AxisConfig, ScaleName } from '../../models';
 import { ChartsAxisProps } from '../../models/axis';
 export declare const defaultizeAxis: (inAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, "id">[] | undefined, axisName: "x" | "y") => {

package/context/ChartDataProvider/ChartDataProvider.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { MakeOptional } from '@mui/x-internals/types';
+import { DrawingAreaProviderProps } from '../DrawingAreaProvider';
+import { SeriesProviderProps } from '../SeriesProvider';
+import { CartesianProviderProps } from '../CartesianProvider';
+import { PluginProviderProps } from '../PluginProvider';
+import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../../models/axis';
+import { AnimationProviderProps } from '../AnimationProvider';
+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.
+     * 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;
+};
+declare function ChartDataProvider(props: ChartDataProviderProps): React.JSX.Element;
+declare namespace ChartDataProvider {
+    var propTypes: any;
+}
+export { ChartDataProvider };

package/{ResponsiveChartContainer/ResponsiveChartContainer.js → context/ChartDataProvider/ChartDataProvider.js}

@@ -3,27 +3,58 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { ChartContainer } from "../ChartContainer/index.js";
-import { ResizableContainer } from "./ResizableContainer.js";
-import { useResponsiveChartContainerProps } from "./useResponsiveChartContainerProps.js";
+import { DrawingAreaProvider } from "../DrawingAreaProvider/index.js";
+import { SeriesProvider } from "../SeriesProvider/index.js";
+import { InteractionProvider } from "../InteractionProvider.js";
+import { CartesianProvider } from "../CartesianProvider/index.js";
+import { PluginProvider } from "../PluginProvider/index.js";
+import { useChartDataProviderProps } from "./useChartDataProviderProps.js";
+import { AnimationProvider } from "../AnimationProvider/index.js";
+import { ZAxisContextProvider } from "../ZAxisContextProvider.js";
+import { HighlightedProvider } from "../HighlightedProvider/index.js";
+import { SizeProvider } from "../SizeProvider/index.js";
+import { SvgRefProvider } from "../SvgRefProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
+function ChartDataProvider(props) {
   const {
-    hasIntrinsicSize,
-    chartContainerProps,
-    resizableChartContainerProps
-  } = useResponsiveChartContainerProps(props, ref);
-  return /*#__PURE__*/_jsx(ResizableContainer, _extends({}, resizableChartContainerProps, {
-    children: hasIntrinsicSize ? /*#__PURE__*/_jsx(ChartContainer, _extends({}, chartContainerProps)) : null
+    children,
+    drawingAreaProviderProps,
+    seriesProviderProps,
+    cartesianProviderProps,
+    zAxisContextProps,
+    highlightedProviderProps,
+    pluginProviderProps,
+    animationProviderProps,
+    sizeProviderProps
+  } = useChartDataProviderProps(props);
+  return /*#__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(InteractionProvider, {
+                children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
+                  children: /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
+                    children: /*#__PURE__*/_jsx(SvgRefProvider, {
+                      children: children
+                    })
+                  }))
+                }))
+              })
+            }))
+          }))
+        }))
+      }))
+    }))
   }));
-});
-process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
+}
+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
@@ -33,13 +64,6 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.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
-   */
-  disableAxisListener: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -74,16 +98,6 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * If not provided, the container supports line, bar, scatter and pie charts.
    */
   plugins: PropTypes.arrayOf(PropTypes.object),
-  /**
-   * 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,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
@@ -95,14 +109,6 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.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. If not defined, it takes the width of the parent element.
    */
@@ -241,4 +247,4 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     min: PropTypes.number
   }))
 } : void 0;
-export { ResponsiveChartContainer };
+export { ChartDataProvider };

package/context/ChartDataProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './ChartDataProvider';

package/context/ChartDataProvider/index.js

@@ -0,0 +1 @@
+export * from "./ChartDataProvider.js";

package/context/ChartDataProvider/useChartDataProviderProps.d.ts

@@ -0,0 +1,94 @@
+import type { DrawingAreaProviderProps } from '../DrawingAreaProvider';
+import type { CartesianProviderProps } from '../CartesianProvider';
+import type { SeriesProviderProps } from '../SeriesProvider';
+import type { ZAxisContextProviderProps } from '../ZAxisContextProvider';
+import type { ChartDataProviderProps } from './ChartDataProvider';
+import { HighlightedProviderProps } from '../HighlightedProvider';
+import { PluginProviderProps } from '../PluginProvider';
+import { AnimationProviderProps } from '../AnimationProvider';
+import { SizeProviderProps } from '../SizeProvider';
+export declare const useChartDataProviderProps: (props: ChartDataProviderProps) => {
+    children: import("react").ReactNode;
+    drawingAreaProviderProps: Omit<DrawingAreaProviderProps, "children">;
+    seriesProviderProps: Omit<SeriesProviderProps, "children">;
+    cartesianProviderProps: Omit<CartesianProviderProps, "children">;
+    zAxisContextProps: Omit<ZAxisContextProviderProps, "children">;
+    highlightedProviderProps: Omit<HighlightedProviderProps, "children">;
+    pluginProviderProps: Omit<PluginProviderProps, "children">;
+    animationProviderProps: Omit<AnimationProviderProps, "children">;
+    xAxis: {
+        reverse?: boolean | undefined;
+        fill?: string | undefined;
+        stroke?: string | undefined;
+        data?: any[] | undefined;
+        label?: string | undefined;
+        max?: (number | Date) | undefined;
+        min?: (number | Date) | undefined;
+        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;
+        tickSize?: number | 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;
+        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) => {
+            min: number;
+            max: number;
+        })) | undefined;
+        id: import("../../internals").AxisId;
+    }[];
+    yAxis: {
+        reverse?: boolean | undefined;
+        fill?: string | undefined;
+        stroke?: string | undefined;
+        data?: any[] | undefined;
+        label?: string | undefined;
+        max?: (number | Date) | undefined;
+        min?: (number | Date) | undefined;
+        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;
+        tickSize?: number | 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;
+        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) => {
+            min: number;
+            max: number;
+        })) | undefined;
+        id: import("../../internals").AxisId;
+    }[];
+    sizeProviderProps: Omit<SizeProviderProps, "children">;
+};

package/context/ChartDataProvider/useChartDataProviderProps.js

@@ -0,0 +1,66 @@
+'use client';
+
+import { useDefaultizeAxis } from "./useDefaultizeAxis.js";
+export const useChartDataProviderProps = props => {
+  const {
+    width,
+    height,
+    series,
+    margin,
+    xAxis,
+    yAxis,
+    zAxis,
+    colors,
+    dataset,
+    highlightedItem,
+    onHighlightChange,
+    plugins,
+    children,
+    skipAnimation
+  } = props;
+  const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis, dataset);
+  const drawingAreaProviderProps = {
+    margin
+  };
+  const animationProviderProps = {
+    skipAnimation
+  };
+  const pluginProviderProps = {
+    plugins
+  };
+  const seriesProviderProps = {
+    series,
+    colors,
+    dataset
+  };
+  const cartesianProviderProps = {
+    xAxis: defaultizedXAxis,
+    yAxis: defaultizedYAxis,
+    dataset
+  };
+  const zAxisContextProps = {
+    zAxis,
+    dataset
+  };
+  const highlightedProviderProps = {
+    highlightedItem,
+    onHighlightChange
+  };
+  const sizeProviderProps = {
+    width,
+    height
+  };
+  return {
+    children,
+    drawingAreaProviderProps,
+    seriesProviderProps,
+    cartesianProviderProps,
+    zAxisContextProps,
+    highlightedProviderProps,
+    pluginProviderProps,
+    animationProviderProps,
+    xAxis: defaultizedXAxis,
+    yAxis: defaultizedYAxis,
+    sizeProviderProps
+  };
+};