@mui/x-charts 7.10.0 → 7.11.1

package/PieChart/PieChart.js

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PieChart = PieChart;
+exports.PieChart = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ResponsiveChartContainer = require("../ResponsiveChartContainer");
@@ -18,6 +19,7 @@ var _PiePlot = require("./PiePlot");
 var _useIsRTL = require("../internals/useIsRTL");
 var _ChartsOverlay = require("../ChartsOverlay");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "tooltip", "axisHighlight", "skipAnimation", "legend", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
 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; }
 const defaultMargin = {
@@ -43,37 +45,39 @@ const defaultRTLMargin = {
  *
  * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
  */
-function PieChart(props) {
+const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieChart(props, ref) {
   const {
-    xAxis,
-    yAxis,
-    series,
-    width,
-    height,
-    margin: marginProps,
-    colors,
-    sx,
-    tooltip = {
-      trigger: 'item'
-    },
-    axisHighlight = {
-      x: 'none',
-      y: 'none'
-    },
-    skipAnimation,
-    legend: legendProps,
-    topAxis = null,
-    leftAxis = null,
-    rightAxis = null,
-    bottomAxis = null,
-    children,
-    slots,
-    slotProps,
-    onItemClick,
-    loading,
-    highlightedItem,
-    onHighlightChange
-  } = props;
+      xAxis,
+      yAxis,
+      series,
+      width,
+      height,
+      margin: marginProps,
+      colors,
+      sx,
+      tooltip = {
+        trigger: 'item'
+      },
+      axisHighlight = {
+        x: 'none',
+        y: 'none'
+      },
+      skipAnimation,
+      legend: legendProps,
+      topAxis = null,
+      leftAxis = null,
+      rightAxis = null,
+      bottomAxis = null,
+      children,
+      slots,
+      slotProps,
+      onItemClick,
+      loading,
+      highlightedItem,
+      onHighlightChange,
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isRTL = (0, _useIsRTL.useIsRTL)();
   const margin = (0, _extends2.default)({}, isRTL ? defaultRTLMargin : defaultMargin, marginProps);
   const legend = (0, _extends2.default)({
@@ -83,7 +87,8 @@ function PieChart(props) {
       horizontal: isRTL ? 'left' : 'right'
     }
   }, legendProps);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, (0, _extends2.default)({}, other, {
+    ref: ref,
     series: series.map(s => (0, _extends2.default)({
       type: 'pie'
     }, s)),
@@ -101,6 +106,7 @@ function PieChart(props) {
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     highlightedItem: highlightedItem,
     onHighlightChange: onHighlightChange,
+    className: className,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
@@ -124,8 +130,8 @@ function PieChart(props) {
       slots: slots,
       slotProps: slotProps
     })), children]
-  });
-}
+  }));
+});
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/PieChart/PiePlot.js

@@ -10,7 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _DrawingProvider = require("../context/DrawingProvider");
 var _PieArcPlot = require("./PieArcPlot");
 var _PieArcLabelPlot = require("./PieArcLabelPlot");
-var _utils = require("../internals/utils");
+var _getPercentageValue = require("../internals/getPercentageValue");
 var _getPieCoordinates = require("./getPieCoordinates");
 var _useSeries = require("../hooks/useSeries");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -71,8 +71,8 @@ function PiePlot(props) {
         width,
         height
       });
-      const outerRadius = (0, _utils.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
-      const innerRadius = (0, _utils.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
+      const outerRadius = (0, _getPercentageValue.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
+      const innerRadius = (0, _getPercentageValue.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
         transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcPlot.PieArcPlot, {
@@ -114,9 +114,9 @@ function PiePlot(props) {
         width,
         height
       });
-      const outerRadius = (0, _utils.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
-      const innerRadius = (0, _utils.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
-      const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : (0, _utils.getPercentageValue)(arcLabelRadiusParam, availableRadius);
+      const outerRadius = (0, _getPercentageValue.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
+      const innerRadius = (0, _getPercentageValue.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
+      const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : (0, _getPercentageValue.getPercentageValue)(arcLabelRadiusParam, availableRadius);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
         transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcLabelPlot.PieArcLabelPlot, {

package/PieChart/getPieCoordinates.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPieCoordinates = getPieCoordinates;
-var _utils = require("../internals/utils");
+var _getPercentageValue = require("../internals/getPercentageValue");
 function getPieCoordinates(series, drawing) {
   const {
     height,
@@ -15,8 +15,8 @@ function getPieCoordinates(series, drawing) {
     cy: cyParam
   } = series;
   const availableRadius = Math.min(width, height) / 2;
-  const cx = (0, _utils.getPercentageValue)(cxParam ?? '50%', width);
-  const cy = (0, _utils.getPercentageValue)(cyParam ?? '50%', height);
+  const cx = (0, _getPercentageValue.getPercentageValue)(cxParam ?? '50%', width);
+  const cy = (0, _getPercentageValue.getPercentageValue)(cyParam ?? '50%', height);
   return {
     cx,
     cy,

package/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -6,35 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ResponsiveChartContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ChartContainer = require("../ChartContainer");
-var _useChartContainerDimensions = require("./useChartContainerDimensions");
 var _ResizableContainer = require("./ResizableContainer");
+var _useResponsiveChartContainerProps = require("./useResponsiveChartContainerProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["width", "height"];
 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; }
 const ResponsiveChartContainer = exports.ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
   const {
-      width: inWidth,
-      height: inHeight
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const [containerRef, width, height] = (0, _useChartContainerDimensions.useChartContainerDimensions)(inWidth, inHeight);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResizableContainer.ResizableContainer, {
-    ref: containerRef,
-    ownerState: {
-      width: inWidth,
-      height: inHeight
-    },
-    children: width && height ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContainer.ChartContainer, (0, _extends2.default)({}, other, {
-      width: width,
-      height: height,
-      ref: ref
-    })) : null
-  });
+    hasIntrinsicSize,
+    chartContainerProps,
+    resizableChartContainerProps
+  } = (0, _useResponsiveChartContainerProps.useResponsiveChartContainerProps)(props, ref);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResizableContainer.ResizableContainer, (0, _extends2.default)({}, resizableChartContainerProps, {
+    children: hasIntrinsicSize ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContainer.ChartContainer, (0, _extends2.default)({}, chartContainerProps)) : null
+  }));
 });
 process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
   // ----------------------------- Warning --------------------------------

package/ResponsiveChartContainer/useChartContainerDimensions.d.ts

@@ -1,2 +1,6 @@
 import * as React from 'react';
-export declare const useChartContainerDimensions: (inWidth?: number, inHeight?: number) => [React.RefObject<HTMLDivElement>, number, number];
+export declare const useChartContainerDimensions: (inWidth?: number, inHeight?: number) => {
+    containerRef: React.MutableRefObject<null>;
+    width: number;
+    height: number;
+};

package/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -11,8 +11,8 @@ var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
 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; }
 const useChartContainerDimensions = (inWidth, inHeight) => {
-  const rootRef = React.useRef(null);
   const displayError = React.useRef(false);
+  const rootRef = React.useRef(null);
   const [width, setWidth] = React.useState(0);
   const [height, setHeight] = React.useState(0);
 
@@ -63,14 +63,18 @@ const useChartContainerDimensions = (inWidth, inHeight) => {
   }, [computeSize, inHeight, inWidth]);
   if (process.env.NODE_ENV !== 'production') {
     if (displayError.current && inWidth === undefined && width === 0) {
-      console.error(`MUI X Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
+      console.error(`MUI X: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
       displayError.current = false;
     }
     if (displayError.current && inHeight === undefined && height === 0) {
-      console.error(`MUI X Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
+      console.error(`MUI X: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
       displayError.current = false;
     }
   }
-  return [rootRef, inWidth ?? width, inHeight ?? height];
+  return {
+    containerRef: rootRef,
+    width: inWidth ?? width,
+    height: inHeight ?? height
+  };
 };
 exports.useChartContainerDimensions = useChartContainerDimensions;

package/ResponsiveChartContainer/useResponsiveChartContainerProps.d.ts

@@ -0,0 +1,20 @@
+import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
+export declare const useResponsiveChartContainerProps: (props: ResponsiveChartContainerProps, ref: React.ForwardedRef<unknown>) => {
+    hasIntrinsicSize: number;
+    chartContainerProps: Omit<import("..").ChartsSurfaceProps & Omit<import("../internals").SeriesContextProviderProps, "seriesFormatters"> & Omit<import("../internals").DrawingProviderProps, "svgRef"> & Pick<import("../internals").CartesianContextProviderProps, "dataset"> & import("..").ZAxisContextProviderProps & import("..").HighlightedProviderProps, "children"> & {
+        xAxis?: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsXAxisProps>, "id">[];
+        yAxis?: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsYAxisProps>, "id">[];
+        children?: import("react").ReactNode;
+        plugins?: import("..").ChartsPluginType<import("../internals").ChartSeriesType>[];
+    } & {
+        ref: React.ForwardedRef<unknown>;
+    };
+    resizableChartContainerProps: {
+        ownerState: {
+            width: number | undefined;
+            height: number | undefined;
+        };
+        ref: import("react").MutableRefObject<null>;
+        className?: string;
+    };
+};

package/ResponsiveChartContainer/useResponsiveChartContainerProps.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResponsiveChartContainerProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _useChartContainerDimensions = require("./useChartContainerDimensions");
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis"];
+const useResponsiveChartContainerProps = (props, ref) => {
+  const {
+      width,
+      height,
+      margin,
+      children,
+      series,
+      colors,
+      dataset,
+      desc,
+      disableAxisListener,
+      highlightedItem,
+      onHighlightChange,
+      plugins,
+      sx,
+      title,
+      viewBox,
+      xAxis,
+      yAxis,
+      zAxis
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    containerRef,
+    width: dWidth,
+    height: dHeight
+  } = (0, _useChartContainerDimensions.useChartContainerDimensions)(width, height);
+  const resizableChartContainerProps = (0, _extends2.default)({}, other, {
+    ownerState: {
+      width,
+      height
+    },
+    ref: containerRef
+  });
+  const chartContainerProps = {
+    margin,
+    children,
+    series,
+    colors,
+    dataset,
+    desc,
+    disableAxisListener,
+    highlightedItem,
+    onHighlightChange,
+    plugins,
+    sx,
+    title,
+    viewBox,
+    xAxis,
+    yAxis,
+    zAxis,
+    width: dWidth,
+    height: dHeight,
+    ref
+  };
+  return {
+    hasIntrinsicSize: dWidth && dHeight,
+    chartContainerProps,
+    resizableChartContainerProps
+  };
+};
+exports.useResponsiveChartContainerProps = useResponsiveChartContainerProps;

package/ScatterChart/Scatter.js

@@ -36,10 +36,7 @@ function Scatter(props) {
     markerSize,
     onItemClick
   } = props;
-  const {
-    left,
-    width
-  } = (0, _useDrawingArea.useDrawingArea)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const {
     useVoronoiInteraction
   } = React.useContext(_InteractionProvider.InteractionContext);
@@ -52,15 +49,15 @@ function Scatter(props) {
   const cleanData = React.useMemo(() => {
     const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
     const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
-    const yRange = yScale.range();
-    const minYRange = Math.min(...yRange);
-    const maxYRange = Math.max(...yRange);
     const temp = [];
     for (let i = 0; i < series.data.length; i += 1) {
       const scatterPoint = series.data[i];
       const x = getXPosition(scatterPoint.x);
       const y = getYPosition(scatterPoint.y);
-      const isInRange = x >= left && x <= left + width && y >= minYRange && y <= maxYRange;
+      const isInRange = drawingArea.isPointInside({
+        x,
+        y
+      });
       const pointCtx = {
         type: 'scatter',
         seriesId: series.id,
@@ -85,7 +82,7 @@ function Scatter(props) {
       }
     }
     return temp;
-  }, [xScale, yScale, left, width, series.data, series.id, isHighlighted, isFaded, getInteractionItemProps, colorGetter, color]);
+  }, [xScale, yScale, drawingArea, series.data, series.id, isHighlighted, isFaded, getInteractionItemProps, colorGetter, color]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
       cx: 0,

package/ScatterChart/ScatterChart.js

@@ -50,7 +50,10 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     ref: ref
   }, chartContainerProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ZAxisContextProvider.ZAxisContextProvider, (0, _extends2.default)({}, zAxisProps, {
-      children: [!props.disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, (0, _extends2.default)({}, voronoiHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), props.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPlot.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), children]
+      children: [!props.disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, (0, _extends2.default)({}, voronoiHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), props.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        "data-drawing-container": true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPlot.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), children]
     }))
   }));
 });

package/ScatterChart/ScatterPlot.js

@@ -62,12 +62,15 @@ function ScatterPlot(props) {
         xAxisKey,
         yAxisKey,
         zAxisKey,
+        xAxisId,
+        yAxisId,
+        zAxisId,
         markerSize,
         color
       } = series[seriesId];
-      const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey ?? defaultXAxisId], yAxis[yAxisKey ?? defaultYAxisId], zAxis[zAxisKey ?? defaultZAxisId]);
-      const xScale = xAxis[xAxisKey ?? defaultXAxisId].scale;
-      const yScale = yAxis[yAxisKey ?? defaultYAxisId].scale;
+      const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId], yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId], zAxis[zAxisId ?? zAxisKey ?? defaultZAxisId]);
+      const xScale = xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId].scale;
+      const yScale = yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId].scale;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScatterItems, (0, _extends2.default)({
         xScale: xScale,
         yScale: yScale,

package/ScatterChart/extremums.js

@@ -19,7 +19,10 @@ const getExtremumX = params => {
     axis,
     isDefaultAxis
   } = params;
-  return Object.keys(series).filter(seriesId => series[seriesId].xAxisKey === axis.id || series[seriesId].xAxisKey === undefined && isDefaultAxis).reduce((acc, seriesId) => {
+  return Object.keys(series).filter(seriesId => {
+    const axisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey;
+    return axisId === axis.id || axisId === undefined && isDefaultAxis;
+  }).reduce((acc, seriesId) => {
     const seriesMinMax = series[seriesId].data.reduce((accSeries, {
       x
     }) => {
@@ -36,7 +39,10 @@ const getExtremumY = params => {
     axis,
     isDefaultAxis
   } = params;
-  return Object.keys(series).filter(seriesId => series[seriesId].yAxisKey === axis.id || series[seriesId].yAxisKey === undefined && isDefaultAxis).reduce((acc, seriesId) => {
+  return Object.keys(series).filter(seriesId => {
+    const axisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+    return axisId === axis.id || axisId === undefined && isDefaultAxis;
+  }).reduce((acc, seriesId) => {
     const seriesMinMax = series[seriesId].data.reduce((accSeries, {
       y
     }) => {

package/ScatterChart/useScatterChartProps.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useScatterChartProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "tooltip", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "legend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -15,34 +17,36 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
  */
 const useScatterChartProps = props => {
   const {
-    xAxis,
-    yAxis,
-    zAxis,
-    series,
-    tooltip,
-    axisHighlight,
-    voronoiMaxRadius,
-    disableVoronoi,
-    legend,
-    width,
-    height,
-    margin,
-    colors,
-    sx,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    onItemClick,
-    children,
-    slots,
-    slotProps,
-    loading,
-    highlightedItem,
-    onHighlightChange
-  } = props;
-  const chartContainerProps = {
+      xAxis,
+      yAxis,
+      zAxis,
+      series,
+      tooltip,
+      axisHighlight,
+      voronoiMaxRadius,
+      disableVoronoi,
+      legend,
+      width,
+      height,
+      margin,
+      colors,
+      sx,
+      grid,
+      topAxis,
+      leftAxis,
+      rightAxis,
+      bottomAxis,
+      onItemClick,
+      children,
+      slots,
+      slotProps,
+      loading,
+      highlightedItem,
+      onHighlightChange,
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const chartContainerProps = (0, _extends2.default)({}, other, {
     series: series.map(s => (0, _extends2.default)({
       type: 'scatter'
     }, s)),
@@ -54,8 +58,9 @@ const useScatterChartProps = props => {
     yAxis,
     sx,
     highlightedItem,
-    onHighlightChange
-  };
+    onHighlightChange,
+    className
+  });
   const zAxisProps = {
     zAxis
   };

package/SparkLineChart/SparkLineChart.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SparkLineChart = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _BarChart = require("../BarChart");
@@ -15,6 +16,7 @@ var _constants = require("../constants");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "colors", "sx", "showTooltip", "tooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
 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; }
 const SPARKLINE_DEFAULT_MARGIN = {
@@ -35,33 +37,35 @@ const SPARKLINE_DEFAULT_MARGIN = {
  */
 const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props, ref) {
   const {
-    xAxis,
-    yAxis,
-    width,
-    height,
-    margin = SPARKLINE_DEFAULT_MARGIN,
-    colors,
-    sx,
-    showTooltip,
-    tooltip,
-    showHighlight,
-    axisHighlight: inAxisHighlight,
-    children,
-    slots,
-    slotProps,
-    data,
-    plotType = 'line',
-    valueFormatter = value => value === null ? '' : value.toString(),
-    area,
-    curve = 'linear'
-  } = props;
+      xAxis,
+      yAxis,
+      width,
+      height,
+      margin = SPARKLINE_DEFAULT_MARGIN,
+      colors,
+      sx,
+      showTooltip,
+      tooltip,
+      showHighlight,
+      axisHighlight: inAxisHighlight,
+      children,
+      slots,
+      slotProps,
+      data,
+      plotType = 'line',
+      valueFormatter = value => value === null ? '' : value.toString(),
+      area,
+      curve = 'linear',
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const defaultXHighlight = showHighlight && plotType === 'bar' ? {
     x: 'band'
   } : {
     x: 'none'
   };
   const axisHighlight = (0, _extends2.default)({}, defaultXHighlight, inAxisHighlight);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, (0, _extends2.default)({}, other, {
     ref: ref,
     series: [(0, _extends2.default)({
       type: plotType,
@@ -75,6 +79,7 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
     width: width,
     height: height,
     margin: margin,
+    className: className,
     xAxis: [(0, _extends2.default)({
       id: _constants.DEFAULT_X_AXIS_KEY,
       scaleType: plotType === 'bar' ? 'band' : 'point',
@@ -113,7 +118,7 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
       slotProps: slotProps,
       slots: slots
     })), children]
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   // ----------------------------- Warning --------------------------------

package/context/CartesianProvider/CartesianContext.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Initializable } from '../context.types';
 import { AxisDefaultized, ScaleName, ChartsXAxisProps, ChartsYAxisProps, AxisId } from '../../models/axis';
 export type DefaultizedAxisConfig<AxisProps> = {
-    [axisKey: AxisId]: AxisDefaultized<ScaleName, any, AxisProps>;
+    [axisId: AxisId]: AxisDefaultized<ScaleName, any, AxisProps>;
 };
 export type CartesianContextState = {
     /**