@mui/x-charts 7.12.0 → 7.12.1

package/esm/BarChart/BarPlot.js

@@ -12,7 +12,7 @@ import { BarClipPath } from './BarClipPath';
 import { BarLabelPlot } from './BarLabel/BarLabelPlot';
 import { checkScaleErrors } from './checkScaleErrors';
 import { useBarSeries } from '../hooks/useSeries';
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -22,7 +22,6 @@ import { useBarSeries } from '../hooks/useSeries';
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,

package/esm/BarChart/getColor.js

@@ -1,4 +1,4 @@
-export default function getColor(series, xAxis, yAxis) {
+const getColor = (series, xAxis, yAxis) => {
   const verticalLayout = series.layout === 'vertical';
   const bandColorScale = verticalLayout ? xAxis?.colorScale : yAxis?.colorScale;
   const valueColorScale = verticalLayout ? yAxis?.colorScale : xAxis?.colorScale;
@@ -24,4 +24,5 @@ export default function getColor(series, xAxis, yAxis) {
     };
   }
   return () => series.color;
-}
+};
+export default getColor;

package/esm/ChartContainer/ChartContainer.js

@@ -4,26 +4,26 @@ import PropTypes from 'prop-types';
 import { DrawingProvider } from '../context/DrawingProvider';
 import { SeriesProvider } from '../context/SeriesProvider';
 import { InteractionProvider } from '../context/InteractionProvider';
-import { ColorProvider } from '../context/ColorProvider';
 import { ChartsSurface } from '../ChartsSurface';
 import { CartesianContextProvider } from '../context/CartesianProvider';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
 import { HighlightedProvider, ZAxisContextProvider } from '../context';
+import { PluginProvider } from '../context/PluginProvider';
 import { useChartContainerProps } from './useChartContainerProps';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
     children,
     drawingProviderProps,
-    colorProviderProps,
     seriesProviderProps,
     cartesianContextProps,
     zAxisContextProps,
     highlightedProviderProps,
-    chartsSurfaceProps
+    chartsSurfaceProps,
+    pluginProviderProps
   } = useChartContainerProps(props, ref);
   return /*#__PURE__*/_jsx(DrawingProvider, _extends({}, drawingProviderProps, {
-    children: /*#__PURE__*/_jsx(ColorProvider, _extends({}, colorProviderProps, {
+    children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
       children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
         children: /*#__PURE__*/_jsx(CartesianContextProvider, _extends({}, cartesianContextProps, {
           children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {

package/esm/ChartContainer/useChartContainerProps.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children"];
-import { useChartContainerHooks } from './useChartContainerHooks';
+import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
 import { useDefaultizeAxis } from './useDefaultizeAxis';
+import { useReducedMotion } from '../hooks/useReducedMotion';
 export const useChartContainerProps = (props, ref) => {
   const {
       width,
@@ -24,14 +26,10 @@ export const useChartContainerProps = (props, ref) => {
       children
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    svgRef,
-    chartSurfaceRef,
-    xExtremumGetters,
-    yExtremumGetters,
-    seriesFormatters,
-    colorProcessors
-  } = useChartContainerHooks(ref, plugins);
+  const svgRef = React.useRef(null);
+  const chartSurfaceRef = useForkRef(ref, svgRef);
+  useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
+
   const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis);
   const drawingProviderProps = {
     width,
@@ -39,21 +37,18 @@ export const useChartContainerProps = (props, ref) => {
     margin,
     svgRef
   };
-  const colorProviderProps = {
-    colorProcessors
+  const pluginProviderProps = {
+    plugins
   };
   const seriesProviderProps = {
     series,
     colors,
-    dataset,
-    seriesFormatters
+    dataset
   };
   const cartesianContextProps = {
     xAxis: defaultizedXAxis,
     yAxis: defaultizedYAxis,
-    dataset,
-    xExtremumGetters,
-    yExtremumGetters
+    dataset
   };
   const zAxisContextProps = {
     zAxis,
@@ -75,12 +70,12 @@ export const useChartContainerProps = (props, ref) => {
   return {
     children,
     drawingProviderProps,
-    colorProviderProps,
     seriesProviderProps,
     cartesianContextProps,
     zAxisContextProps,
     highlightedProviderProps,
     chartsSurfaceProps,
+    pluginProviderProps,
     xAxis: defaultizedXAxis,
     yAxis: defaultizedYAxis
   };

package/esm/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -4,7 +4,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
-import { useColorProcessor } from '../hooks/useColor';
+import { useColorProcessor } from '../context/PluginProvider/useColorProcessor';
 import { isCartesianSeriesType } from '../internals/isCartesian';
 import { useSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/ChartsTooltip/ChartsItemTooltipContent.js

@@ -4,7 +4,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import { DefaultChartsItemTooltipContent } from './DefaultChartsItemTooltipContent';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
-import { useColorProcessor } from '../hooks/useColor';
+import { useColorProcessor } from '../context/PluginProvider/useColorProcessor';
 import { useSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**

package/esm/LineChart/getColor.js

@@ -1,4 +1,4 @@
-export default function getColor(series, xAxis, yAxis) {
+const getColor = (series, xAxis, yAxis) => {
   const yColorScale = yAxis?.colorScale;
   const xColorScale = xAxis?.colorScale;
   if (yColorScale) {
@@ -22,4 +22,5 @@ export default function getColor(series, xAxis, yAxis) {
     };
   }
   return () => series.color;
-}
+};
+export default getColor;

package/esm/PieChart/getColor.js

@@ -1,5 +1,6 @@
-export default function getColor(series) {
+const getColor = series => {
   return dataIndex => {
     return series.data[dataIndex].color;
   };
-}
+};
+export default getColor;

package/esm/ScatterChart/getColor.js

@@ -1,4 +1,4 @@
-export default function getColor(series, xAxis, yAxis, zAxis) {
+const getColor = (series, xAxis, yAxis, zAxis) => {
   const zColorScale = zAxis?.colorScale;
   const yColorScale = yAxis?.colorScale;
   const xColorScale = xAxis?.colorScale;
@@ -39,4 +39,5 @@ export default function getColor(series, xAxis, yAxis, zAxis) {
     };
   }
   return () => series.color;
-}
+};
+export default getColor;

package/esm/context/CartesianProvider/CartesianProvider.js

@@ -3,18 +3,20 @@ import { useDrawingArea } from '../../hooks/useDrawingArea';
 import { useSeries } from '../../hooks/useSeries';
 import { CartesianContext } from './CartesianContext';
 import { computeValue } from './computeValue';
+import { useXExtremumGetter } from '../PluginProvider/useXExtremumGetter';
+import { useYExtremumGetter } from '../PluginProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 function CartesianContextProvider(props) {
   const {
     xAxis,
     yAxis,
     dataset,
-    xExtremumGetters,
-    yExtremumGetters,
     children
   } = props;
   const formattedSeries = useSeries();
   const drawingArea = useDrawingArea();
+  const xExtremumGetters = useXExtremumGetter();
+  const yExtremumGetters = useYExtremumGetter();
   const xValues = React.useMemo(() => computeValue({
     drawingArea,
     formattedSeries,

package/esm/context/PluginProvider/Plugin.types.js

@@ -0,0 +1 @@
+export {};

package/esm/context/PluginProvider/PluginContext.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export const PluginContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {
+    colorProcessors: {},
+    seriesFormatters: {},
+    xExtremumGetters: {},
+    yExtremumGetters: {}
+  }
+});
+if (process.env.NODE_ENV !== 'production') {
+  PluginContext.displayName = 'PluginContext';
+}

package/esm/context/PluginProvider/PluginProvider.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { PluginContext } from './PluginContext';
+import { mergePlugins } from './mergePlugins';
+import { jsx as _jsx } from "react/jsx-runtime";
+function PluginProvider(props) {
+  const {
+    children,
+    plugins
+  } = props;
+  const formattedSeries = React.useMemo(() => ({
+    isInitialized: true,
+    data: mergePlugins(plugins)
+  }), [plugins]);
+  return /*#__PURE__*/_jsx(PluginContext.Provider, {
+    value: formattedSeries,
+    children: children
+  });
+}
+export { PluginProvider };

package/esm/context/PluginProvider/SeriesFormatter.types.js

@@ -0,0 +1 @@
+export {};

package/esm/context/PluginProvider/index.js

@@ -0,0 +1,10 @@
+export * from './PluginProvider';
+export * from './Plugin.types';
+export * from './PluginContext';
+export * from './ColorProcessor.types';
+export * from './SeriesFormatter.types';
+export * from './ExtremumGetter.types';
+export * from './useColorProcessor';
+export * from './useSeriesFormatter';
+export * from './useXExtremumGetter';
+export * from './useYExtremumGetter';

package/esm/context/PluginProvider/mergePlugins.js

@@ -0,0 +1,30 @@
+import { plugin as barPlugin } from '../../BarChart/plugin';
+import { plugin as scatterPlugin } from '../../ScatterChart/plugin';
+import { plugin as linePlugin } from '../../LineChart/plugin';
+import { plugin as piePlugin } from '../../PieChart/plugin';
+export const defaultPlugins = [barPlugin, scatterPlugin, linePlugin, piePlugin];
+export function mergePlugins(plugins) {
+  const defaultizedPlugins = plugins ?? defaultPlugins;
+  const seriesFormatters = {};
+  const colorProcessors = {};
+  const xExtremumGetters = {};
+  const yExtremumGetters = {};
+  for (let i = 0; i < defaultizedPlugins.length; i += 1) {
+    const plugin = defaultizedPlugins[i];
+    const seriesType = plugin.seriesType;
+    seriesFormatters[seriesType] = plugin.seriesFormatter;
+    colorProcessors[seriesType] = plugin.colorProcessor;
+    if (plugin.xExtremumGetter) {
+      xExtremumGetters[seriesType] = plugin.xExtremumGetter;
+    }
+    if (plugin.yExtremumGetter) {
+      yExtremumGetters[seriesType] = plugin.yExtremumGetter;
+    }
+  }
+  return {
+    seriesFormatters,
+    colorProcessors,
+    xExtremumGetters,
+    yExtremumGetters
+  };
+}

package/esm/context/PluginProvider/useColorProcessor.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { PluginContext } from './PluginContext';
+export function useColorProcessor(seriesType) {
+  const {
+    isInitialized,
+    data
+  } = React.useContext(PluginContext);
+  if (!isInitialized) {
+    throw new Error(['MUI X: Could not find the plugin context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  if (!seriesType) {
+    return data.colorProcessors;
+  }
+  return data.colorProcessors[seriesType];
+}

package/esm/context/PluginProvider/useSeriesFormatter.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { PluginContext } from './PluginContext';
+export function useSeriesFormatter(seriesType) {
+  const {
+    isInitialized,
+    data
+  } = React.useContext(PluginContext);
+  if (!isInitialized) {
+    throw new Error(['MUI X: Could not find the plugin context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  if (!seriesType) {
+    return data.seriesFormatters;
+  }
+  return data.seriesFormatters[seriesType];
+}

package/esm/context/PluginProvider/useXExtremumGetter.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { PluginContext } from './PluginContext';
+export function useXExtremumGetter(seriesType) {
+  const {
+    isInitialized,
+    data
+  } = React.useContext(PluginContext);
+  if (!isInitialized) {
+    throw new Error(['MUI X: Could not find the plugin context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  if (!seriesType) {
+    return data.xExtremumGetters;
+  }
+  return data.xExtremumGetters[seriesType];
+}

package/esm/context/PluginProvider/useYExtremumGetter.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { PluginContext } from './PluginContext';
+export function useYExtremumGetter(seriesType) {
+  const {
+    isInitialized,
+    data
+  } = React.useContext(PluginContext);
+  if (!isInitialized) {
+    throw new Error(['MUI X: Could not find the plugin context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  if (!seriesType) {
+    return data.yExtremumGetters;
+  }
+  return data.yExtremumGetters[seriesType];
+}

package/esm/context/SeriesProvider/SeriesProvider.js

@@ -3,15 +3,16 @@ import { useTheme } from '@mui/material/styles';
 import { blueberryTwilightPalette } from '../../colorPalettes';
 import { SeriesContext } from './SeriesContext';
 import { preprocessSeries } from './processSeries';
+import { useSeriesFormatter } from '../PluginProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 function SeriesProvider(props) {
   const {
     series,
     dataset,
     colors = blueberryTwilightPalette,
-    seriesFormatters,
     children
   } = props;
+  const seriesFormatters = useSeriesFormatter();
   const theme = useTheme();
   const formattedSeries = React.useMemo(() => ({
     isInitialized: true,

package/esm/internals/index.js

@@ -25,10 +25,10 @@ export * from './isDefined';
 
 export * from '../context/CartesianProvider';
 export * from '../context/DrawingProvider';
-export * from '../context/ColorProvider';
 export * from '../context/InteractionProvider';
 export * from '../context/SeriesProvider';
 export * from '../context/ZAxisContextProvider';
+export * from '../context/PluginProvider';
 // series configuration
 export * from '../models/seriesType/config';
 export * from '../models/seriesType/common';

package/esm/models/index.js

@@ -1,5 +1,4 @@
 export * from './seriesType';
 export * from './layout';
 export * from './stacking';
-export * from './plugin';
 export {};

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.12.0
+ * @mui/x-charts v7.12.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/colorScale.d.ts

@@ -2,4 +2,4 @@ import { ScaleOrdinal } from '@mui/x-charts-vendor/d3-scale';
 import { ContinuousColorConfig, PiecewiseColorConfig, OrdinalColorConfig } from '../models/colorMapping';
 export declare function getSequentialColorScale<Value extends number | Date>(config: ContinuousColorConfig<Value> | PiecewiseColorConfig<Value>): import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<Value, string, never> | import("@mui/x-charts-vendor/d3-scale").ScaleSequential<string, never>;
 export declare function getOrdinalColorScale<Value extends number | Date | string>(config: OrdinalColorConfig<Value>): ScaleOrdinal<Value, string, null | string> | ScaleOrdinal<number, string, null | string>;
-export declare function getColorScale(config: ContinuousColorConfig | PiecewiseColorConfig | OrdinalColorConfig): import("@mui/x-charts-vendor/d3-scale").ScaleSequential<string, never> | ScaleOrdinal<number, string, string | null> | ScaleOrdinal<string | number | Date, string, string | null> | import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<number | Date, string, never>;
+export declare function getColorScale(config: ContinuousColorConfig | PiecewiseColorConfig | OrdinalColorConfig): ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | import("@mui/x-charts-vendor/d3-scale").ScaleSequential<string, never> | import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<number | Date, string, never>;

package/internals/index.d.ts

@@ -17,10 +17,10 @@ export * from './getSVGPoint';
 export * from './isDefined';
 export * from '../context/CartesianProvider';
 export * from '../context/DrawingProvider';
-export * from '../context/ColorProvider';
 export * from '../context/InteractionProvider';
 export * from '../context/SeriesProvider';
 export * from '../context/ZAxisContextProvider';
+export * from '../context/PluginProvider';
 export type * from '../context/context.types';
 export * from '../models/seriesType/config';
 export * from '../models/seriesType/common';

package/internals/index.js

@@ -197,18 +197,6 @@ Object.keys(_DrawingProvider).forEach(function (key) {
     }
   });
 });
-var _ColorProvider = require("../context/ColorProvider");
-Object.keys(_ColorProvider).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ColorProvider[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ColorProvider[key];
-    }
-  });
-});
 var _InteractionProvider = require("../context/InteractionProvider");
 Object.keys(_InteractionProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -245,6 +233,18 @@ Object.keys(_ZAxisContextProvider).forEach(function (key) {
     }
   });
 });
+var _PluginProvider = require("../context/PluginProvider");
+Object.keys(_PluginProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PluginProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PluginProvider[key];
+    }
+  });
+});
 var _config = require("../models/seriesType/config");
 Object.keys(_config).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/models/index.d.ts

@@ -1,5 +1,4 @@
 export * from './seriesType';
 export * from './layout';
 export * from './stacking';
-export * from './plugin';
 export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, } from './axis';

package/models/index.js

@@ -35,15 +35,4 @@ Object.keys(_stacking).forEach(function (key) {
       return _stacking[key];
     }
   });
-});
-var _plugin = require("./plugin");
-Object.keys(_plugin).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _plugin[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _plugin[key];
-    }
-  });
 });

package/models/seriesType/config.d.ts

@@ -2,11 +2,7 @@ import { ScatterSeriesType, DefaultizedScatterSeriesType, ScatterItemIdentifier
 import { LineSeriesType, DefaultizedLineSeriesType, LineItemIdentifier } from './line';
 import { BarItemIdentifier, BarSeriesType, DefaultizedBarSeriesType } from './bar';
 import { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType } from './pie';
-import { AxisConfig } from '../axis';
 import { DefaultizedProps, MakeOptional } from '../helpers';
-import { StackingGroupsType } from '../../internals/stackSeries';
-import { SeriesId } from './common';
-import { LegendItemParams } from '../../ChartsLegend/chartsLegend.types';
 export interface ChartsSeriesConfig {
     bar: {
         /**
@@ -79,29 +75,7 @@ export type ChartSeriesDefaultized<T extends ChartSeriesType> = ChartsSeriesConf
     stackedData: [number, number][];
 } : ChartsSeriesConfig[T]['series'];
 export type ChartItemIdentifier<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
-type ExtremumGetterParams<T extends ChartSeriesType> = {
-    series: Record<SeriesId, ChartSeries<T>>;
-    axis: AxisConfig;
-    isDefaultAxis: boolean;
-};
-export type ExtremumGetterResult = [number, number] | [null, null];
-export type ExtremumGetter<T extends ChartSeriesType> = (params: ExtremumGetterParams<T>) => ExtremumGetterResult;
-export type FormatterParams<T extends ChartSeriesType> = {
-    series: Record<SeriesId, ChartsSeriesConfig[T]['seriesInput']>;
-    seriesOrder: SeriesId[];
-};
-export type FormatterResult<T extends ChartSeriesType> = {
-    series: Record<SeriesId, ChartSeriesDefaultized<T>>;
-    seriesOrder: SeriesId[];
-} & (ChartsSeriesConfig[T] extends {
-    canBeStacked: true;
-} ? {
-    stackingGroups: StackingGroupsType;
-} : {});
 export type DatasetElementType<T> = {
     [key: string]: T;
 };
 export type DatasetType<T = number | string | Date | null | undefined> = DatasetElementType<T>[];
-export type Formatter<T extends ChartSeriesType> = (params: FormatterParams<T>, dataset?: DatasetType) => FormatterResult<T>;
-export type LegendGetter<T extends ChartSeriesType> = (series: FormatterResult<T>) => LegendItemParams[];
-export {};

package/modern/BarChart/BarPlot.js

@@ -12,7 +12,7 @@ import { BarClipPath } from './BarClipPath';
 import { BarLabelPlot } from './BarLabel/BarLabelPlot';
 import { checkScaleErrors } from './checkScaleErrors';
 import { useBarSeries } from '../hooks/useSeries';
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -22,7 +22,6 @@ import { useBarSeries } from '../hooks/useSeries';
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,

package/modern/BarChart/getColor.js

@@ -1,4 +1,4 @@
-export default function getColor(series, xAxis, yAxis) {
+const getColor = (series, xAxis, yAxis) => {
   const verticalLayout = series.layout === 'vertical';
   const bandColorScale = verticalLayout ? xAxis?.colorScale : yAxis?.colorScale;
   const valueColorScale = verticalLayout ? yAxis?.colorScale : xAxis?.colorScale;
@@ -24,4 +24,5 @@ export default function getColor(series, xAxis, yAxis) {
     };
   }
   return () => series.color;
-}
+};
+export default getColor;

package/modern/ChartContainer/ChartContainer.js

@@ -4,26 +4,26 @@ import PropTypes from 'prop-types';
 import { DrawingProvider } from '../context/DrawingProvider';
 import { SeriesProvider } from '../context/SeriesProvider';
 import { InteractionProvider } from '../context/InteractionProvider';
-import { ColorProvider } from '../context/ColorProvider';
 import { ChartsSurface } from '../ChartsSurface';
 import { CartesianContextProvider } from '../context/CartesianProvider';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
 import { HighlightedProvider, ZAxisContextProvider } from '../context';
+import { PluginProvider } from '../context/PluginProvider';
 import { useChartContainerProps } from './useChartContainerProps';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
     children,
     drawingProviderProps,
-    colorProviderProps,
     seriesProviderProps,
     cartesianContextProps,
     zAxisContextProps,
     highlightedProviderProps,
-    chartsSurfaceProps
+    chartsSurfaceProps,
+    pluginProviderProps
   } = useChartContainerProps(props, ref);
   return /*#__PURE__*/_jsx(DrawingProvider, _extends({}, drawingProviderProps, {
-    children: /*#__PURE__*/_jsx(ColorProvider, _extends({}, colorProviderProps, {
+    children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
       children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
         children: /*#__PURE__*/_jsx(CartesianContextProvider, _extends({}, cartesianContextProps, {
           children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {