@mui/x-charts 7.12.0 → 7.13.0

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/hooks/useTicks.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { isBandScale } from '../internals/isBandScale';
+import { isInfinity } from '../internals/isInfinity';
 export function getTickNumber(params) {
   const {
     tickMaxStep,
@@ -60,8 +61,10 @@ export function useTicks(options) {
         labelOffset: 0
       }));
     }
-    if (scale.domain().length === 0 || scale.domain()[0] === scale.domain()[1]) {
-      // The axis should not be visible, so ticks should also be hidden.
+    const domain = scale.domain();
+    // Skip axis rendering if no data is available
+    // - The domains contains Infinity for continuous scales.
+    if (domain.some(isInfinity)) {
       return [];
     }
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);

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/internals/isInfinity.js

@@ -0,0 +1,3 @@
+export function isInfinity(v) {
+  return typeof v === 'number' && !Number.isFinite(v);
+}

package/esm/models/index.js

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

package/hooks/useTicks.js

@@ -7,6 +7,7 @@ exports.getTickNumber = getTickNumber;
 exports.useTicks = useTicks;
 var React = _interopRequireWildcard(require("react"));
 var _isBandScale = require("../internals/isBandScale");
+var _isInfinity = require("../internals/isInfinity");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getTickNumber(params) {
@@ -69,8 +70,10 @@ function useTicks(options) {
         labelOffset: 0
       }));
     }
-    if (scale.domain().length === 0 || scale.domain()[0] === scale.domain()[1]) {
-      // The axis should not be visible, so ticks should also be hidden.
+    const domain = scale.domain();
+    // Skip axis rendering if no data is available
+    // - The domains contains Infinity for continuous scales.
+    if (domain.some(_isInfinity.isInfinity)) {
       return [];
     }
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.12.0
+ * @mui/x-charts v7.13.0
  *
  * @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/defaultizeColor.d.ts

@@ -72,6 +72,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     disableHighlight?: boolean;
     connectNulls?: boolean;
     stackOffset?: import("..").StackOffsetType;
+    baseline?: number | "min" | "max";
     id?: import(".").SeriesId;
     color: string;
     valueFormatter?: import(".").SeriesValueFormatter<number | null> | undefined;

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/internals/isInfinity.d.ts

@@ -0,0 +1 @@
+export declare function isInfinity(v: any): v is number;

package/internals/isInfinity.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isInfinity = isInfinity;
+function isInfinity(v) {
+  return typeof v === 'number' && !Number.isFinite(v);
+}

package/models/axis.d.ts

@@ -1,4 +1,5 @@
 import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint, ScaleOrdinal, ScaleSequential, ScaleThreshold } from '@mui/x-charts-vendor/d3-scale';
+import { SxProps } from '@mui/system';
 import { ChartsAxisClasses } from '../ChartsAxis/axisClasses';
 import type { TickParams } from '../hooks/useTicks';
 import { ChartsTextProps } from '../ChartsText';
@@ -112,6 +113,7 @@ export interface ChartsAxisProps extends TickParams {
      * @default {}
      */
     slotProps?: Partial<ChartsAxisSlotProps>;
+    sx?: SxProps;
 }
 export interface ChartsYAxisProps extends ChartsAxisProps {
     /**

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/models/seriesType/line.d.ts

@@ -62,6 +62,16 @@ export interface LineSeriesType extends CommonSeriesType<number | null>, Cartesi
      * @default 'none'
      */
     stackOffset?: StackOffsetType;
+    /**
+     * The value of the line at the base of the series area.
+     *
+     * - `'min'` the area will fill the space **under** the line.
+     * - `'max'` the area will fill the space **above** the line.
+     * - `number` the area will fill the space between this value and the line
+     *
+     * @default 0
+     */
+    baseline?: number | 'min' | 'max';
 }
 /**
  * An object that allows to identify a single line.

package/modern/BarChart/BarChart.js

@@ -273,6 +273,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
@@ -325,6 +326,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),

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/extremums.js

@@ -16,9 +16,11 @@ const getValueExtremum = params => {
     const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
     return yAxisId === axis.id || isDefaultAxis && yAxisId === undefined;
   }).reduce((acc, seriesId) => {
-    const [seriesMin, seriesMax] = series[seriesId].stackedData?.reduce((seriesAcc, values) => [Math.min(...values, ...(seriesAcc[0] === null ? [] : [seriesAcc[0]])), Math.max(...values, ...(seriesAcc[1] === null ? [] : [seriesAcc[1]]))], series[seriesId].stackedData[0]) ?? [null, null];
-    return [acc[0] === null ? seriesMin : Math.min(seriesMin, acc[0]), acc[1] === null ? seriesMax : Math.max(seriesMax, acc[1])];
-  }, [null, null]);
+    const [seriesMin, seriesMax] = series[seriesId].stackedData?.reduce((seriesAcc, values) => {
+      return [Math.min(...values, seriesAcc[0]), Math.max(...values, seriesAcc[1])];
+    }, [Infinity, -Infinity]) ?? [Infinity, -Infinity];
+    return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
+  }, [Infinity, -Infinity]);
 };
 export const getExtremumX = params => {
   // Notice that bar should be all horizontal or all vertical.

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,28 +4,28 @@ 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 { CartesianProvider } 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,
+    cartesianProviderProps,
     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(CartesianProvider, _extends({}, cartesianProviderProps, {
           children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
             children: /*#__PURE__*/_jsx(InteractionProvider, {
               children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
@@ -155,6 +155,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
@@ -207,6 +208,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),

package/modern/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 = {
+  const cartesianProviderProps = {
     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,
+    cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
     chartsSurfaceProps,
+    pluginProviderProps,
     xAxis: defaultizedXAxis,
     yAxis: defaultizedYAxis
   };

package/modern/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/modern/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/modern/ChartsTooltip/utils.js

@@ -47,8 +47,10 @@ export function useMouseTracker() {
     if (element === null) {
       return () => {};
     }
-    const handleOut = () => {
-      setMousePosition(null);
+    const handleOut = event => {
+      if (event.pointerType !== 'mouse') {
+        setMousePosition(null);
+      }
     };
     const handleMove = event => {
       setMousePosition({

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -15,6 +15,8 @@ import { getMinXTranslation } from '../internals/geometry';
 import { useMounted } from '../hooks/useMounted';
 import { useDrawingArea } from '../hooks/useDrawingArea';
 import { getWordsByLines } from '../internals/getWordsByLines';
+import { isInfinity } from '../internals/isInfinity';
+import { isBandScale } from '../internals/isBandScale';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -137,7 +139,8 @@ function ChartsXAxis(inProps) {
     tickInterval,
     tickLabelInterval,
     tickPlacement,
-    tickLabelPlacement
+    tickLabelPlacement,
+    sx
   } = defaultizedProps;
   const theme = useTheme();
   const classes = useUtilityClasses(_extends({}, defaultizedProps, {
@@ -199,15 +202,17 @@ function ChartsXAxis(inProps) {
     ownerState: {}
   });
   const domain = xScale.domain();
-  if (domain.length === 0 || domain[0] === domain[1]) {
-    // Skip axis rendering if
-    // - the data is empty (for band and point axis)
-    // - No data is associated to the axis (other scale types)
+  const ordinalAxis = isBandScale(xScale);
+  // Skip axis rendering if no data is available
+  // - The domain is an empty array for band/point scales.
+  // - The domains contains Infinity for continuous scales.
+  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(isInfinity)) {
     return null;
   }
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,
+    sx: sx,
     children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
       x1: left,
       x2: left + width,
@@ -305,6 +310,7 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * @default 'currentColor'
    */
   stroke: PropTypes.string,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * The font size of the axis ticks text.
    * @default 12