@mui/x-charts 7.10.0 → 7.11.1

package/esm/LineChart/useLineChartProps.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 /**
@@ -10,39 +12,41 @@ import { DEFAULT_X_AXIS_KEY } from '../constants';
  */
 export const useLineChartProps = props => {
   const {
-    xAxis,
-    yAxis,
-    series,
-    width,
-    height,
-    margin,
-    colors,
-    dataset,
-    sx,
-    tooltip,
-    onAxisClick,
-    onAreaClick,
-    onLineClick,
-    onMarkClick,
-    axisHighlight,
-    disableLineItemHighlight,
-    legend,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    children,
-    slots,
-    slotProps,
-    skipAnimation,
-    loading,
-    highlightedItem,
-    onHighlightChange
-  } = props;
+      xAxis,
+      yAxis,
+      series,
+      width,
+      height,
+      margin,
+      colors,
+      dataset,
+      sx,
+      tooltip,
+      onAxisClick,
+      onAreaClick,
+      onLineClick,
+      onMarkClick,
+      axisHighlight,
+      disableLineItemHighlight,
+      legend,
+      grid,
+      topAxis,
+      leftAxis,
+      rightAxis,
+      bottomAxis,
+      children,
+      slots,
+      slotProps,
+      skipAnimation,
+      loading,
+      highlightedItem,
+      onHighlightChange,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
   const clipPathId = `${id}-clip-path`;
-  const chartContainerProps = {
+  const chartContainerProps = _extends({}, other, {
     series: series.map(s => _extends({
       disableHighlight: !!disableLineItemHighlight,
       type: 'line'
@@ -63,8 +67,9 @@ export const useLineChartProps = props => {
     sx,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick
-  };
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    className
+  });
   const axisClickHandlerProps = {
     onAxisClick
   };

package/esm/PieChart/PieArc.js

@@ -73,6 +73,7 @@ function PieArc(props) {
       innerRadius: iR,
       outerRadius: oR
     })),
+    visibility: to([startAngle, endAngle], (sA, eA) => sA === eA ? 'hidden' : 'visible'),
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,

package/esm/PieChart/PieChart.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
@@ -34,37 +36,39 @@ const defaultRTLMargin = {
  *
  * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
  */
-function PieChart(props) {
+const 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 = _objectWithoutPropertiesLoose(props, _excluded);
   const isRTL = useIsRTL();
   const margin = _extends({}, isRTL ? defaultRTLMargin : defaultMargin, marginProps);
   const legend = _extends({
@@ -74,7 +78,8 @@ function PieChart(props) {
       horizontal: isRTL ? 'left' : 'right'
     }
   }, legendProps);
-  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({}, other, {
+    ref: ref,
     series: series.map(s => _extends({
       type: 'pie'
     }, s)),
@@ -92,6 +97,7 @@ function PieChart(props) {
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     highlightedItem: highlightedItem,
     onHighlightChange: onHighlightChange,
+    className: className,
     children: [/*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
@@ -115,8 +121,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/esm/PieChart/PiePlot.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { DrawingContext } from '../context/DrawingProvider';
 import { PieArcPlot } from './PieArcPlot';
 import { PieArcLabelPlot } from './PieArcLabelPlot';
-import { getPercentageValue } from '../internals/utils';
+import { getPercentageValue } from '../internals/getPercentageValue';
 import { getPieCoordinates } from './getPieCoordinates';
 import { usePieSeries } from '../hooks/useSeries';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/PieChart/getPieCoordinates.js

@@ -1,4 +1,4 @@
-import { getPercentageValue } from '../internals/utils';
+import { getPercentageValue } from '../internals/getPercentageValue';
 export function getPieCoordinates(series, drawing) {
   const {
     height,

package/esm/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -1,31 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ChartContainer } from '../ChartContainer';
-import { useChartContainerDimensions } from './useChartContainerDimensions';
 import { ResizableContainer } from './ResizableContainer';
+import { useResponsiveChartContainerProps } from './useResponsiveChartContainerProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
   const {
-      width: inWidth,
-      height: inHeight
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const [containerRef, width, height] = useChartContainerDimensions(inWidth, inHeight);
-  return /*#__PURE__*/_jsx(ResizableContainer, {
-    ref: containerRef,
-    ownerState: {
-      width: inWidth,
-      height: inHeight
-    },
-    children: width && height ? /*#__PURE__*/_jsx(ChartContainer, _extends({}, other, {
-      width: width,
-      height: height,
-      ref: ref
-    })) : null
-  });
+    hasIntrinsicSize,
+    chartContainerProps,
+    resizableChartContainerProps
+  } = useResponsiveChartContainerProps(props, ref);
+  return /*#__PURE__*/_jsx(ResizableContainer, _extends({}, resizableChartContainerProps, {
+    children: hasIntrinsicSize ? /*#__PURE__*/_jsx(ChartContainer, _extends({}, chartContainerProps)) : null
+  }));
 });
 process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
   // ----------------------------- Warning --------------------------------

package/esm/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -2,8 +2,8 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
 export 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);
 
@@ -54,13 +54,17 @@ export 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
+  };
 };

package/esm/ResponsiveChartContainer/useResponsiveChartContainerProps.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis"];
+import { useChartContainerDimensions } from './useChartContainerDimensions';
+export 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 = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    containerRef,
+    width: dWidth,
+    height: dHeight
+  } = useChartContainerDimensions(width, height);
+  const resizableChartContainerProps = _extends({}, 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
+  };
+};

package/esm/ScatterChart/Scatter.js

@@ -27,10 +27,7 @@ function Scatter(props) {
     markerSize,
     onItemClick
   } = props;
-  const {
-    left,
-    width
-  } = useDrawingArea();
+  const drawingArea = useDrawingArea();
   const {
     useVoronoiInteraction
   } = React.useContext(InteractionContext);
@@ -43,15 +40,15 @@ function Scatter(props) {
   const cleanData = React.useMemo(() => {
     const getXPosition = getValueToPositionMapper(xScale);
     const getYPosition = 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,
@@ -76,7 +73,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__*/_jsx("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/_jsx("circle", _extends({
       cx: 0,

package/esm/ScatterChart/ScatterChart.js

@@ -41,7 +41,10 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
     ref: ref
   }, chartContainerProps, {
     children: /*#__PURE__*/_jsxs(ZAxisContextProvider, _extends({}, zAxisProps, {
-      children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), children]
+      children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
+        "data-drawing-container": true,
+        children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
+      }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), children]
     }))
   }));
 });

package/esm/ScatterChart/ScatterPlot.js

@@ -53,12 +53,15 @@ function ScatterPlot(props) {
         xAxisKey,
         yAxisKey,
         zAxisKey,
+        xAxisId,
+        yAxisId,
+        zAxisId,
         markerSize,
         color
       } = series[seriesId];
-      const colorGetter = getColor(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 = getColor(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__*/_jsx(ScatterItems, _extends({
         xScale: xScale,
         yScale: yScale,

package/esm/ScatterChart/extremums.js

@@ -13,7 +13,10 @@ export 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
     }) => {
@@ -29,7 +32,10 @@ export 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/esm/ScatterChart/useScatterChartProps.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/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.
@@ -8,34 +10,36 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
 export 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 = _objectWithoutPropertiesLoose(props, _excluded);
+  const chartContainerProps = _extends({}, other, {
     series: series.map(s => _extends({
       type: 'scatter'
     }, s)),
@@ -47,8 +51,9 @@ export const useScatterChartProps = props => {
     yAxis,
     sx,
     highlightedItem,
-    onHighlightChange
-  };
+    onHighlightChange,
+    className
+  });
   const zAxisProps = {
     zAxis
   };

package/esm/SparkLineChart/SparkLineChart.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "colors", "sx", "showTooltip", "tooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { BarPlot } from '../BarChart';
@@ -26,33 +28,35 @@ const SPARKLINE_DEFAULT_MARGIN = {
  */
 const 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 = _objectWithoutPropertiesLoose(props, _excluded);
   const defaultXHighlight = showHighlight && plotType === 'bar' ? {
     x: 'band'
   } : {
     x: 'none'
   };
   const axisHighlight = _extends({}, defaultXHighlight, inAxisHighlight);
-  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({}, other, {
     ref: ref,
     series: [_extends({
       type: plotType,
@@ -66,6 +70,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     width: width,
     height: height,
     margin: margin,
+    className: className,
     xAxis: [_extends({
       id: DEFAULT_X_AXIS_KEY,
       scaleType: plotType === 'bar' ? 'band' : 'point',
@@ -104,7 +109,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       slotProps: slotProps,
       slots: slots
     })), children]
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   // ----------------------------- Warning --------------------------------