@mui/x-charts 7.16.0 → 7.17.0

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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";

package/modern/LineChart/legend.js

@@ -10,9 +10,10 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      id: seriesId,
+      seriesId,
       color: series[seriesId].color,
-      label: formattedLabel,
-      id: seriesId
+      label: formattedLabel
     });
     return acc;
   }, []);

package/modern/LineChart/markElementClasses.js

@@ -0,0 +1,19 @@
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getMarkElementUtilityClass(slot) {
+  return generateUtilityClass('MuiMarkElement', slot);
+}
+export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded']);
+export const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return composeClasses(slots, getMarkElementUtilityClass, classes);
+};

package/modern/LineChart/useLineChartProps.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 = ["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"];
+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", "experimentalMarkRendering"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 /**
@@ -41,7 +43,8 @@ export const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className
+      className,
+      experimentalMarkRendering
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -99,7 +102,8 @@ export const useLineChartProps = props => {
     slots,
     slotProps,
     onItemClick: onMarkClick,
-    skipAnimation
+    skipAnimation,
+    experimentalRendering: experimentalMarkRendering
   };
   const overlayProps = {
     slots,

package/modern/PieChart/PieArc.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 = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle", "highlightScope"];

package/modern/PieChart/PieArcLabel.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", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];

package/modern/PieChart/PieArcLabelPlot.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 = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],

package/modern/PieChart/PieArcPlot.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", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],

package/modern/PieChart/PieChart.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 = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "tooltip", "axisHighlight", "skipAnimation", "legend", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
@@ -197,6 +199,7 @@ process.env.NODE_ENV !== "production" ? PieChart.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/modern/PieChart/PiePlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DrawingContext } from "../context/DrawingProvider.js";

package/modern/PieChart/dataTransform/useTransformData.js

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

package/modern/PieChart/legend.js

@@ -11,9 +11,11 @@ const legendGetter = params => {
         return;
       }
       acc.push({
+        id: item.id,
+        seriesId,
         color: item.color,
         label: formattedLabel,
-        id: item.id
+        itemId: item.id
       });
     });
     return acc;

package/modern/ResponsiveChartContainer/ResponsiveChartContainer.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/modern/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
@@ -45,7 +47,7 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
     }
     return () => {
       if (animationFrame) {
-        window.cancelAnimationFrame(animationFrame);
+        cancelAnimationFrame(animationFrame);
       }
       if (elementToObserve) {
         observer.unobserve(elementToObserve);

package/modern/ResponsiveChartContainer/useResponsiveChartContainerProps.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", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis"];

package/modern/ScatterChart/Scatter.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/modern/ScatterChart/ScatterChart.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';
@@ -132,6 +134,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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/modern/ScatterChart/ScatterPlot.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/modern/ScatterChart/legend.js

@@ -10,9 +10,10 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      id: seriesId,
+      seriesId,
       color: series[seriesId].color,
-      label: formattedLabel,
-      id: seriesId
+      label: formattedLabel
     });
     return acc;
   }, []);

package/modern/ScatterChart/useScatterChartProps.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 = ["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"];

package/modern/SparkLineChart/SparkLineChart.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 = ["xAxis", "yAxis", "width", "height", "margin", "colors", "sx", "showTooltip", "tooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];

package/modern/context/CartesianProvider/CartesianProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useDrawingArea } from "../../hooks/useDrawingArea.js";
 import { useSeries } from "../../hooks/useSeries.js";

package/modern/context/CartesianProvider/useCartesianContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { CartesianContext } from "./CartesianContext.js";
 export const useCartesianContext = () => {

package/modern/context/DrawingProvider.js

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

package/modern/context/HighlightedProvider/HighlightedProvider.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 = ["highlighted", "faded"];

package/modern/context/HighlightedProvider/useHighlighted.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { HighlightedContext } from "./HighlightedContext.js";
 

package/modern/context/HighlightedProvider/useItemHighlighted.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { useHighlighted } from "./useHighlighted.js";
 /**
  * A hook to check the highlighted state of the item.

package/modern/context/InteractionProvider.js

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

package/modern/context/PluginProvider/PluginProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { PluginContext } from "./PluginContext.js";
 import { mergePlugins } from "./mergePlugins.js";

package/modern/context/PluginProvider/useColorProcessor.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { PluginContext } from "./PluginContext.js";
 export function useColorProcessor(seriesType) {

package/modern/context/PluginProvider/useSeriesFormatter.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { PluginContext } from "./PluginContext.js";
 export function useSeriesFormatter(seriesType) {

package/modern/context/SeriesProvider/SeriesProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import { blueberryTwilightPalette } from "../../colorPalettes/index.js";

package/modern/context/ZAxisContextProvider.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/modern/hooks/useAxis.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 export function useXAxis(identifier) {
   const {

package/modern/hooks/useAxisEvents.js

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

package/modern/hooks/useChartDimensions.js

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

package/modern/hooks/useChartId.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { DrawingContext } from "../context/DrawingProvider.js";
 export function useChartId() {

package/modern/hooks/useColorScale.js

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

package/modern/hooks/useDrawingArea.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { DrawingContext } from "../context/DrawingProvider.js";
 export function useDrawingArea() {

package/modern/hooks/useInteractionItemProps.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { InteractionContext } from "../context/InteractionProvider.js";
 import { useHighlighted } from "../context/index.js";

package/modern/hooks/useMounted.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 export function useMounted(defer = false) {

package/modern/hooks/useReducedMotion.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
 const handleMediaChange = e => {
   Globals.assign({

package/modern/hooks/useScale.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { isBandScale } from "../internals/isBandScale.js";
 import { useXAxis, useYAxis } from "./useAxis.js";
 

package/modern/hooks/useSeries.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { SeriesContext } from "../context/SeriesProvider/index.js";
 

package/modern/hooks/useSvgRef.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { SvgContext } from "../context/DrawingProvider.js";
 export function useSvgRef() {

package/modern/hooks/useTicks.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { isBandScale } from "../internals/isBandScale.js";
 import { isInfinity } from "../internals/isInfinity.js";

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.16.0
+ * @mui/x-charts v7.17.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/BarChart/BarChart.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;
@@ -152,6 +153,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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,

package/node/BarChart/BarElement.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/BarChart/BarLabel/BarLabel.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/BarChart/BarPlot.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/BarChart/legend.js

@@ -16,9 +16,10 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      id: seriesId,
+      seriesId,
       color: series[seriesId].color,
-      label: formattedLabel,
-      id: seriesId
+      label: formattedLabel
     });
     return acc;
   }, []);

package/node/BarChart/useBarChartProps.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {

package/node/ChartContainer/ChartContainer.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/ChartContainer/useChartContainerProps.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/ChartContainer/useDefaultizeAxis.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/ChartsAxis/ChartsAxis.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;