@mui/x-charts 7.0.0-beta.0 → 7.0.0-beta.1

package/LineChart/MarkPlot.js

@@ -14,8 +14,10 @@ var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _MarkElement = require("./MarkElement");
 var _useScale = require("../hooks/useScale");
 var _constants = require("../constants");
+var _DrawingProvider = require("../context/DrawingProvider");
+var _utils = require("../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 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 && Object.prototype.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; }
 /**
@@ -31,11 +33,16 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function MarkPlot(props) {
   const {
       slots,
-      slotProps
+      slotProps,
+      skipAnimation,
+      onItemClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).line;
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const {
+    chartId
+  } = React.useContext(_DrawingProvider.DrawingContext);
   const Mark = slots?.mark ?? _MarkElement.MarkElement;
   if (seriesData === undefined) {
     return null;
@@ -56,7 +63,7 @@ function MarkPlot(props) {
     children: stackingGroups.flatMap(({
       ids: groupIds
     }) => {
-      return groupIds.flatMap(seriesId => {
+      return groupIds.map(seriesId => {
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
@@ -87,59 +94,70 @@ function MarkPlot(props) {
         if (xData === undefined) {
           throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
         }
-        return xData?.map((x, index) => {
-          const value = data[index] == null ? null : stackedData[index][1];
-          return {
-            x: xScale(x),
-            y: value === null ? null : yScale(value),
-            position: x,
-            value,
-            index
-          };
-        }).filter(({
-          x,
-          y,
-          index,
-          position,
-          value
-        }) => {
-          if (value === null || y === null) {
-            // Remove missing data point
-            return false;
-          }
-          if (!isInRange({
-            x,
-            y
-          })) {
-            // Remove out of range
-            return false;
-          }
-          if (showMark === true) {
-            return true;
-          }
-          return showMark({
+        const clipId = (0, _utils.cleanId)(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
+
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+          clipPath: `url(#${clipId})`,
+          children: xData?.map((x, index) => {
+            const value = data[index] == null ? null : stackedData[index][1];
+            return {
+              x: xScale(x),
+              y: value === null ? null : yScale(value),
+              position: x,
+              value,
+              index
+            };
+          }).filter(({
             x,
             y,
             index,
             position,
             value
-          });
-        }).map(({
-          x,
-          y,
-          index
-        }) => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
-            id: seriesId,
-            dataIndex: index,
-            shape: "circle",
-            color: series[seriesId].color,
-            x: x,
-            y: y // Don't knwo why TS don't get from the filter that y can't be null
-            ,
-            highlightScope: series[seriesId].highlightScope
-          }, slotProps?.mark), `${seriesId}-${index}`);
-        });
+          }) => {
+            if (value === null || y === null) {
+              // Remove missing data point
+              return false;
+            }
+            if (!isInRange({
+              x,
+              y
+            })) {
+              // Remove out of range
+              return false;
+            }
+            if (showMark === true) {
+              return true;
+            }
+            return showMark({
+              x,
+              y,
+              index,
+              position,
+              value
+            });
+          }).map(({
+            x,
+            y,
+            index
+          }) => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
+              id: seriesId,
+              dataIndex: index,
+              shape: "circle",
+              color: series[seriesId].color,
+              x: x,
+              y: y // Don't know why TS doesn't get from the filter that y can't be null
+              ,
+              highlightScope: series[seriesId].highlightScope,
+              skipAnimation: skipAnimation,
+              onClick: onItemClick && (event => onItemClick(event, {
+                type: 'line',
+                seriesId,
+                dataIndex: index
+              }))
+            }, slotProps?.mark), `${seriesId}-${index}`);
+          })
+        }, seriesId);
       });
     })
   }));
@@ -149,6 +167,17 @@ 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 "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Callback fired when a line mark item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
+   */
+  onItemClick: _propTypes.default.func,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: _propTypes.default.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/LineChart/formatter.js

@@ -76,7 +76,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v === null ? '' : v.toLocaleString())
+    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v == null ? '' : v.toLocaleString())
   };
 };
 var _default = exports.default = formatter;

package/LineChart/index.d.ts

@@ -4,6 +4,8 @@ export * from './AreaPlot';
 export * from './MarkPlot';
 export * from './LineHighlightPlot';
 export * from './AreaElement';
+export * from './AnimatedArea';
 export * from './LineElement';
+export * from './AnimatedLine';
 export * from './MarkElement';
 export * from './LineHighlightElement';

package/LineChart/index.js

@@ -69,6 +69,17 @@ Object.keys(_AreaElement).forEach(function (key) {
     }
   });
 });
+var _AnimatedArea = require("./AnimatedArea");
+Object.keys(_AnimatedArea).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AnimatedArea[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AnimatedArea[key];
+    }
+  });
+});
 var _LineElement = require("./LineElement");
 Object.keys(_LineElement).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -80,6 +91,17 @@ Object.keys(_LineElement).forEach(function (key) {
     }
   });
 });
+var _AnimatedLine = require("./AnimatedLine");
+Object.keys(_AnimatedLine).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AnimatedLine[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AnimatedLine[key];
+    }
+  });
+});
 var _MarkElement = require("./MarkElement");
 Object.keys(_MarkElement).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/PieChart/PieArcLabelPlot.d.ts

@@ -24,7 +24,7 @@ export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'da
      */
     slotProps?: PieArcLabelPlotSlotProps;
     /**
-     * If `true`, animations are skiped.
+     * If `true`, animations are skipped.
      * @default false
      */
     skipAnimation?: boolean;

package/PieChart/PieArcLabelPlot.js

@@ -182,7 +182,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    */
   paddingAngle: _propTypes.default.number,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: _propTypes.default.bool,

package/PieChart/PieArcPlot.d.ts

@@ -29,9 +29,9 @@ export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' |
      * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
      * @param {DefaultizedPieValueType} item The pie item.
      */
-    onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void;
+    onItemClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void;
     /**
-     * If `true`, animations are skiped.
+     * If `true`, animations are skipped.
      * @default false
      */
     skipAnimation?: boolean;

package/PieChart/PieArcPlot.js

@@ -14,7 +14,7 @@ var _PieArc = require("./PieArc");
 var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "onClick", "skipAnimation"],
+const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "arcLabelRadius", "outerRadius", "cornerRadius"];
 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 && Object.prototype.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; }
@@ -33,7 +33,7 @@ function PieArcPlot(props) {
         additionalRadius: -5
       },
       data,
-      onClick,
+      onItemClick,
       skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -80,8 +80,8 @@ function PieArcPlot(props) {
         highlightScope: highlightScope,
         isFaded: item.isFaded,
         isHighlighted: item.isHighlighted,
-        onClick: onClick && (event => {
-          onClick(event, {
+        onClick: onItemClick && (event => {
+          onItemClick(event, {
             type: 'pie',
             seriesId: id,
             dataIndex: index
@@ -158,7 +158,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
    * @param {DefaultizedPieValueType} item The pie item.
    */
-  onClick: _propTypes.default.func,
+  onItemClick: _propTypes.default.func,
   /**
    * The radius between circle center and the end of the arc.
    */
@@ -169,7 +169,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    */
   paddingAngle: _propTypes.default.number,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: _propTypes.default.bool,

package/PieChart/PieChart.d.ts

@@ -33,7 +33,7 @@ export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'seri
      * @deprecated Consider using `slotProps.legend` instead.
      */
     legend?: ChartsLegendProps;
-    onClick?: PiePlotProps['onClick'];
+    onItemClick?: PiePlotProps['onItemClick'];
     slots?: PieChartSlots;
     /**
      * The props used for each component slot.

package/PieChart/PieChart.js

@@ -67,7 +67,7 @@ function PieChart(props) {
     children,
     slots,
     slotProps,
-    onClick
+    onItemClick
   } = props;
   const margin = (0, _extends2.default)({}, defaultMargin, marginProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
@@ -96,7 +96,7 @@ function PieChart(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PiePlot.PiePlot, {
       slots: slots,
       slotProps: slotProps,
-      onClick: onClick,
+      onItemClick: onItemClick,
       skipAnimation: skipAnimation
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
       slots: slots,
@@ -216,7 +216,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   }),
-  onClick: _propTypes.default.func,
+  onItemClick: _propTypes.default.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -246,7 +246,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   }), _propTypes.default.string]),
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: _propTypes.default.bool,

package/PieChart/PiePlot.d.ts

@@ -5,7 +5,7 @@ export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {
 }
 export interface PiePlotSlotProps extends PieArcPlotSlotProps, PieArcLabelPlotSlotProps {
 }
-export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onClick'> {
+export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onItemClick'> {
     /**
      * Overridable component slots.
      * @default {}

package/PieChart/PiePlot.js

@@ -30,7 +30,7 @@ function PiePlot(props) {
     skipAnimation,
     slots,
     slotProps,
-    onClick
+    onItemClick
   } = props;
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).pie;
   const {
@@ -78,7 +78,7 @@ function PiePlot(props) {
           highlightScope: highlightScope,
           highlighted: highlighted,
           faded: faded,
-          onClick: onClick,
+          onItemClick: onItemClick,
           slots: slots,
           slotProps: slotProps
         })
@@ -132,9 +132,9 @@ process.env.NODE_ENV !== "production" ? PiePlot.propTypes = {
    * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
    * @param {DefaultizedPieValueType} item The pie item.
    */
-  onClick: _propTypes.default.func,
+  onItemClick: _propTypes.default.func,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: _propTypes.default.bool,

package/ScatterChart/Scatter.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DefaultizedScatterSeriesType } from '../models/seriesType/scatter';
+import { DefaultizedScatterSeriesType, ScatterItemIdentifier } from '../models/seriesType/scatter';
 import { D3Scale } from '../models/axis';
 export interface ScatterProps {
     series: DefaultizedScatterSeriesType;
@@ -7,6 +7,12 @@ export interface ScatterProps {
     yScale: D3Scale;
     markerSize: number;
     color: string;
+    /**
+     * Callback fired when clicking on a scatter item.
+     * @param {MouseEvent} event Mouse event recorded on the `<svg/>` element.
+     * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
+     */
+    onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void;
 }
 /**
  * Demos:

package/ScatterChart/Scatter.js

@@ -30,7 +30,8 @@ function Scatter(props) {
     xScale,
     yScale,
     color,
-    markerSize
+    markerSize,
+    onItemClick
   } = props;
   const highlightScope = React.useMemo(() => (0, _extends2.default)({
     highlighted: 'item',
@@ -70,7 +71,8 @@ function Scatter(props) {
           isHighlighted,
           isFaded: !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, pointCtx, highlightScope),
           interactionProps: getInteractionItemProps(pointCtx),
-          id: scatterPoint.id
+          id: scatterPoint.id,
+          dataIndex: i
         });
       }
     }
@@ -83,7 +85,13 @@ function Scatter(props) {
       r: (dataPoint.isHighlighted ? 1.2 : 1) * markerSize,
       transform: `translate(${dataPoint.x}, ${dataPoint.y})`,
       fill: color,
-      opacity: dataPoint.isFaded && 0.3 || 1
+      opacity: dataPoint.isFaded && 0.3 || 1,
+      onClick: onItemClick && (event => onItemClick(event, {
+        type: 'scatter',
+        seriesId: series.id,
+        dataIndex: dataPoint.dataIndex
+      })),
+      cursor: onItemClick ? 'pointer' : 'unset'
     }, dataPoint.interactionProps), dataPoint.id))
   });
 }
@@ -94,6 +102,12 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
   // ----------------------------------------------------------------------
   color: _propTypes.default.string.isRequired,
   markerSize: _propTypes.default.number.isRequired,
+  /**
+   * Callback fired when clicking on a scatter item.
+   * @param {MouseEvent} event Mouse event recorded on the `<svg/>` element.
+   * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
+   */
+  onItemClick: _propTypes.default.func,
   series: _propTypes.default.object.isRequired,
   xScale: _propTypes.default.func.isRequired,
   yScale: _propTypes.default.func.isRequired

package/ScatterChart/ScatterChart.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ScatterPlotSlotProps, ScatterPlotSlots } from './ScatterPlot';
+import { ScatterPlotProps, ScatterPlotSlotProps, ScatterPlotSlots } from './ScatterPlot';
 import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { ScatterSeriesType } from '../models/seriesType/scatter';
@@ -13,7 +13,7 @@ export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, Ch
 }
 export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
 }
-export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, ChartsVoronoiHandlerProps {
+export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsVoronoiHandlerProps, 'onItemClick'> {
     series: MakeOptional<ScatterSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
@@ -36,6 +36,12 @@ export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, '
      * @default {}
      */
     slotProps?: ScatterChartSlotProps;
+    /**
+     * Callback fired when clicking on a scatter item.
+     * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`.
+     * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
+     */
+    onItemClick?: ScatterPlotProps['onItemClick'] | ChartsVoronoiHandlerProps['onItemClick'];
 }
 /**
  * Demos:

package/ScatterChart/ScatterChart.js

@@ -47,6 +47,7 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     leftAxis,
     rightAxis,
     bottomAxis,
+    onItemClick,
     children,
     slots,
     slotProps
@@ -64,7 +65,8 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     yAxis: yAxis,
     sx: sx,
     children: [!disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, {
-      voronoiMaxRadius: voronoiMaxRadius
+      voronoiMaxRadius: voronoiMaxRadius,
+      onItemClick: onItemClick
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
@@ -74,7 +76,8 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
       slotProps: slotProps
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPlot.ScatterPlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      onItemClick: disableVoronoi ? onItemClick : undefined
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
       slots: slots,
       slotProps: slotProps
@@ -203,6 +206,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   }),
+  /**
+   * Callback fired when clicking on a scatter item.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`.
+   * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
+   */
+  onItemClick: _propTypes.default.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.

package/ScatterChart/ScatterPlot.d.ts

@@ -6,7 +6,7 @@ export interface ScatterPlotSlots {
 export interface ScatterPlotSlotProps {
     scatter?: Partial<ScatterProps>;
 }
-export interface ScatterPlotProps {
+export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick'> {
     /**
      * Overridable component slots.
      * @default {}

package/ScatterChart/ScatterPlot.js

@@ -27,7 +27,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ScatterPlot(props) {
   const {
     slots,
-    slotProps
+    slotProps,
+    onItemClick
   } = props;
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).scatter;
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
@@ -63,7 +64,8 @@ function ScatterPlot(props) {
         yScale: yScale,
         color: color,
         markerSize: markerSize ?? 4,
-        series: series[seriesId]
+        series: series[seriesId],
+        onItemClick: onItemClick
       }, slotProps?.scatter), id);
     })
   });
@@ -73,6 +75,12 @@ process.env.NODE_ENV !== "production" ? ScatterPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Callback fired when clicking on a scatter item.
+   * @param {MouseEvent} event Mouse event recorded on the `<svg/>` element.
+   * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
+   */
+  onItemClick: _propTypes.default.func,
   /**
    * The props used for each component slot.
    * @default {}

package/SparkLineChart/SparkLineChart.js

@@ -94,9 +94,11 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
       }
     }), plotType === 'line' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.AreaPlot, {
+        skipAnimation: true,
         slots: slots,
         slotProps: slotProps
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LinePlot, {
+        skipAnimation: true,
         slots: slots,
         slotProps: slotProps
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, {

package/context/DrawingProvider.d.ts

@@ -33,7 +33,12 @@ export type DrawingArea = {
      */
     height: number;
 };
-export declare const DrawingContext: React.Context<DrawingArea>;
+export declare const DrawingContext: React.Context<DrawingArea & {
+    /**
+     * A random id used to distinguish each chart on the same page.
+     */
+    chartId: string;
+}>;
 export declare const SVGContext: React.Context<React.RefObject<SVGSVGElement>>;
 /**
  * API:

package/context/DrawingProvider.js

@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.DrawingContext = void 0;
 exports.DrawingProvider = DrawingProvider;
 exports.SVGContext = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useChartDimensions = _interopRequireDefault(require("../hooks/useChartDimensions"));
 var _jsxRuntime = require("react/jsx-runtime");
 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); }
@@ -23,7 +25,8 @@ const DrawingContext = exports.DrawingContext = /*#__PURE__*/React.createContext
   bottom: 0,
   right: 0,
   height: 300,
-  width: 400
+  width: 400,
+  chartId: ''
 });
 const SVGContext = exports.SVGContext = /*#__PURE__*/React.createContext({
   current: null
@@ -43,10 +46,14 @@ function DrawingProvider(props) {
     children
   } = props;
   const drawingArea = (0, _useChartDimensions.default)(width, height, margin);
+  const chartId = (0, _useId.default)();
+  const value = React.useMemo(() => (0, _extends2.default)({
+    chartId: chartId ?? ''
+  }, drawingArea), [chartId, drawingArea]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SVGContext.Provider, {
     value: svgRef,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawingContext.Provider, {
-      value: drawingArea,
+      value: value,
       children: children
     })
   });