@mui/x-charts 7.16.0 → 7.18.0

package/node/ChartsTooltip/useAxisTooltip.js

@@ -0,0 +1,90 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAxisTooltip = useAxisTooltip;
+var React = _interopRequireWildcard(require("react"));
+var _InteractionProvider = require("../context/InteractionProvider");
+var _useSeries = require("../hooks/useSeries");
+var _CartesianProvider = require("../context/CartesianProvider");
+var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
+var _getLabel = require("../internals/getLabel");
+var _isCartesian = require("../internals/isCartesian");
+var _utils = require("./utils");
+function useAxisTooltip() {
+  const {
+    axis
+  } = React.useContext(_InteractionProvider.InteractionContext);
+  const series = (0, _useSeries.useSeries)();
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = (0, _CartesianProvider.useCartesianContext)();
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
+
+  // By default use the x-axis
+  const isXaxis = axis.x !== null && axis.x.index !== -1;
+  const axisData = isXaxis ? axis.x && axis.x : axis.y && axis.y;
+  if (axisData === null) {
+    return null;
+  }
+  const {
+    index: dataIndex,
+    value: axisValue
+  } = axisData;
+  const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
+  const usedAxis = isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
+  const relevantSeries = Object.keys(series).filter(_isCartesian.isCartesianSeriesType).flatMap(seriesType => {
+    const seriesOfType = series[seriesType];
+    if (!seriesOfType) {
+      return [];
+    }
+    return seriesOfType.seriesOrder.map(seriesId => {
+      const seriesToAdd = seriesOfType.series[seriesId];
+      const providedXAxisId = seriesToAdd.xAxisId ?? seriesToAdd.xAxisKey;
+      const providedYAxisId = seriesToAdd.yAxisId ?? seriesToAdd.yAxisKey;
+      const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
+
+      // Test if the series uses the default axis
+      if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+        const xAxisId = providedXAxisId ?? xAxisIds[0];
+        const yAxisId = providedYAxisId ?? yAxisIds[0];
+        const zAxisId = seriesToAdd.zAxisId ?? seriesToAdd.zAxisKey ?? zAxisIds[0];
+        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId && zAxis[zAxisId])(dataIndex) ?? '';
+        const value = seriesToAdd.data[dataIndex] ?? null;
+        const formattedValue = seriesToAdd.valueFormatter(value, {
+          dataIndex
+        });
+        const formattedLabel = (0, _getLabel.getLabel)(seriesToAdd.label, 'tooltip') ?? null;
+        return {
+          seriesId,
+          color,
+          value,
+          formattedValue,
+          formattedLabel
+        };
+      }
+      return undefined;
+    });
+  }).filter(item => item != null);
+  const axisFormatter = usedAxis.valueFormatter ?? (v => usedAxis.scaleType === 'utc' ? (0, _utils.utcFormatter)(v) : v.toLocaleString());
+  const axisFormattedValue = axisFormatter(axisValue, {
+    location: 'tooltip'
+  });
+  return {
+    identifier: axis,
+    seriesItems: relevantSeries,
+    axisValue,
+    axisFormattedValue
+  };
+}

package/node/ChartsTooltip/useItemTooltip.js

@@ -0,0 +1,71 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useItemTooltip = useItemTooltip;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _InteractionProvider = require("../context/InteractionProvider");
+var _useSeries = require("../hooks/useSeries");
+var _CartesianProvider = require("../context/CartesianProvider");
+var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
+var _getLabel = require("../internals/getLabel");
+function useItemTooltip() {
+  const {
+    item
+  } = React.useContext(_InteractionProvider.InteractionContext);
+  const series = (0, _useSeries.useSeries)();
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = (0, _CartesianProvider.useCartesianContext)();
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
+  const xAxisId = series.xAxisId ?? series.xAxisKey ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? series.yAxisKey ?? yAxisIds[0];
+  const zAxisId = series.zAxisId ?? series.zAxisKey ?? zAxisIds[0];
+  if (!item || item.dataIndex === undefined) {
+    return null;
+  }
+  const itemSeries = series[item.type].series[item.seriesId];
+  const getColor = colorProcessors[itemSeries.type]?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
+  if (itemSeries.type === 'pie') {
+    const point = itemSeries.data[item.dataIndex];
+    const label = (0, _getLabel.getLabel)(point.label, 'tooltip');
+    const value = (0, _extends2.default)({}, point, {
+      label
+    });
+    const formattedValue = itemSeries.valueFormatter?.(value, {
+      dataIndex: item.dataIndex
+    });
+    return {
+      identifier: item,
+      color: getColor(item.dataIndex),
+      label,
+      value,
+      formattedValue
+    };
+  }
+  const label = (0, _getLabel.getLabel)(itemSeries.label, 'tooltip');
+  const value = itemSeries.data[item.dataIndex];
+  const formattedValue = itemSeries.valueFormatter?.(value, {
+    dataIndex: item.dataIndex
+  });
+  return {
+    identifier: item,
+    color: getColor(item.dataIndex),
+    label,
+    value,
+    formattedValue
+  };
+}

package/node/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/ChartsXAxis/ChartsXAxis.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/ChartsYAxis/ChartsYAxis.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/Gauge/Gauge.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/Gauge/GaugeContainer.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/Gauge/GaugeReferenceArc.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/node/Gauge/GaugeValueArc.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/node/Gauge/GaugeValueText.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/LineChart/AnimatedArea.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/LineChart/AnimatedLine.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -51,29 +52,19 @@ function AnimatedLine(props) {
       ownerState
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const {
-    left,
-    top,
-    bottom,
-    width,
-    height,
-    right
-  } = (0, _useDrawingArea.useDrawingArea)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const chartId = (0, _useChartId.useChartId)();
   const stringInterpolator = (0, _useStringInterpolator.useStringInterpolator)(d);
-  const transitionAppear = (0, _web.useTransition)([1], {
-    from: {
-      animatedWidth: left
-    },
-    to: {
-      animatedWidth: width + left + right
-    },
-    enter: {
-      animatedWidth: width + left + right
-    },
-    leave: {
-      animatedWidth: left
-    },
+  const transitionAppear = (0, _web.useTransition)([drawingArea], {
+    from: v => ({
+      animatedWidth: v.left
+    }),
+    enter: v => ({
+      animatedWidth: v.width + v.left + v.right
+    }),
+    leave: v => ({
+      animatedWidth: v.width + v.left + v.right
+    }),
     reset: false,
     immediate: skipAnimation
   });
@@ -98,7 +89,7 @@ function AnimatedLine(props) {
         x: 0,
         y: 0,
         width: style.animatedWidth,
-        height: top + height + bottom
+        height: drawingArea.top + drawingArea.height + drawingArea.bottom
       }))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       clipPath: `url(#${clipId})`,

package/node/LineChart/AreaElement.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/LineChart/AreaPlot.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/LineChart/CircleMarkElement.js

@@ -0,0 +1,113 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CircleMarkElement = CircleMarkElement;
+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 _styles = require("@mui/material/styles");
+var _warning = require("@mui/x-internals/warning");
+var _web = require("@react-spring/web");
+var _InteractionProvider = require("../context/InteractionProvider");
+var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
+var _context = require("../context");
+var _markElementClasses = require("./markElementClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "shape"];
+/**
+ * The line mark element that only render circle for performance improvement.
+ *
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [CircleMarkElement API](https://mui.com/x/api/charts/circle-mark-element/)
+ */
+function CircleMarkElement(props) {
+  const {
+      x,
+      y,
+      id,
+      classes: innerClasses,
+      color,
+      dataIndex,
+      onClick,
+      skipAnimation,
+      shape
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  if (shape !== 'circle') {
+    (0, _warning.warnOnce)([`MUI X: The mark element of your line chart have shape "${shape}" which is not supported when using \`experimentalRendering=true\`.`, 'Only "circle" are supported with `experimentalRendering`.'].join('\n'), 'error');
+  }
+  const theme = (0, _styles.useTheme)();
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)();
+  const {
+    isFaded,
+    isHighlighted
+  } = (0, _context.useItemHighlighted)({
+    seriesId: id
+  });
+  const {
+    axis
+  } = React.useContext(_InteractionProvider.InteractionContext);
+  const position = (0, _web.useSpring)({
+    to: {
+      x,
+      y
+    },
+    immediate: skipAnimation
+  });
+  const ownerState = {
+    id,
+    classes: innerClasses,
+    isHighlighted: axis.x?.index === dataIndex || isHighlighted,
+    isFaded,
+    color
+  };
+  const classes = (0, _markElementClasses.useUtilityClasses)(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.circle, (0, _extends2.default)({}, other, {
+    cx: position.x,
+    cy: position.y,
+    r: 5,
+    fill: (theme.vars || theme).palette.background.paper,
+    stroke: color,
+    strokeWidth: 2,
+    className: classes.root,
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset'
+  }, getInteractionItemProps({
+    type: 'line',
+    seriesId: id,
+    dataIndex
+  })));
+}
+process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: _propTypes.default.object,
+  /**
+   * The index to the element in the series' data array.
+   */
+  dataIndex: _propTypes.default.number.isRequired,
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  /**
+   * The shape of the marker.
+   */
+  shape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: _propTypes.default.bool
+} : void 0;

package/node/LineChart/LineChart.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -110,6 +111,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: _propTypes.default.bool,
+  /**
+   * If `true` marks will render `<circle />` instead of `<path />` and drop theme override for faster rendering.
+   */
+  experimentalMarkRendering: _propTypes.default.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -146,6 +151,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     itemMarkWidth: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     markGap: _propTypes.default.number,
+    onItemClick: _propTypes.default.func,
     padding: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
       bottom: _propTypes.default.number,
       left: _propTypes.default.number,
@@ -201,6 +207,16 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Callback fired when a mark element is clicked.
    */
   onMarkClick: _propTypes.default.func,
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: _propTypes.default.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.

package/node/LineChart/LineElement.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/LineChart/LineHighlightElement.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/LineChart/LineHighlightPlot.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/LineChart/LinePlot.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/LineChart/MarkElement.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -6,40 +7,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MarkElement = MarkElement;
-exports.getMarkElementUtilityClass = getMarkElementUtilityClass;
-exports.markElementClasses = 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 _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
-var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _web = require("@react-spring/web");
 var _getSymbol = require("../internals/getSymbol");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _context = require("../context");
+var _markElementClasses = require("./markElementClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation"];
-function getMarkElementUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiMarkElement', slot);
-}
-const markElementClasses = exports.markElementClasses = (0, _generateUtilityClasses.default)('MuiMarkElement', ['root', 'highlighted', 'faded']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    id,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return (0, _composeClasses.default)(slots, getMarkElementUtilityClass, classes);
-};
 const MarkElementPath = (0, _styles.styled)(_web.animated.path, {
   name: 'MuiMarkElement',
   slot: 'Root',
@@ -99,7 +80,7 @@ function MarkElement(props) {
     isFaded,
     color
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = (0, _markElementClasses.useUtilityClasses)(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkElementPath, (0, _extends2.default)({}, other, {
     style: {
       transform: (0, _web.to)([position.x, position.y], (pX, pY) => `translate(${pX}px, ${pY}px)`),

package/node/LineChart/MarkPlot.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -19,8 +20,9 @@ var _cleanId = require("../internals/cleanId");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _useSeries = require("../hooks/useSeries");
 var _useDrawingArea = require("../hooks/useDrawingArea");
+var _CircleMarkElement = require("./CircleMarkElement");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "experimentalRendering"];
 /**
  * Demos:
  *
@@ -36,14 +38,15 @@ function MarkPlot(props) {
       slots,
       slotProps,
       skipAnimation,
-      onItemClick
+      onItemClick,
+      experimentalRendering
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = (0, _useSeries.useLineSeries)();
   const axisData = (0, _CartesianProvider.useCartesianContext)();
   const chartId = (0, _useChartId.useChartId)();
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const Mark = slots?.mark ?? _MarkElement.MarkElement;
+  const Mark = slots?.mark ?? (experimentalRendering ? _CircleMarkElement.CircleMarkElement : _MarkElement.MarkElement);
   if (seriesData === undefined) {
     return null;
   }
@@ -157,6 +160,12 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true` the mark element will only be able to render circle.
+   * Giving fewer customization options, but saving around 40ms per 1.000 marks.
+   * @default false
+   */
+  experimentalRendering: _propTypes.default.bool,
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.