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

package/esm/hooks/useAxisTicks.d.ts

@@ -0,0 +1,14 @@
+import { type TickItem } from "./useTicks.js";
+import { type AxisId } from "../models/axis.js";
+/**
+ * Returns the ticks for the given X axis. Ticks outside the drawing area are not included.
+ * The ticks returned from this hook are not grouped, i.e., they don't follow the `groups` prop of the axis.
+ * @param axisId The id of the X axis.
+ */
+export declare function useXAxisTicks(axisId: AxisId): TickItem[];
+/**
+ * Returns the ticks for the given Y axis. Ticks outside the drawing area are not included.
+ * The ticks returned from this hook are not grouped, i.e., they don't follow the `groups` prop of the axis.
+ * @param axisId The id of the Y axis.
+ */
+export declare function useYAxisTicks(axisId: AxisId): TickItem[];

package/esm/hooks/useAxisTicks.js

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useThemeProps } from '@mui/material/styles';
+import { useXAxes, useYAxes } from "./useAxis.js";
+import { useTicks } from "./useTicks.js";
+import { defaultProps } from "../ChartsXAxis/utilities.js";
+
+/**
+ * Returns the ticks for the given X axis. Ticks outside the drawing area are not included.
+ * The ticks returned from this hook are not grouped, i.e., they don't follow the `groups` prop of the axis.
+ * @param axisId The id of the X axis.
+ */
+export function useXAxisTicks(axisId) {
+  const {
+    xAxis: xAxes
+  } = useXAxes();
+  const axis = xAxes[axisId];
+
+  // FIXME: `useAxisTicksProps` does this, but should we do it here?
+  // eslint-disable-next-line mui/material-ui-name-matches-component-name
+  const themedProps = useThemeProps({
+    props: axis,
+    name: 'MuiChartsXAxis'
+  });
+  const defaultizedProps = _extends({}, defaultProps, themedProps);
+  return useTicks({
+    scale: axis.scale,
+    tickNumber: axis.tickNumber,
+    valueFormatter: defaultizedProps.valueFormatter,
+    tickInterval: defaultizedProps.tickInterval,
+    tickPlacement: defaultizedProps.tickPlacement,
+    tickLabelPlacement: defaultizedProps.tickLabelPlacement,
+    tickSpacing: defaultizedProps.tickSpacing,
+    direction: 'x',
+    ordinalTimeTicks: 'ordinalTimeTicks' in defaultizedProps ? defaultizedProps.ordinalTimeTicks : undefined
+  });
+}
+
+/**
+ * Returns the ticks for the given Y axis. Ticks outside the drawing area are not included.
+ * The ticks returned from this hook are not grouped, i.e., they don't follow the `groups` prop of the axis.
+ * @param axisId The id of the Y axis.
+ */
+export function useYAxisTicks(axisId) {
+  const {
+    yAxis: yAxes
+  } = useYAxes();
+  const axis = yAxes[axisId];
+
+  // FIXME: `useAxisTicksProps` does this, but should we do it here?
+  // eslint-disable-next-line mui/material-ui-name-matches-component-name
+  const themedProps = useThemeProps({
+    props: axis,
+    name: 'MuiChartsYAxis'
+  });
+  const defaultizedProps = _extends({}, defaultProps, themedProps);
+  return useTicks({
+    scale: axis.scale,
+    tickNumber: axis.tickNumber,
+    valueFormatter: defaultizedProps.valueFormatter,
+    tickInterval: defaultizedProps.tickInterval,
+    tickPlacement: defaultizedProps.tickPlacement,
+    tickLabelPlacement: defaultizedProps.tickLabelPlacement,
+    tickSpacing: defaultizedProps.tickSpacing,
+    direction: 'y',
+    // @ts-expect-error
+    ordinalTimeTicks: defaultizedProps.ordinalTimeTicks
+  });
+}

package/esm/hooks/useChartRootRef.d.ts

@@ -3,4 +3,4 @@ import type * as React from 'react';
  * Get the ref for the root chart element.
  * @returns The root chart element ref.
  */
-export declare function useChartRootRef(): React.RefObject<HTMLDivElement | null>;
+export declare function useChartRootRef<T extends Element = HTMLDivElement>(): React.RefObject<T | null>;

package/esm/hooks/useChartRootRef.js

@@ -7,6 +7,8 @@ import { useChartContext } from "../context/ChartProvider/index.js";
  * @returns The root chart element ref.
  */
 export function useChartRootRef() {
-  const context = useChartContext();
-  return context.chartRootRef;
+  const {
+    instance
+  } = useChartContext();
+  return instance.chartRootRef;
 }

package/esm/hooks/useInteractionItemProps.d.ts

@@ -6,7 +6,7 @@ import type { ChartSeriesType } from "../models/seriesType/config.js";
 import type { SeriesItemIdentifier } from "../models/seriesType/index.js";
 import type { ChartInstance } from "../internals/plugins/models/index.js";
 import type { UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
-export declare const useInteractionItemProps: (data: SeriesItemIdentifierWithData, skip?: boolean) => {
+export declare const useInteractionItemProps: <SeriesType extends ChartSeriesType>(data: SeriesItemIdentifierWithData<SeriesType>, skip?: boolean) => {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;

package/esm/hooks/useLegend.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeries/index.js";
+import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 import { useSeries } from "./useSeries.js";
 import { useStore } from "../internals/store/useStore.js";
 function getSeriesToDisplay(series, seriesConfig) {

package/esm/hooks/useSvgRef.js

@@ -7,9 +7,8 @@ import { useChartContext } from "../context/ChartProvider/index.js";
  * @returns The SVG ref.
  */
 export function useSvgRef() {
-  const context = useChartContext();
-  if (!context) {
-    throw new Error(['MUI X Charts: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartContainer parent component.'].join('\n'));
-  }
-  return context.svgRef;
+  const {
+    instance
+  } = useChartContext();
+  return instance.svgRef;
 }

package/esm/hooks/useTicks.d.ts

@@ -46,13 +46,28 @@ export interface TickParams {
    */
   tickSpacing?: number;
 }
-export type TickItemType = {
+export type TickItem = {
   /**
-   * This property is undefined only if it's the tick closing the last band
+   * The value of the tick.
+   * It is only `undefined` if it's the tick closing the last band.
    */
   value?: any;
+  /**
+   * The formatted value of the tick.
+   * It is only `undefined` if it's the tick closing the last band.
+   */
   formattedValue?: string;
+  /**
+   * The offset in pixels relative to the SVG origin.
+   * For an x-axis, it is relative to the left side of the SVG.
+   * For a y-axis, it is relative to the top side of the SVG.
+   */
   offset: number;
+  /**
+   * The offset in pixels relative to the tick position.
+   * For an x-axis, a positive value means the label is shifted to the right of the tick.
+   * For a y-axis, a positive value means the label is shifted downwards from the tick.
+   */
   labelOffset: number;
 };
 /**
@@ -69,8 +84,8 @@ interface GetTicksOptions extends Pick<TickParams, 'tickInterval' | 'tickPlaceme
   isInside: (offset: number) => boolean;
   ordinalTimeTicks?: OrdinalTimeTicks;
 }
-export declare function getTicks(options: GetTicksOptions): TickItemType[];
+export declare function getTicks(options: GetTicksOptions): TickItem[];
 export declare function useTicks(options: Omit<GetTicksOptions, 'isInside'> & {
   direction: 'x' | 'y';
-}): TickItemType[];
+}): TickItem[];
 export {};

package/esm/index.d.ts

@@ -24,8 +24,10 @@ export * from "./SparkLineChart/index.js";
 export * from "./Gauge/index.js";
 export * from "./RadarChart/index.js";
 export * from "./ChartsSurface/index.js";
+export { ChartsContainer } from "./ChartsContainer/index.js";
+export type { ChartsContainerProps, ChartsContainerSlots, ChartsContainerSlotProps } from "./ChartsContainer/index.js";
 export { ChartContainer } from "./ChartContainer/index.js";
-export type { ChartContainerProps } from "./ChartContainer/index.js";
+export type { ChartContainerProps, ChartContainerSlots, ChartContainerSlotProps } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";
 export * from "./ChartsWrapper/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.26.0
+ * @mui/x-charts v9.0.0-alpha.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -31,6 +31,7 @@ export * from "./SparkLineChart/index.js";
 export * from "./Gauge/index.js";
 export * from "./RadarChart/index.js";
 export * from "./ChartsSurface/index.js";
+export { ChartsContainer } from "./ChartsContainer/index.js";
 export { ChartContainer } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";

package/esm/internals/commonNextFocusItem.d.ts

@@ -36,4 +36,6 @@ export declare function createGetPreviousSeriesFocusedItem<InSeriesType extends
  * The set of series types compatible with this navigation action.
  */
 compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: SeriesItemIdentifier<InSeriesType> | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
+export type ComposableCartesianChartSeriesType = 'bar' | 'line' | 'scatter' | ('rangeBar' extends ChartSeriesType ? 'rangeBar' : never);
+export declare const composableCartesianSeriesTypes: Set<ComposableCartesianChartSeriesType>;
 export {};

package/esm/internals/commonNextFocusItem.js

@@ -1,8 +1,8 @@
 import { getPreviousNonEmptySeries } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getPreviousNonEmptySeries.js";
 import { getMaxSeriesLength } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getMaxSeriesLength.js";
-import { selectorChartSeriesProcessed } from "./plugins/corePlugins/useChartSeries/index.js";
 import { getNextNonEmptySeries } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getNextNonEmptySeries.js";
 import { seriesHasData } from "./seriesHasData.js";
+import { selectorChartSeriesProcessed } from "./plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
 export function createGetNextIndexFocusedItem(
 /**
  * The set of series types compatible with this navigation action.
@@ -119,4 +119,5 @@ compatibleSeriesTypes) {
       dataIndex
     };
   };
-}
+}
+export const composableCartesianSeriesTypes = new Set(['bar', 'line', 'scatter', 'rangeBar']);

package/esm/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/esm/internals/components/WebGLContext.js

@@ -0,0 +1,108 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children"];
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import useForkRef from '@mui/utils/useForkRef';
+import { useChartRootRef, useDrawingArea } from "../../hooks/index.js";
+import { selectorChartSvgHeight, selectorChartSvgWidth } from "../plugins/corePlugins/useChartDimensions/index.js";
+import { useStore } from "../store/useStore.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const WebGLContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== "production") WebGLContext.displayName = "WebGLContext";
+export function useWebGLContext() {
+  return React.useContext(WebGLContext);
+}
+export const WebGLProvider = /*#__PURE__*/React.forwardRef(function WebGLProvider(_ref, ref) {
+  let {
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const canvasRef = React.useRef(null);
+  const [context, setContext] = React.useState(null);
+  const handleRef = useForkRef(canvasRef, ref);
+  const chartRoot = useChartRootRef().current;
+  const drawingArea = 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__*/_jsxs(WebGLContext.Provider, {
+    value: context,
+    children: [/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsx(CanvasPositioner, {
+      children: /*#__PURE__*/_jsx("canvas", _extends({
+        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 = useStore();
+  const svgWidth = store.use(selectorChartSvgWidth);
+  const svgHeight = store.use(selectorChartSvgHeight);
+  return /*#__PURE__*/_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/esm/internals/consumeSlots.js

@@ -55,7 +55,7 @@ export const consumeSlots = (name, slotPropName, options, InComponent) => {
   function ConsumeSlotsInternal(props, ref) {
     const themedProps = 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/esm/internals/consumeThemeProps.js

@@ -54,7 +54,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/React.forwardRef(function ConsumeThemeInternal(props, ref) {
   const themedProps = 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/esm/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/esm/internals/createGetBarDimensions.js

@@ -0,0 +1,55 @@
+import { findMinMax } from "./findMinMax.js";
+import { getBandSize } from "./getBandSize.js";
+function shouldInvertStartCoordinate(verticalLayout, baseValue, reverse) {
+  const isVerticalAndPositive = verticalLayout && baseValue > 0;
+  const isHorizontalAndNegative = !verticalLayout && baseValue < 0;
+  const invertStartCoordinate = isVerticalAndPositive || isHorizontalAndNegative;
+  return reverse ? !invertStartCoordinate : invertStartCoordinate;
+}
+export 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
+  } = 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] = 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/esm/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/esm/internals/getChartPoint.js

@@ -0,0 +1,13 @@
+/**
+ * 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 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/esm/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/esm/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/esm/internals/identifierCleaner.js

@@ -0,0 +1,12 @@
+/**
+ * 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 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
+  };
+};

package/esm/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";
@@ -34,6 +37,7 @@ export * from "./plugins/featurePlugins/useChartVisibilityManager/index.js";
 export * from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 export * from "./plugins/featurePlugins/useChartClosestPoint/index.js";
 export * from "./plugins/featurePlugins/useChartBrush/index.js";
+export * from "./plugins/featurePlugins/useChartItemClick/index.js";
 export * from "./plugins/utils/selectors.js";
 export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.js";
 export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js";
@@ -46,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";
@@ -64,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";
@@ -76,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/esm/internals/index.js

@@ -4,6 +4,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";
 
 // hooks
 export { useSeries } from "../hooks/useSeries.js";
@@ -18,6 +19,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";
@@ -29,6 +31,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";
@@ -39,6 +42,7 @@ export * from "./plugins/featurePlugins/useChartVisibilityManager/index.js";
 export * from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 export * from "./plugins/featurePlugins/useChartClosestPoint/index.js";
 export * from "./plugins/featurePlugins/useChartBrush/index.js";
+export * from "./plugins/featurePlugins/useChartItemClick/index.js";
 export * from "./plugins/utils/selectors.js";
 export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.js";
 export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js";
@@ -46,7 +50,6 @@ export * from "./store/useCharts.js";
 export * from "./store/useStore.js";
 
 // plugins configs
-
 export * from "../BarChart/BarChart.plugins.js";
 export * from "../LineChart/LineChart.plugins.js";
 export * from "../ScatterChart/ScatterChart.plugins.js";
@@ -56,7 +59,7 @@ export * from "../PieChart/PieChart.plugins.js";
 // utils
 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";
@@ -74,6 +77,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";
 
 // contexts
 export { getAxisExtrema } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema.js";
@@ -90,4 +94,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/esm/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 {}