@mui/x-charts 7.6.1 → 7.7.0

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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%'
+  }
+}));

package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -3,30 +3,10 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["width", "height"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import { ChartContainer } from '../ChartContainer';
 import { useChartContainerDimensions } from './useChartContainerDimensions';
+import { ResizableContainer } from './ResizableContainer';
 import { jsx as _jsx } from "react/jsx-runtime";
-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%'
-  }
-}));
 const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
   const {
       width: inWidth,
@@ -99,6 +79,11 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * An array of plugins defining how to preprocess data.
+   * If not provided, the container supports line, bar, scatter and pie charts.
+   */
+  plugins: PropTypes.arrayOf(PropTypes.object),
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
@@ -152,7 +137,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.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,
@@ -205,7 +190,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.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,
@@ -222,6 +207,29 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
+  })),
+  /**
+   * The configuration of the z-axes.
+   */
+  zAxis: PropTypes.arrayOf(PropTypes.shape({
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    id: PropTypes.string
   }))
 } : void 0;
 export { ResponsiveChartContainer };

package/modern/ScatterChart/ScatterChart.js

@@ -6,7 +6,7 @@ import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { ChartsAxis } from '../ChartsAxis';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
-import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
+import { ChartsOverlay } from '../ChartsOverlay';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsVoronoiHandler } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 import { ChartsGrid } from '../ChartsGrid';
@@ -302,7 +302,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -355,7 +355,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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/modern/ScatterChart/ScatterPlot.js

@@ -2,10 +2,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Scatter } from './Scatter';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import getColor from './getColor';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
+import { useScatterSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -23,7 +23,7 @@ function ScatterPlot(props) {
     slotProps,
     onItemClick
   } = props;
-  const seriesData = React.useContext(SeriesContext).scatter;
+  const seriesData = useScatterSeries();
   const axisData = React.useContext(CartesianContext);
   const {
     zAxis,

package/modern/ScatterChart/formatter.js

@@ -1,4 +1,4 @@
-import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
+import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
 const formatter = ({
   series,
   seriesOrder

package/modern/ScatterChart/getColor.js

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

package/modern/ScatterChart/plugin.js

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

package/modern/SparkLineChart/SparkLineChart.js

@@ -27,6 +27,7 @@ const SPARKLINE_DEFAULT_MARGIN = {
 const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props, ref) {
   const {
     xAxis,
+    yAxis,
     width,
     height,
     margin = SPARKLINE_DEFAULT_MARGIN,
@@ -73,6 +74,9 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       }, (_, index) => index),
       hideTooltip: xAxis === undefined
     }, xAxis)],
+    yAxis: [_extends({
+      id: DEFAULT_X_AXIS_KEY
+    }, yAxis)],
     colors: colors,
     sx: sx,
     disableAxisListener: (!showTooltip || tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
@@ -233,7 +237,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   width: PropTypes.number,
   /**
    * The xAxis configuration.
-   * Notice it is a single configuration object, not an array of configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
    */
   xAxis: PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -265,7 +269,59 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.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,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    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']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func
+  }),
+  /**
+   * The yAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  yAxis: PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    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]),
+    position: PropTypes.oneOf(['left', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,

package/modern/context/CartesianContextProvider.js

@@ -1,31 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { scaleBand, scalePoint } from 'd3-scale';
-import { getExtremumX as getBarExtremumX, getExtremumY as getBarExtremumY } from '../BarChart/extremums';
-import { getExtremumX as getScatterExtremumX, getExtremumY as getScatterExtremumY } from '../ScatterChart/extremums';
-import { getExtremumX as getLineExtremumX, getExtremumY as getLineExtremumY } from '../LineChart/extremums';
 import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
 import { getScale } from '../internals/getScale';
-import { SeriesContext } from './SeriesContextProvider';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import { getTickNumber } from '../hooks/useTicks';
 import { useDrawingArea } from '../hooks/useDrawingArea';
 import { getColorScale, getOrdinalColorScale } from '../internals/colorScale';
+import { useSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
-
-// TODO: those might be better placed in a distinct file
-const xExtremumGetters = {
-  bar: getBarExtremumX,
-  scatter: getScatterExtremumX,
-  line: getLineExtremumX
-};
-const yExtremumGetters = {
-  bar: getBarExtremumY,
-  scatter: getScatterExtremumY,
-  line: getLineExtremumY
-};
 export const CartesianContext = /*#__PURE__*/React.createContext({
   xAxis: {},
   yAxis: {},
@@ -40,9 +25,11 @@ function CartesianContextProvider(props) {
     xAxis: inXAxis,
     yAxis: inYAxis,
     dataset,
+    xExtremumGetters,
+    yExtremumGetters,
     children
   } = props;
-  const formattedSeries = React.useContext(SeriesContext);
+  const formattedSeries = useSeries();
   const drawingArea = useDrawingArea();
   const xAxis = React.useMemo(() => inXAxis?.map(axisConfig => {
     const dataKey = axisConfig.dataKey;
@@ -72,11 +59,11 @@ function CartesianContextProvider(props) {
     const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis) => {
       const getter = getters[chartType];
       const series = formattedSeries[chartType]?.series ?? {};
-      const [minChartTypeData, maxChartTypeData] = getter({
+      const [minChartTypeData, maxChartTypeData] = getter?.({
         series,
         axis,
         isDefaultAxis
-      });
+      }) ?? [null, null];
       const [minData, maxData] = acc;
       if (minData === null || maxData === null) {
         return [minChartTypeData, maxChartTypeData];
@@ -213,7 +200,7 @@ function CartesianContextProvider(props) {
         id
       }) => id)
     };
-  }, [drawingArea.height, drawingArea.left, drawingArea.top, drawingArea.width, formattedSeries, xAxis, yAxis]);
+  }, [drawingArea.height, drawingArea.left, drawingArea.top, drawingArea.width, formattedSeries, xAxis, xExtremumGetters, yAxis, yExtremumGetters]);
 
   // @ts-ignore
   return /*#__PURE__*/_jsx(CartesianContext.Provider, {

package/modern/context/ColorProvider.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ColorContext = /*#__PURE__*/React.createContext({});
+if (process.env.NODE_ENV !== 'production') {
+  ColorContext.displayName = 'ColorContext';
+}
+export function ColorProvider(props) {
+  const {
+    colorProcessors,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx(ColorContext.Provider, {
+    value: colorProcessors,
+    children: children
+  });
+}

package/modern/context/DrawingProvider.js

@@ -20,7 +20,10 @@ if (process.env.NODE_ENV !== 'production') {
   DrawingContext.displayName = 'DrawingContext';
 }
 export const SvgContext = /*#__PURE__*/React.createContext({
-  current: null
+  isInitialized: false,
+  data: {
+    current: null
+  }
 });
 if (process.env.NODE_ENV !== 'production') {
   SvgContext.displayName = 'SvgContext';
@@ -38,8 +41,12 @@ export function DrawingProvider(props) {
   const value = React.useMemo(() => _extends({
     chartId: chartId ?? ''
   }, drawingArea), [chartId, drawingArea]);
+  const refValue = React.useMemo(() => ({
+    isInitialized: true,
+    data: svgRef
+  }), [svgRef]);
   return /*#__PURE__*/_jsx(SvgContext.Provider, {
-    value: svgRef,
+    value: refValue,
     children: /*#__PURE__*/_jsx(DrawingContext.Provider, {
       value: value,
       children: children

package/modern/context/HighlightedProvider/HighlightedContext.js

@@ -18,11 +18,14 @@ import * as React from 'react';
  */
 
 export const HighlightedContext = /*#__PURE__*/React.createContext({
-  highlightedItem: null,
-  setHighlighted: () => {},
-  clearHighlighted: () => {},
-  isHighlighted: () => false,
-  isFaded: () => false
+  isInitialized: false,
+  data: {
+    highlightedItem: null,
+    setHighlighted: () => {},
+    clearHighlighted: () => {},
+    isHighlighted: () => false,
+    isFaded: () => false
+  }
 });
 if (process.env.NODE_ENV !== 'production') {
   HighlightedContext.displayName = 'HighlightedContext';