@mui/x-charts 8.27.0 → 9.0.0-alpha.0

package/internals/commonNextFocusItem.js

@@ -3,15 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.composableCartesianSeriesTypes = void 0;
 exports.createGetNextIndexFocusedItem = createGetNextIndexFocusedItem;
 exports.createGetNextSeriesFocusedItem = createGetNextSeriesFocusedItem;
 exports.createGetPreviousIndexFocusedItem = createGetPreviousIndexFocusedItem;
 exports.createGetPreviousSeriesFocusedItem = createGetPreviousSeriesFocusedItem;
 var _getPreviousNonEmptySeries = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/getPreviousNonEmptySeries");
 var _getMaxSeriesLength = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/getMaxSeriesLength");
-var _useChartSeries = require("./plugins/corePlugins/useChartSeries");
 var _getNextNonEmptySeries = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/getNextNonEmptySeries");
 var _seriesHasData = require("./seriesHasData");
+var _useChartSeries = require("./plugins/corePlugins/useChartSeries/useChartSeries.selectors");
 function createGetNextIndexFocusedItem(
 /**
  * The set of series types compatible with this navigation action.
@@ -128,4 +129,5 @@ compatibleSeriesTypes) {
       dataIndex
     };
   };
-}
+}
+const composableCartesianSeriesTypes = exports.composableCartesianSeriesTypes = new Set(['bar', 'line', 'scatter', 'rangeBar']);

package/internals/components/WebGLContext.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare function useWebGLContext(): WebGL2RenderingContext | null;
+export declare const WebGLProvider: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<React.DetailedHTMLProps<React.CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>>, "ref"> & React.RefAttributes<HTMLCanvasElement>>;

package/internals/components/WebGLContext.js

@@ -0,0 +1,116 @@
+"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.WebGLProvider = void 0;
+exports.useWebGLContext = useWebGLContext;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _hooks = require("../../hooks");
+var _useChartDimensions = require("../plugins/corePlugins/useChartDimensions");
+var _useStore = require("../store/useStore");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children"];
+const WebGLContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== "production") WebGLContext.displayName = "WebGLContext";
+function useWebGLContext() {
+  return React.useContext(WebGLContext);
+}
+const WebGLProvider = exports.WebGLProvider = /*#__PURE__*/React.forwardRef(function WebGLProvider(_ref, ref) {
+  let {
+      children
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const canvasRef = React.useRef(null);
+  const [context, setContext] = React.useState(null);
+  const handleRef = (0, _useForkRef.default)(canvasRef, ref);
+  const chartRoot = (0, _hooks.useChartRootRef)().current;
+  const drawingArea = (0, _hooks.useDrawingArea)();
+  const [, rerender] = React.useReducer(s => s + 1, 0);
+  React.useEffect(() => {
+    /* The chart root isn't available on first render because the ref is only set after mounting the root component. */
+    if (!chartRoot) {
+      rerender();
+    }
+  }, [chartRoot]);
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return undefined;
+    }
+    const handleContextLost = event => {
+      // Must prevent default otherwise the context won't be marked as restorable
+      // https://registry.khronos.org/webgl/extensions/WEBGL_lose_context/
+      event.preventDefault();
+      setContext(null);
+    };
+    const initializeContext = () => {
+      const ctx = canvas.getContext('webgl2', {
+        /* Fixes blurry lines when drawing sharp edges */
+        antialias: false,
+        /* Required so we can export the WebGL plot */
+        preserveDrawingBuffer: true
+      });
+      if (!ctx) {
+        return;
+      }
+      setContext(ctx);
+    };
+    canvas.addEventListener('webglcontextlost', handleContextLost);
+    canvas.addEventListener('webglcontextrestored', initializeContext);
+    initializeContext();
+    return () => {
+      canvas.removeEventListener('webglcontextlost', handleContextLost);
+      canvas.removeEventListener('webglcontextrestored', initializeContext);
+    };
+  }, [chartRoot]);
+  if (!chartRoot) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(WebGLContext.Provider, {
+    value: context,
+    children: [/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsx)(CanvasPositioner, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("canvas", (0, _extends2.default)({
+        ref: handleRef
+      }, props, {
+        style: {
+          position: 'relative',
+          left: drawingArea.left,
+          top: drawingArea.top,
+          width: drawingArea.width,
+          height: drawingArea.height
+        }
+      }))
+    }), chartRoot), children]
+  });
+});
+if (process.env.NODE_ENV !== "production") WebGLProvider.displayName = "WebGLProvider";
+function CanvasPositioner({
+  children
+}) {
+  const store = (0, _useStore.useStore)();
+  const svgWidth = store.use(_useChartDimensions.selectorChartSvgWidth);
+  const svgHeight = store.use(_useChartDimensions.selectorChartSvgHeight);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      position: 'relative',
+      pointerEvents: 'none',
+      /* Ensures the canvas occupies the same space as the SVG */
+      gridArea: 'chart',
+      /* This property ensures the canvas renders below the SVG */
+      order: -1,
+      maxWidth: svgWidth,
+      maxHeight: svgHeight,
+      width: '100%',
+      height: '100%'
+    },
+    children: children
+  });
+}

package/internals/consumeSlots.js

@@ -61,7 +61,7 @@ const consumeSlots = (name, slotPropName, options, InComponent) => {
   function ConsumeSlotsInternal(props, ref) {
     const themedProps = (0, _styles.useThemeProps)({
       props,
-      // eslint-disable-next-line material-ui/mui-name-matches-component-name
+      // eslint-disable-next-line mui/material-ui-name-matches-component-name
       name
     });
     const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};

package/internals/consumeThemeProps.js

@@ -60,7 +60,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/React.forwardRef(function ConsumeThemeInternal(props, ref) {
   const themedProps = (0, _styles.useThemeProps)({
     props,
-    // eslint-disable-next-line material-ui/mui-name-matches-component-name
+    // eslint-disable-next-line mui/material-ui-name-matches-component-name
     name
   });
   const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};

package/internals/{getBarDimensions.d.ts → createGetBarDimensions.d.ts}

@@ -1,14 +1,12 @@
 import type { ChartsXAxisProps, ChartsYAxisProps, ComputedAxis, ScaleName } from "../models/axis.js";
 import type { ChartSeriesDefaultized } from "../models/seriesType/config.js";
-export declare function getBarDimensions(params: {
+export declare function createGetBarDimensions(params: {
   verticalLayout: boolean;
   xAxisConfig: ComputedAxis<ScaleName, any, ChartsXAxisProps>;
   yAxisConfig: ComputedAxis<ScaleName, any, ChartsYAxisProps>;
   series: ChartSeriesDefaultized<'bar'>;
-  dataIndex: number;
   numberOfGroups: number;
-  groupIndex: number;
-}): {
+}): (dataIndex: number, groupIndex: number) => {
   x: number;
   y: number;
   height: number;

package/internals/createGetBarDimensions.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGetBarDimensions = createGetBarDimensions;
+var _findMinMax = require("./findMinMax");
+var _getBandSize = require("./getBandSize");
+function shouldInvertStartCoordinate(verticalLayout, baseValue, reverse) {
+  const isVerticalAndPositive = verticalLayout && baseValue > 0;
+  const isHorizontalAndNegative = !verticalLayout && baseValue < 0;
+  const invertStartCoordinate = isVerticalAndPositive || isHorizontalAndNegative;
+  return reverse ? !invertStartCoordinate : invertStartCoordinate;
+}
+function createGetBarDimensions(params) {
+  const {
+    verticalLayout,
+    xAxisConfig,
+    yAxisConfig,
+    series,
+    numberOfGroups
+  } = params;
+  const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+  const reverse = (verticalLayout ? yAxisConfig.reverse : xAxisConfig.reverse) ?? false;
+  const {
+    barWidth,
+    offset
+  } = (0, _getBandSize.getBandSize)(baseScaleConfig.scale.bandwidth(), numberOfGroups, baseScaleConfig.barGapRatio);
+  const xScale = xAxisConfig.scale;
+  const yScale = yAxisConfig.scale;
+  return function getBarDimensions(dataIndex, groupIndex) {
+    const barOffset = groupIndex * (barWidth + offset);
+    const baseValue = baseScaleConfig.data[dataIndex];
+    const seriesValue = series.data[dataIndex];
+    if (seriesValue == null) {
+      return null;
+    }
+    const values = series.visibleStackedData[dataIndex];
+    const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
+    const [minValueCoord, maxValueCoord] = (0, _findMinMax.findMinMax)(valueCoordinates).map(v => Math.round(v));
+    let barSize = 0;
+    if (seriesValue !== 0) {
+      if (!series.hidden) {
+        barSize = Math.max(series.minBarSize, maxValueCoord - minValueCoord);
+      }
+    }
+    const shouldInvert = shouldInvertStartCoordinate(verticalLayout, seriesValue, reverse);
+    let startCoordinate = 0;
+    if (shouldInvert) {
+      startCoordinate = maxValueCoord - barSize;
+    } else {
+      startCoordinate = minValueCoord;
+    }
+    return {
+      x: verticalLayout ? xScale(baseValue) + barOffset : startCoordinate,
+      y: verticalLayout ? startCoordinate : yScale(baseValue) + barOffset,
+      height: verticalLayout ? barSize : barWidth,
+      width: verticalLayout ? barWidth : barSize
+    };
+  };
+}

package/internals/getChartPoint.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Transform mouse event position to coordinates relative to the layer container.
+ * (0, 0) is the top-left corner of the layer container.
+ * @param element The the layer container
+ * @param event The mouseEvent to transform
+ */
+export declare function getChartPoint(element: Element, event: Pick<MouseEvent, 'clientX' | 'clientY'>): DOMPoint;

package/internals/getChartPoint.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getChartPoint = getChartPoint;
+/**
+ * Transform mouse event position to coordinates relative to the layer container.
+ * (0, 0) is the top-left corner of the layer container.
+ * @param element The the layer container
+ * @param event The mouseEvent to transform
+ */
+function getChartPoint(element, event) {
+  const rect = element.getBoundingClientRect();
+  const style = getComputedStyle(element);
+  const transform = new DOMMatrix(style.transform);
+  const point = new DOMPoint(event.clientX - rect.left, event.clientY - rect.top);
+  return point.matrixTransform(transform.inverse());
+}

package/internals/getSeriesColorFn.d.ts

@@ -1,5 +1,6 @@
 import { type CommonSeriesType, type ColorCallbackValue } from "../models/seriesType/common.js";
+import { type ChartSeriesType } from "../models/seriesType/config.js";
 export declare function getSeriesColorFn<TValue>(series: {
-  color: NonNullable<CommonSeriesType<TValue>['color']>;
-  colorGetter?: CommonSeriesType<TValue>['colorGetter'];
+  color: NonNullable<CommonSeriesType<TValue, ChartSeriesType>['color']>;
+  colorGetter?: CommonSeriesType<TValue, ChartSeriesType>['colorGetter'];
 }): (data: ColorCallbackValue<TValue>) => string;

package/internals/identifierCleaner.d.ts

@@ -0,0 +1,11 @@
+import type { SeriesId, SeriesItemIdentifier } from "../models/index.js";
+import type { ChartSeriesType } from "../models/seriesType/config.js";
+/**
+ * Cleans an identifier by extracting only type, seriesId, and dataIndex properties.
+ * This is the common cleaner for most series types (bar, line, pie, scatter, radar, etc.).
+ */
+export declare const identifierCleanerSeriesIdDataIndex: <T extends ChartSeriesType>(identifier: {
+  type: T;
+  seriesId: SeriesId;
+  dataIndex?: number;
+}) => SeriesItemIdentifier<T>;

package/internals/identifierCleaner.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.identifierCleanerSeriesIdDataIndex = void 0;
+/**
+ * Cleans an identifier by extracting only type, seriesId, and dataIndex properties.
+ * This is the common cleaner for most series types (bar, line, pie, scatter, radar, etc.).
+ */
+const identifierCleanerSeriesIdDataIndex = identifier => {
+  // @ts-expect-error we need to trust the output type here, since T is generic
+  return {
+    type: identifier.type,
+    seriesId: identifier.seriesId,
+    dataIndex: identifier.dataIndex
+  };
+};
+exports.identifierCleanerSeriesIdDataIndex = identifierCleanerSeriesIdDataIndex;

package/internals/index.d.ts

@@ -3,6 +3,7 @@ export * from "../ChartsLabel/ChartsLabelMark.js";
 export * from "./components/NotRendered.js";
 export * from "../BarChart/BarLabel/BarLabelPlot.js";
 export * from "../BarChart/BarClipPath.js";
+export * from "./components/WebGLContext.js";
 export { useSeries } from "../hooks/useSeries.js";
 export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 export { useDrawingArea } from "../hooks/useDrawingArea.js";
@@ -15,6 +16,7 @@ export { useLinePlotData } from "../LineChart/useLinePlotData.js";
 export * from "../BarChart/useBarChartProps.js";
 export { processBarDataForPlot } from "../BarChart/useBarPlotData.js";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
+export * from "../ChartsContainer/useChartsContainerProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
 export * from "./seriesSelectorOfType.js";
@@ -24,6 +26,7 @@ export * from "./plugins/corePlugins/useChartId/index.js";
 export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";
 export * from "./plugins/corePlugins/useChartInteractionListener/index.js";
+export * from "./plugins/corePlugins/useChartSeriesConfig/index.js";
 export * from "./plugins/featurePlugins/useChartZAxis/index.js";
 export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
 export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";
@@ -47,7 +50,7 @@ export * from "../RadarChart/RadarChart.plugins.js";
 export * from "../PieChart/PieChart.plugins.js";
 export * from "./configInit.js";
 export * from "./getLabel.js";
-export * from "./getSVGPoint.js";
+export * from "./getChartPoint.js";
 export * from "./isDefined.js";
 export * from "./getScale.js";
 export * from "./stacking/index.js";
@@ -65,6 +68,7 @@ export * from "./commonNextFocusItem.js";
 export { getSeriesColorFn } from "./getSeriesColorFn.js";
 export { checkBarChartScaleErrors } from "../BarChart/checkBarChartScaleErrors.js";
 export { getBandSize } from "./getBandSize.js";
+export * from "./plugins/utils/defaultSeriesConfig.js";
 export { getAxisExtrema } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema.js";
 export * from "../context/ChartProvider/index.js";
 export * from "../context/ChartsSlotsContext.js";
@@ -77,4 +81,5 @@ export * from "./material/index.js";
 export * from "./createSvgIcon.js";
 export * from "./constants.js";
 export * from "./scales/index.js";
-export * from "./identifierSerializer.js";
+export * from "./identifierSerializer.js";
+export * from "./identifierCleaner.js";

package/internals/index.js

@@ -198,6 +198,18 @@ Object.keys(_BarClipPath).forEach(function (key) {
     }
   });
 });
+var _WebGLContext = require("./components/WebGLContext");
+Object.keys(_WebGLContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WebGLContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _WebGLContext[key];
+    }
+  });
+});
 var _useSeries = require("../hooks/useSeries");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useDrawingArea = require("../hooks/useDrawingArea");
@@ -221,6 +233,18 @@ Object.keys(_useBarChartProps).forEach(function (key) {
 });
 var _useBarPlotData = require("../BarChart/useBarPlotData");
 var _useRadarChartProps = require("../RadarChart/useRadarChartProps");
+var _useChartsContainerProps = require("../ChartsContainer/useChartsContainerProps");
+Object.keys(_useChartsContainerProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartsContainerProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartsContainerProps[key];
+    }
+  });
+});
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
 Object.keys(_useChartContainerProps).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -307,6 +331,18 @@ Object.keys(_useChartInteractionListener).forEach(function (key) {
     }
   });
 });
+var _useChartSeriesConfig = require("./plugins/corePlugins/useChartSeriesConfig");
+Object.keys(_useChartSeriesConfig).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartSeriesConfig[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartSeriesConfig[key];
+    }
+  });
+});
 var _useChartZAxis = require("./plugins/featurePlugins/useChartZAxis");
 Object.keys(_useChartZAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -561,15 +597,15 @@ Object.keys(_getLabel).forEach(function (key) {
     }
   });
 });
-var _getSVGPoint = require("./getSVGPoint");
-Object.keys(_getSVGPoint).forEach(function (key) {
+var _getChartPoint = require("./getChartPoint");
+Object.keys(_getChartPoint).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _getSVGPoint[key]) return;
+  if (key in exports && exports[key] === _getChartPoint[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _getSVGPoint[key];
+      return _getChartPoint[key];
     }
   });
 });
@@ -744,6 +780,18 @@ Object.keys(_commonNextFocusItem).forEach(function (key) {
 var _getSeriesColorFn = require("./getSeriesColorFn");
 var _checkBarChartScaleErrors = require("../BarChart/checkBarChartScaleErrors");
 var _getBandSize = require("./getBandSize");
+var _defaultSeriesConfig = require("./plugins/utils/defaultSeriesConfig");
+Object.keys(_defaultSeriesConfig).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _defaultSeriesConfig[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _defaultSeriesConfig[key];
+    }
+  });
+});
 var _getAxisExtrema = require("./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema");
 var _ChartProvider = require("../context/ChartProvider");
 Object.keys(_ChartProvider).forEach(function (key) {
@@ -888,4 +936,16 @@ Object.keys(_identifierSerializer).forEach(function (key) {
       return _identifierSerializer[key];
     }
   });
+});
+var _identifierCleaner = require("./identifierCleaner");
+Object.keys(_identifierCleaner).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _identifierCleaner[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _identifierCleaner[key];
+    }
+  });
 });

package/internals/plugins/corePlugins/corePlugins.d.ts

@@ -1,7 +1,9 @@
 import { type UseChartAnimationSignature } from "./useChartAnimation/index.js";
 import { type UseChartDimensionsSignature } from "./useChartDimensions/index.js";
+import { type UseChartElementRefSignature } from "./useChartElementRef/index.js";
 import { type UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature/index.js";
 import { type UseChartIdSignature, type UseChartIdParameters } from "./useChartId/index.js";
+import { type UseChartSeriesConfigSignature, type UseChartSeriesConfigParameters } from "./useChartSeriesConfig/index.js";
 import { type UseChartSeriesSignature } from "./useChartSeries/index.js";
 import { type UseChartInteractionListenerSignature } from "./useChartInteractionListener/index.js";
 import type { ChartSeriesType } from "../../../models/seriesType/config.js";
@@ -9,6 +11,6 @@ import type { ChartSeriesType } from "../../../models/seriesType/config.js";
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the Charts components.
  */
-export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.js").ChartPlugin<UseChartIdSignature>, import("../models/index.js").ChartPlugin<UseChartExperimentalFeaturesSignature>, import("../models/index.js").ChartPlugin<UseChartDimensionsSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesSignature>, import("../models/index.js").ChartPlugin<UseChartInteractionListenerSignature>, import("../models/index.js").ChartPlugin<UseChartAnimationSignature>];
-export type ChartCorePluginSignatures<TSeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartIdSignature, UseChartExperimentalFeaturesSignature, UseChartDimensionsSignature, UseChartSeriesSignature<TSeriesType>, UseChartAnimationSignature, UseChartInteractionListenerSignature];
-export interface ChartCorePluginParameters extends UseChartIdParameters {}
+export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.js").ChartPlugin<UseChartElementRefSignature>, import("../models/index.js").ChartPlugin<UseChartIdSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesConfigSignature>, import("../models/index.js").ChartPlugin<UseChartExperimentalFeaturesSignature>, import("../models/index.js").ChartPlugin<UseChartDimensionsSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesSignature>, import("../models/index.js").ChartPlugin<UseChartInteractionListenerSignature>, import("../models/index.js").ChartPlugin<UseChartAnimationSignature>];
+export type ChartCorePluginSignatures<TSeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartElementRefSignature, UseChartIdSignature, UseChartSeriesConfigSignature<TSeriesType>, UseChartExperimentalFeaturesSignature, UseChartDimensionsSignature, UseChartSeriesSignature<TSeriesType>, UseChartAnimationSignature, UseChartInteractionListenerSignature];
+export interface ChartCorePluginParameters extends UseChartIdParameters, UseChartSeriesConfigParameters {}

package/internals/plugins/corePlugins/corePlugins.js

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.CHART_CORE_PLUGINS = void 0;
 var _useChartAnimation = require("./useChartAnimation");
 var _useChartDimensions = require("./useChartDimensions");
+var _useChartElementRef = require("./useChartElementRef");
 var _useChartExperimentalFeature = require("./useChartExperimentalFeature");
 var _useChartId = require("./useChartId");
+var _useChartSeriesConfig = require("./useChartSeriesConfig");
 var _useChartSeries = require("./useChartSeries");
 var _useChartInteractionListener = require("./useChartInteractionListener");
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the Charts components.
  */
-const CHART_CORE_PLUGINS = exports.CHART_CORE_PLUGINS = [_useChartId.useChartId, _useChartExperimentalFeature.useChartExperimentalFeatures, _useChartDimensions.useChartDimensions, _useChartSeries.useChartSeries, _useChartInteractionListener.useChartInteractionListener, _useChartAnimation.useChartAnimation];
+const CHART_CORE_PLUGINS = exports.CHART_CORE_PLUGINS = [_useChartElementRef.useChartElementRef, _useChartId.useChartId, _useChartSeriesConfig.useChartSeriesConfig, _useChartExperimentalFeature.useChartExperimentalFeatures, _useChartDimensions.useChartDimensions, _useChartSeries.useChartSeries, _useChartInteractionListener.useChartInteractionListener, _useChartAnimation.useChartAnimation];

package/internals/plugins/corePlugins/index.d.ts

@@ -1,2 +1,3 @@
 export { CHART_CORE_PLUGINS } from "./corePlugins.js";
-export type { ChartCorePluginSignatures, ChartCorePluginParameters } from "./corePlugins.js";
+export type { ChartCorePluginSignatures, ChartCorePluginParameters } from "./corePlugins.js";
+export type { UseChartElementRefSignature, UseChartElementRefInstance } from "./useChartElementRef/index.js";

package/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.selectors.d.ts

@@ -1,3 +1,3 @@
-export declare const selectorChartSkipAnimation: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartSkipAnimation: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => boolean;

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -19,8 +19,11 @@ const MAX_COMPUTE_RUN = 10;
 const useChartDimensions = ({
   params,
   store,
-  svgRef
+  instance
 }) => {
+  const {
+    svgRef
+  } = instance;
   const hasInSize = params.width !== undefined && params.height !== undefined;
   const stateRef = React.useRef({
     displayError: false,

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.d.ts

@@ -3,7 +3,7 @@ import type { UseChartDimensionsSignature } from "./useChartDimensions.types.js"
 import { type ChartState } from "../../models/chart.js";
 export declare const selectorChartDimensionsState: ChartRootSelector<UseChartDimensionsSignature>;
 export declare const selectorChartMargin: (state: ChartState<[UseChartDimensionsSignature]>) => import("./useChartDimensions.types.js").ChartMargin;
-export declare const selectorChartDrawingArea: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartDrawingArea: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => {
   width: number;
@@ -13,15 +13,15 @@ export declare const selectorChartDrawingArea: (args_0: import("../useChartId/us
   top: number;
   bottom: number;
 };
-export declare const selectorChartSvgWidth: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartSvgWidth: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => number;
-export declare const selectorChartSvgHeight: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartSvgHeight: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => number;
-export declare const selectorChartPropsWidth: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartPropsWidth: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => number | undefined;
-export declare const selectorChartPropsHeight: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartPropsHeight: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => number | undefined;

package/internals/plugins/corePlugins/useChartElementRef/index.d.ts

@@ -0,0 +1,2 @@
+export { useChartElementRef } from "./useChartElementRef.js";
+export type { UseChartElementRefSignature, UseChartElementRefInstance } from "./useChartElementRef.types.js";

package/internals/plugins/corePlugins/useChartElementRef/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useChartElementRef", {
+  enumerable: true,
+  get: function () {
+    return _useChartElementRef.useChartElementRef;
+  }
+});
+var _useChartElementRef = require("./useChartElementRef");

package/internals/plugins/corePlugins/useChartElementRef/useChartElementRef.d.ts

@@ -0,0 +1,3 @@
+import { type ChartPlugin } from "../../models/index.js";
+import { type UseChartElementRefSignature } from "./useChartElementRef.types.js";
+export declare const useChartElementRef: ChartPlugin<UseChartElementRefSignature>;

package/internals/plugins/corePlugins/useChartElementRef/useChartElementRef.js

@@ -0,0 +1,21 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartElementRef = void 0;
+var React = _interopRequireWildcard(require("react"));
+const useChartElementRef = () => {
+  const svgRef = React.useRef(null);
+  const chartRootRef = React.useRef(null);
+  return {
+    instance: {
+      svgRef,
+      chartRootRef
+    }
+  };
+};
+exports.useChartElementRef = useChartElementRef;
+useChartElementRef.params = {};