@mui/x-charts 7.16.0 → 7.17.0

package/ChartsLegend/chartsLegend.types.d.ts

@@ -1,5 +1,7 @@
 import { ChartsTextStyle } from '../ChartsText';
-export interface LegendItemParams {
+import { PieItemId } from '../models';
+import { SeriesId } from '../models/seriesType/common';
+interface LegendItemContextBase {
     /**
      * The color used in the legend
      */
@@ -8,12 +10,47 @@ export interface LegendItemParams {
      * The label displayed in the legend
      */
     label: string;
+}
+export interface LegendItemParams extends Partial<Omit<SeriesLegendItemContext, 'type' | keyof LegendItemContextBase>>, Partial<Omit<PiecewiseColorLegendItemContext, 'type' | keyof LegendItemContextBase>>, LegendItemContextBase {
     /**
      * The identifier of the legend element.
      * Used for internal purpose such as `key` props
      */
     id: number | string;
 }
+export interface SeriesLegendItemContext extends LegendItemContextBase {
+    /**
+     * The type of the legend item
+     * - `series` is used for series legend item
+     * - `piecewiseColor` is used for piecewise color legend item
+     */
+    type: 'series';
+    /**
+     * The identifier of the series
+     */
+    seriesId: SeriesId;
+    /**
+     * The identifier of the pie item
+     */
+    itemId?: PieItemId;
+}
+export interface PiecewiseColorLegendItemContext extends LegendItemContextBase {
+    /**
+     * The type of the legend item
+     * - `series` is used for series legend item
+     * - `piecewiseColor` is used for piecewise color legend item
+     */
+    type: 'piecewiseColor';
+    /**
+     * The minimum value of the category
+     */
+    minValue: number | Date | null;
+    /**
+     * The maximum value of the category
+     */
+    maxValue: number | Date | null;
+}
+export type LegendItemContext = SeriesLegendItemContext | PiecewiseColorLegendItemContext;
 export interface LegendItemWithPosition extends LegendItemParams {
     positionX: number;
     positionY: number;
@@ -29,3 +66,4 @@ export type GetItemSpaceType = (label: string, inStyle?: ChartsTextStyle) => {
     outerWidth: number;
     outerHeight: number;
 };
+export {};

package/ChartsLegend/chartsLegendClasses.d.ts

@@ -3,6 +3,8 @@ export interface ChartsLegendClasses {
     root: string;
     /** Styles applied to a series element. */
     series: string;
+    /** Styles applied to the item background. */
+    itemBackground: string;
     /** Styles applied to series mark element. */
     mark: string;
     /** Styles applied to the series label. */

package/ChartsLegend/chartsLegendClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generat
 export function getLegendUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLegend', slot);
 }
-export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'column', 'row']);
+export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'itemBackground', 'mark', 'label', 'column', 'row']);

package/ChartsLegend/useAxis.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { ZAxisContext } from "../context/ZAxisContextProvider.js";
 import { useCartesianContext } from "../context/CartesianProvider/useCartesianContext.js";

package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { InteractionContext } from "../context/InteractionProvider.js";
@@ -27,7 +29,7 @@ function ChartsOnAxisClickHandler(props) {
     }
     const handleMouseClick = event => {
       event.preventDefault();
-      const isXaxis = (axis.x && axis.x.index) !== undefined;
+      const isXaxis = axis.x && axis.x.index !== -1;
       const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
       const dataIndex = isXaxis ? axis.x && axis.x.index : axis.y && axis.y.index;
       if (dataIndex == null) {

package/ChartsOverlay/ChartsLoadingOverlay.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["message"];

package/ChartsOverlay/ChartsNoDataOverlay.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["message"];

package/ChartsOverlay/ChartsOverlay.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ChartsLoadingOverlay } from "./ChartsLoadingOverlay.js";

package/ChartsReferenceLine/ChartsReferenceLine.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -1,11 +1,13 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
+import { warnOnce } from '@mui/x-internals/warning';
 import { useDrawingArea, useXScale } from "../hooks/index.js";
 import { ReferenceLineRoot } from "./common.js";
 import { ChartsText } from "../ChartsText/index.js";
 import { getReferenceLineUtilityClass } from "./chartsReferenceLineClasses.js";
-import { warnOnce } from "../internals/warning.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   top,

package/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -1,11 +1,13 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
+import { warnOnce } from '@mui/x-internals/warning';
 import { useDrawingArea, useYScale } from "../hooks/index.js";
 import { ReferenceLineRoot } from "./common.js";
 import { ChartsText } from "../ChartsText/index.js";
 import { getReferenceLineUtilityClass } from "./chartsReferenceLineClasses.js";
-import { warnOnce } from "../internals/warning.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   left,

package/ChartsSurface/ChartsSurface.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "title", "desc"];

package/ChartsText/ChartsText.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["x", "y", "style", "text", "ownerState"],

package/ChartsTooltip/ChartsTooltip.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

package/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Delaunay } from '@mui/x-charts-vendor/d3-delaunay';

package/ChartsXAxis/ChartsXAxis.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["scale", "tickNumber", "reverse"];

package/ChartsYAxis/ChartsYAxis.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["scale", "tickNumber"];

package/Gauge/Gauge.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["text", "children", "classes", "className"];

package/Gauge/GaugeContainer.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];

package/Gauge/GaugeReferenceArc.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';

package/Gauge/GaugeValueArc.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';

package/Gauge/GaugeValueText.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["text", "className"];

package/LineChart/AnimatedArea.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["d", "skipAnimation", "ownerState"];

package/LineChart/AnimatedLine.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["d", "skipAnimation", "ownerState"];

package/LineChart/AreaElement.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];

package/LineChart/AreaPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];

package/LineChart/CircleMarkElement.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { MarkElementOwnerState } from './markElementClasses';
+export type CircleMarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
+    /**
+     * The shape of the marker.
+     */
+    shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+    /**
+     * If `true`, animations are skipped.
+     * @default false
+     */
+    skipAnimation?: boolean;
+    /**
+     * The index to the element in the series' data array.
+     */
+    dataIndex: number;
+};
+/**
+ * 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/)
+ */
+declare function CircleMarkElement(props: CircleMarkElementProps): React.JSX.Element;
+declare namespace CircleMarkElement {
+    var propTypes: any;
+}
+export { CircleMarkElement };

package/LineChart/CircleMarkElement.js

@@ -0,0 +1,107 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "shape"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
+import { warnOnce } from '@mui/x-internals/warning';
+import { animated, useSpring } from '@react-spring/web';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+import { useItemHighlighted } from "../context/index.js";
+import { useUtilityClasses } from "./markElementClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 = _objectWithoutPropertiesLoose(props, _excluded);
+  if (shape !== 'circle') {
+    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 = useTheme();
+  const getInteractionItemProps = useInteractionItemProps();
+  const {
+    isFaded,
+    isHighlighted
+  } = useItemHighlighted({
+    seriesId: id
+  });
+  const {
+    axis
+  } = React.useContext(InteractionContext);
+  const position = useSpring({
+    to: {
+      x,
+      y
+    },
+    immediate: skipAnimation
+  });
+  const ownerState = {
+    id,
+    classes: innerClasses,
+    isHighlighted: axis.x?.index === dataIndex || isHighlighted,
+    isFaded,
+    color
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(animated.circle, _extends({}, 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.object,
+  /**
+   * The index to the element in the series' data array.
+   */
+  dataIndex: PropTypes.number.isRequired,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * The shape of the marker.
+   */
+  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool
+} : void 0;
+export { CircleMarkElement };

package/LineChart/LineChart.d.ts

@@ -75,6 +75,10 @@ export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'ser
      * @default false
      */
     skipAnimation?: boolean;
+    /**
+     * If `true` marks will render `<circle />` instead of `<path />` and drop theme override for faster rendering.
+     */
+    experimentalMarkRendering?: boolean;
 }
 /**
  * Demos:

package/LineChart/LineChart.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -102,6 +104,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: PropTypes.bool,
+  /**
+   * If `true` marks will render `<circle />` instead of `<path />` and drop theme override for faster rendering.
+   */
+  experimentalMarkRendering: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -138,6 +144,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     itemMarkWidth: PropTypes.number,
     labelStyle: PropTypes.object,
     markGap: PropTypes.number,
+    onItemClick: PropTypes.func,
     padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
       bottom: PropTypes.number,
       left: PropTypes.number,

package/LineChart/LineElement.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];

package/LineChart/LineHighlightElement.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["x", "y", "id", "classes", "color"];

package/LineChart/LineHighlightPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps"];

package/LineChart/LinePlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];

package/LineChart/MarkElement.d.ts

@@ -1,23 +1,5 @@
 import * as React from 'react';
-import { SeriesId } from '../models/seriesType/common';
-export interface MarkElementClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element when highlighted. */
-    highlighted: string;
-    /** Styles applied to the root element when faded. */
-    faded: string;
-}
-export type MarkElementClassKey = keyof MarkElementClasses;
-interface MarkElementOwnerState {
-    id: SeriesId;
-    color: string;
-    isFaded: boolean;
-    isHighlighted: boolean;
-    classes?: Partial<MarkElementClasses>;
-}
-export declare function getMarkElementUtilityClass(slot: string): string;
-export declare const markElementClasses: MarkElementClasses;
+import { MarkElementOwnerState } from './markElementClasses';
 export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
     /**
      * If `true`, animations are skipped.

package/LineChart/MarkElement.js

@@ -1,35 +1,19 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
 import { animated, to, useSpring } from '@react-spring/web';
 import { getSymbol } from "../internals/getSymbol.js";
 import { InteractionContext } from "../context/InteractionProvider.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../context/index.js";
+import { useUtilityClasses } from "./markElementClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getMarkElementUtilityClass(slot) {
-  return generateUtilityClass('MuiMarkElement', slot);
-}
-export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    id,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return composeClasses(slots, getMarkElementUtilityClass, classes);
-};
 const MarkElementPath = styled(animated.path, {
   name: 'MuiMarkElement',
   slot: 'Root',

package/LineChart/MarkPlot.d.ts

@@ -24,6 +24,12 @@ export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<
      * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
      */
     onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void;
+    /**
+     * 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?: boolean;
 }
 /**
  * Demos:

package/LineChart/MarkPlot.js

@@ -1,6 +1,8 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "experimentalRendering"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
@@ -12,6 +14,7 @@ import { cleanId } from "../internals/cleanId.js";
 import getColor from "./getColor.js";
 import { useLineSeries } from "../hooks/useSeries.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { CircleMarkElement } from "./CircleMarkElement.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -28,14 +31,15 @@ function MarkPlot(props) {
       slots,
       slotProps,
       skipAnimation,
-      onItemClick
+      onItemClick,
+      experimentalRendering
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
   const chartId = useChartId();
   const drawingArea = useDrawingArea();
-  const Mark = slots?.mark ?? MarkElement;
+  const Mark = slots?.mark ?? (experimentalRendering ? CircleMarkElement : MarkElement);
   if (seriesData === undefined) {
     return null;
   }
@@ -149,6 +153,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.bool,
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.

package/LineChart/index.d.ts

@@ -9,3 +9,5 @@ export * from './LineElement';
 export * from './AnimatedLine';
 export * from './MarkElement';
 export * from './LineHighlightElement';
+export type { MarkElementClasses, MarkElementClassKey } from './markElementClasses';
+export { getMarkElementUtilityClass, markElementClasses } from './markElementClasses';

package/LineChart/index.js

@@ -8,4 +8,5 @@ export * from "./AnimatedArea.js";
 export * from "./LineElement.js";
 export * from "./AnimatedLine.js";
 export * from "./MarkElement.js";
-export * from "./LineHighlightElement.js";
+export * from "./LineHighlightElement.js";
+export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";