@mui/x-charts 7.6.1 → 7.7.0

package/esm/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -5,6 +5,7 @@ import { useDrawingArea, useXScale } from '../hooks';
 import { ReferenceLineRoot } from './common';
 import { ChartsText } from '../ChartsText';
 import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
+import { buildWarning } from '../internals/warning';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   top,
@@ -46,7 +47,7 @@ export function getXReferenceLineClasses(classes) {
     label: ['label']
   }, getReferenceLineUtilityClass, classes);
 }
-let warnedOnce = false;
+const valueError = buildWarning((value, id) => `MUI X Charts: the value ${value} does not exist in the data of x axis with id ${id}.`, 'error');
 function ChartsXReferenceLine(props) {
   const {
     x,
@@ -66,10 +67,7 @@ function ChartsXReferenceLine(props) {
   const xPosition = xAxisScale(x);
   if (xPosition === undefined) {
     if (process.env.NODE_ENV !== 'production') {
-      if (!warnedOnce) {
-        warnedOnce = true;
-        console.error(`MUI X Charts: the value ${x} does not exist in the data of x axis with id ${axisId}.`);
-      }
+      valueError(x, axisId);
     }
     return null;
   }

package/esm/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -5,6 +5,7 @@ import { useDrawingArea, useYScale } from '../hooks';
 import { ReferenceLineRoot } from './common';
 import { ChartsText } from '../ChartsText';
 import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
+import { buildWarning } from '../internals/warning';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   left,
@@ -39,7 +40,6 @@ const getTextParams = ({
       };
   }
 };
-let warnedOnce = false;
 export function getYReferenceLineClasses(classes) {
   return composeClasses({
     root: ['root', 'horizontal'],
@@ -47,6 +47,7 @@ export function getYReferenceLineClasses(classes) {
     label: ['label']
   }, getReferenceLineUtilityClass, classes);
 }
+const valueError = buildWarning((value, id) => `MUI X Charts: the value ${value} does not exist in the data of y axis with id ${id}.`, 'error');
 function ChartsYReferenceLine(props) {
   const {
     y,
@@ -66,10 +67,7 @@ function ChartsYReferenceLine(props) {
   const yPosition = yAxisScale(y);
   if (yPosition === undefined) {
     if (process.env.NODE_ENV !== 'production') {
-      if (!warnedOnce) {
-        warnedOnce = true;
-        console.error(`MUI X Charts: the value ${y} does not exist in the data of y axis with id ${axisId}.`);
-      }
+      valueError(y, axisId);
     }
     return null;
   }

package/esm/ChartsText/ChartsText.js

@@ -49,10 +49,8 @@ function ChartsText(props) {
   if (angle) {
     transforms.push(`rotate(${angle}, ${x}, ${y})`);
   }
-  if (transforms.length) {
-    textProps.transform = transforms.join(' ');
-  }
   return /*#__PURE__*/_jsx("text", _extends({}, textProps, {
+    transform: transforms.length > 0 ? transforms.join(' ') : undefined,
     x: x,
     y: y,
     textAnchor: textAnchor,

package/esm/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
-import { isCartesianSeriesType } from './utils';
-import colorGetter from '../internals/colorGetter';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
+import { useColorProcessor } from '../hooks/useColor';
+import { isCartesianSeriesType } from '../internals/isCartesian';
+import { useSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsAxisTooltipContent(props) {
   const {
@@ -30,7 +30,8 @@ function ChartsAxisTooltipContent(props) {
     zAxisIds,
     zAxis
   } = React.useContext(ZAxisContext);
-  const series = React.useContext(SeriesContext);
+  const series = useSeries();
+  const colorProcessors = useColorProcessor();
   const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
   const relevantSeries = React.useMemo(() => {
     const rep = [];
@@ -40,15 +41,8 @@ function ChartsAxisTooltipContent(props) {
         const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey;
         if (axisKey === undefined || axisKey === USED_AXIS_ID) {
           const seriesToAdd = series[seriesType].series[seriesId];
-          let getColor;
-          switch (seriesToAdd.type) {
-            case 'scatter':
-              getColor = colorGetter(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]], zAxis[seriesToAdd.zAxisKey ?? zAxisIds[0]]);
-              break;
-            default:
-              getColor = colorGetter(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]]);
-              break;
-          }
+          const zAxisKey = seriesToAdd.zAxisKey ?? zAxisIds[0];
+          const getColor = colorProcessors[seriesType]?.(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]], zAxisKey && zAxis[zAxisKey]) ?? (() => '');
           rep.push(_extends({}, seriesToAdd, {
             getColor
           }));
@@ -56,7 +50,7 @@ function ChartsAxisTooltipContent(props) {
       });
     });
     return rep;
-  }, [USED_AXIS_ID, isXaxis, series, xAxis, xAxisIds, yAxis, yAxisIds, zAxis, zAxisIds]);
+  }, [USED_AXIS_ID, colorProcessors, isXaxis, series, xAxis, xAxisIds, yAxis, yAxisIds, zAxis, zAxisIds]);
   const relevantAxis = React.useMemo(() => {
     return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
   }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);

package/esm/ChartsTooltip/ChartsItemTooltipContent.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { DefaultChartsItemTooltipContent } from './DefaultChartsItemTooltipContent';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import colorGetter from '../internals/colorGetter';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
+import { useColorProcessor } from '../hooks/useColor';
+import { useSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsItemTooltipContent(props) {
   const {
@@ -16,7 +16,7 @@ function ChartsItemTooltipContent(props) {
     classes,
     contentProps
   } = props;
-  const series = React.useContext(SeriesContext)[itemData.type].series[itemData.seriesId];
+  const series = useSeries()[itemData.type].series[itemData.seriesId];
   const {
     xAxis,
     yAxis,
@@ -27,21 +27,11 @@ function ChartsItemTooltipContent(props) {
     zAxis,
     zAxisIds
   } = React.useContext(ZAxisContext);
-  const defaultXAxisId = xAxisIds[0];
-  const defaultYAxisId = yAxisIds[0];
-  const defaultZAxisId = zAxisIds[0];
-  let getColor;
-  switch (series.type) {
-    case 'pie':
-      getColor = colorGetter(series);
-      break;
-    case 'scatter':
-      getColor = colorGetter(series, xAxis[series.xAxisKey ?? defaultXAxisId], yAxis[series.yAxisKey ?? defaultYAxisId], zAxis[series.zAxisKey ?? defaultZAxisId]);
-      break;
-    default:
-      getColor = colorGetter(series, xAxis[series.xAxisKey ?? defaultXAxisId], yAxis[series.yAxisKey ?? defaultYAxisId]);
-      break;
-  }
+  const colorProcessors = useColorProcessor();
+  const xAxisKey = series.xAxisKey ?? xAxisIds[0];
+  const yAxisKey = series.yAxisKey ?? yAxisIds[0];
+  const zAxisKey = series.zAxisKey ?? zAxisIds[0];
+  const getColor = colorProcessors[series.type]?.(series, xAxisKey && xAxis[xAxisKey], yAxisKey && yAxis[yAxisKey], zAxisKey && zAxis[zAxisKey]) ?? (() => '');
   const Content = content ?? DefaultChartsItemTooltipContent;
   const chartTooltipContentProps = useSlotProps({
     elementType: Content,

package/esm/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
-import { isCartesianSeries, utcFormatter } from './utils';
+import { utcFormatter } from './utils';
 import { getLabel } from '../internals/getLabel';
+import { isCartesianSeries } from '../internals/isCartesian';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DefaultChartsAxisTooltipContent(props) {
   const {
@@ -37,7 +38,6 @@ function DefaultChartsAxisTooltipContent(props) {
         })
       }), /*#__PURE__*/_jsx("tbody", {
         children: series.filter(isCartesianSeries).map(({
-          color,
           id,
           label,
           valueFormatter,
@@ -52,12 +52,13 @@ function DefaultChartsAxisTooltipContent(props) {
             return null;
           }
           const formattedLabel = getLabel(label, 'tooltip');
+          const color = getColor(dataIndex);
           return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
             className: classes.row,
             children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
               className: clsx(classes.markCell, classes.cell),
-              children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
-                color: getColor(dataIndex) ?? color,
+              children: color && /*#__PURE__*/_jsx(ChartsTooltipMark, {
+                color: color,
                 className: classes.mark
               })
             }), /*#__PURE__*/_jsx(ChartsTooltipCell, {

package/esm/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -23,7 +23,7 @@ function DefaultChartsItemTooltipContent(props) {
     color: getColor(itemData.dataIndex),
     displayedLabel: getLabel(series.data[itemData.dataIndex].label, 'tooltip')
   } : {
-    color: getColor(itemData.dataIndex) ?? series.color,
+    color: getColor(itemData.dataIndex),
     displayedLabel: getLabel(series.label, 'tooltip')
   };
   const value = series.type === 'pie' ? _extends({}, series.data[itemData.dataIndex], {

package/esm/ChartsTooltip/utils.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SvgContext } from '../context/DrawingProvider';
+import { useSvgRef } from '../hooks';
 export function generateVirtualElement(mousePosition) {
   if (mousePosition === null) {
     return {
@@ -44,7 +44,7 @@ export function generateVirtualElement(mousePosition) {
   };
 }
 export function useMouseTracker() {
-  const svgRef = React.useContext(SvgContext);
+  const svgRef = useSvgRef();
 
   // Use a ref to avoid rerendering on every mousemove event.
   const [mousePosition, setMousePosition] = React.useState(null);
@@ -84,12 +84,6 @@ export function getTooltipHasData(trigger, displayedData) {
   const hasAxisYData = displayedData.y !== null;
   return hasAxisXData || hasAxisYData;
 }
-export function isCartesianSeriesType(seriesType) {
-  return ['bar', 'line', 'scatter'].includes(seriesType);
-}
-export function isCartesianSeries(series) {
-  return isCartesianSeriesType(series.type);
-}
 export function utcFormatter(v) {
   if (v instanceof Date) {
     return v.toUTCString();

package/esm/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -4,11 +4,11 @@ import { Delaunay } from 'd3-delaunay';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { getSVGPoint } from '../internals/utils';
 import { useDrawingArea, useSvgRef } from '../hooks';
 import { useHighlighted } from '../context';
+import { useScatterSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsVoronoiHandler(props) {
   const {
@@ -34,7 +34,7 @@ function ChartsVoronoiHandler(props) {
   const {
     series,
     seriesOrder
-  } = React.useContext(SeriesContext).scatter ?? {};
+  } = useScatterSeries() ?? {};
   const voronoiRef = React.useRef({});
   const delauneyRef = React.useRef(undefined);
   const {

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -104,27 +104,23 @@ const defaultProps = {
  * - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
  */
 function ChartsXAxis(inProps) {
-  const props = useThemeProps({
-    props: _extends({}, defaultProps, inProps),
-    name: 'MuiChartsXAxis'
-  });
   const {
-    xAxisIds
+    xAxisIds,
+    xAxis
   } = React.useContext(CartesianContext);
-  const _React$useContext = React.useContext(CartesianContext),
-    _ref = props.axisId ?? xAxisIds[0],
+  const _xAxis = xAxis[inProps.axisId ?? xAxisIds[0]],
     {
-      xAxis: {
-        [_ref]: {
-          scale: xScale,
-          tickNumber,
-          reverse
-        }
-      }
-    } = _React$useContext,
-    settings = _objectWithoutPropertiesLoose(_React$useContext.xAxis[_ref], _excluded);
+      scale: xScale,
+      tickNumber,
+      reverse
+    } = _xAxis,
+    settings = _objectWithoutPropertiesLoose(_xAxis, _excluded);
   const isMounted = useMounted();
-  const defaultizedProps = _extends({}, defaultProps, settings, props);
+  const themedProps = useThemeProps({
+    props: _extends({}, settings, inProps),
+    name: 'MuiChartsXAxis'
+  });
+  const defaultizedProps = _extends({}, defaultProps, themedProps);
   const {
     position,
     disableLine,
@@ -314,10 +310,12 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    */
   tickFontSize: PropTypes.number,
   /**
-   * Defines which ticks are displayed. Its value can be:
+   * Defines which ticks are displayed.
+   * Its value can be:
    * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
-   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
    * - an array containing the values where ticks should be displayed.
+   * @see See {@link https://mui.com/x/react-charts/axis/#fixed-tick-positions}
    * @default 'auto'
    */
   tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),

package/esm/ChartsYAxis/ChartsYAxis.js

@@ -1,5 +1,5 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["scale", "tickNumber"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -47,25 +47,21 @@ const defaultProps = {
  * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
  */
 function ChartsYAxis(inProps) {
-  const props = useThemeProps({
-    props: _extends({}, defaultProps, inProps),
-    name: 'MuiChartsYAxis'
-  });
   const {
-    yAxisIds
+    yAxisIds,
+    yAxis
   } = React.useContext(CartesianContext);
-  const _React$useContext = React.useContext(CartesianContext),
-    _ref = props.axisId ?? yAxisIds[0],
+  const _yAxis = yAxis[inProps.axisId ?? yAxisIds[0]],
     {
-      yAxis: {
-        [_ref]: {
-          scale: yScale,
-          tickNumber
-        }
-      }
-    } = _React$useContext,
-    settings = _objectWithoutPropertiesLoose(_React$useContext.yAxis[_ref], _excluded);
-  const defaultizedProps = _extends({}, defaultProps, settings, props);
+      scale: yScale,
+      tickNumber
+    } = _yAxis,
+    settings = _objectWithoutPropertiesLoose(_yAxis, _excluded);
+  const themedProps = useThemeProps({
+    props: _extends({}, settings, inProps),
+    name: 'MuiChartsYAxis'
+  });
+  const defaultizedProps = _extends({}, defaultProps, themedProps);
   const {
     position,
     disableLine,
@@ -250,10 +246,12 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    */
   tickFontSize: PropTypes.number,
   /**
-   * Defines which ticks are displayed. Its value can be:
+   * Defines which ticks are displayed.
+   * Its value can be:
    * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
-   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
    * - an array containing the values where ticks should be displayed.
+   * @see See {@link https://mui.com/x/react-charts/axis/#fixed-tick-positions}
    * @default 'auto'
    */
   tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),

package/esm/LineChart/AreaPlot.js

@@ -4,16 +4,16 @@ const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { area as d3Area } from 'd3-shape';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { AreaElement } from './AreaElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { useChartGradient } from '../internals/components/ChartsAxesGradients';
+import { useLineSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useAggregatedData = () => {
-  const seriesData = React.useContext(SeriesContext).line;
+  const seriesData = useLineSeries();
   const axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
     return [];

package/esm/LineChart/LineChart.js

@@ -15,7 +15,7 @@ import { ChartsClipPath } from '../ChartsClipPath';
 import { LineHighlightPlot } from './LineHighlightPlot';
 import { ChartsGrid } from '../ChartsGrid';
 import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
-import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
+import { ChartsOverlay } from '../ChartsOverlay';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -348,7 +348,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    position: PropTypes.oneOf(['bottom', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -401,7 +401,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    position: PropTypes.oneOf(['left', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,

package/esm/LineChart/LineHighlightPlot.js

@@ -3,13 +3,13 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { LineHighlightElement } from './LineHighlightElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { InteractionContext } from '../context/InteractionProvider';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import getColor from './getColor';
+import { useLineSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -27,7 +27,7 @@ function LineHighlightPlot(props) {
       slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const seriesData = React.useContext(SeriesContext).line;
+  const seriesData = useLineSeries();
   const axisData = React.useContext(CartesianContext);
   const {
     axis

package/esm/LineChart/LinePlot.js

@@ -4,16 +4,16 @@ const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from 'd3-shape';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { LineElement } from './LineElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { useChartGradient } from '../internals/components/ChartsAxesGradients';
+import { useLineSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useAggregatedData = () => {
-  const seriesData = React.useContext(SeriesContext).line;
+  const seriesData = useLineSeries();
   const axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
     return [];

package/esm/LineChart/MarkPlot.js

@@ -3,7 +3,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
@@ -11,6 +10,7 @@ import { useChartId } from '../hooks/useChartId';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { cleanId } from '../internals/utils';
 import getColor from './getColor';
+import { useLineSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -30,7 +30,7 @@ function MarkPlot(props) {
       onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const seriesData = React.useContext(SeriesContext).line;
+  const seriesData = useLineSeries();
   const axisData = React.useContext(CartesianContext);
   const chartId = useChartId();
   const Mark = slots?.mark ?? MarkElement;

package/esm/LineChart/formatter.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from 'd3-shape';
 import { getStackingGroups } from '../internals/stackSeries';
-import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
+import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
 let warnedOnce = false;
 
 // For now it's a copy past of bar charts formatter, but maybe will diverge later

package/esm/LineChart/getColor.js

@@ -1,6 +1,6 @@
 export default function getColor(series, xAxis, yAxis) {
-  const yColorScale = yAxis.colorScale;
-  const xColorScale = xAxis.colorScale;
+  const yColorScale = yAxis?.colorScale;
+  const xColorScale = xAxis?.colorScale;
   if (yColorScale) {
     return dataIndex => {
       const value = series.data[dataIndex];

package/esm/LineChart/plugin.js

@@ -0,0 +1,10 @@
+import { getExtremumX, getExtremumY } from './extremums';
+import formatter from './formatter';
+import getColor from './getColor';
+export const plugin = {
+  seriesType: 'line',
+  colorProcessor: getColor,
+  seriesFormatter: formatter,
+  xExtremumGetter: getExtremumX,
+  yExtremumGetter: getExtremumY
+};

package/esm/PieChart/PieChart.js

@@ -9,7 +9,7 @@ import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { PiePlot } from './PiePlot';
 import { useIsRTL } from '../internals/useIsRTL';
-import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
+import { ChartsOverlay } from '../ChartsOverlay';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultMargin = {
   top: 5,
@@ -307,7 +307,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    position: PropTypes.oneOf(['bottom', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -360,7 +360,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    position: PropTypes.oneOf(['left', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,

package/esm/PieChart/PiePlot.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import { PieArcPlot } from './PieArcPlot';
 import { PieArcLabelPlot } from './PieArcLabelPlot';
 import { getPercentageValue } from '../internals/utils';
 import { getPieCoordinates } from './getPieCoordinates';
+import { usePieSeries } from '../hooks/useSeries';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -24,7 +24,7 @@ function PiePlot(props) {
     slotProps,
     onItemClick
   } = props;
-  const seriesData = React.useContext(SeriesContext).pie;
+  const seriesData = usePieSeries();
   const {
     left,
     top,

package/esm/PieChart/plugin.js

@@ -0,0 +1,7 @@
+import formatter from './formatter';
+import getColor from './getColor';
+export const plugin = {
+  seriesType: 'pie',
+  colorProcessor: getColor,
+  seriesFormatter: formatter
+};

package/esm/ResponsiveChartContainer/ResizableContainer.js

@@ -0,0 +1,26 @@
+import { styled } from '@mui/material/styles';
+/**
+ * Wrapping div that take the shape of its parent.
+ *
+ * @ignore - do not document.
+ */
+export const ResizableContainer = styled('div', {
+  name: 'MuiResponsiveChart',
+  slot: 'Container'
+})(({
+  ownerState
+}) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
+  display: 'flex',
+  position: 'relative',
+  flexGrow: 1,
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  '&>svg': {
+    width: '100%',
+    height: '100%'
+  }
+}));