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

package/esm/RadarChart/seriesConfig/index.js

@@ -7,6 +7,7 @@ import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
 import keyboardFocusHandler from "./keyboardFocusHandler.js";
 import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.js";
+import { identifierCleanerSeriesIdDataIndex } from "../../internals/identifierCleaner.js";
 export const radarSeriesConfig = {
   colorProcessor: getColor,
   seriesProcessor,
@@ -18,5 +19,6 @@ export const radarSeriesConfig = {
   radiusExtremumGetter,
   rotationExtremumGetter,
   keyboardFocusHandler,
-  identifierSerializer: identifierSerializerSeriesIdDataIndex
+  identifierSerializer: identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: identifierCleanerSeriesIdDataIndex
 };

package/esm/RadarChart/seriesConfig/legend.d.ts

@@ -1,3 +1,3 @@
-import { type LegendGetter } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type LegendGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const legendGetter: LegendGetter<'radar'>;
 export default legendGetter;

package/esm/RadarChart/seriesConfig/legend.js

@@ -11,7 +11,6 @@ const legendGetter = params => {
     }
     acc.push({
       type: 'radar',
-      id: seriesId,
       seriesId,
       color: series[seriesId].color,
       label: formattedLabel,

package/esm/RadarChart/seriesConfig/seriesProcessor.d.ts

@@ -1,3 +1,3 @@
-import { type SeriesProcessor } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type SeriesProcessor } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const seriesProcessor: SeriesProcessor<'radar'>;
 export default seriesProcessor;

package/esm/RadarChart/seriesConfig/tooltip.d.ts

@@ -1,4 +1,4 @@
-import type { AxisTooltipGetter, TooltipGetter } from "../../internals/plugins/models/index.js";
+import type { AxisTooltipGetter, TooltipGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipGetter: TooltipGetter<'radar'>;
 export declare const axisTooltipGetter: AxisTooltipGetter<'radar', 'rotation'>;
 export default tooltipGetter;

package/esm/RadarChart/seriesConfig/tooltipPosition.d.ts

@@ -1,3 +1,3 @@
-import type { TooltipItemPositionGetter } from "../../internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.js";
+import type { TooltipItemPositionGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'radar'>;
 export default tooltipItemPositionGetter;

package/esm/ScatterChart/BatchScatter.d.ts

@@ -1,7 +1,7 @@
 import { type DefaultizedScatterSeriesType } from "../models/seriesType/scatter.js";
 import { type D3Scale } from "../models/axis.js";
 import { type ScatterClasses } from "./scatterClasses.js";
-import { type ColorGetter } from "../internals/plugins/models/seriesConfig/index.js";
+import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export interface BatchScatterProps {
   series: DefaultizedScatterSeriesType;
   xScale: D3Scale;

package/esm/ScatterChart/Scatter.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type ScatterMarkerSlotProps, type ScatterMarkerSlots } from "./ScatterMarker.types.js";
 import { type DefaultizedScatterSeriesType, type ScatterItemIdentifier } from "../models/seriesType/scatter.js";
 import { type D3Scale } from "../models/axis.js";
-import { type ColorGetter } from "../internals/plugins/models/seriesConfig/index.js";
+import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 import { type ScatterClasses } from "./scatterClasses.js";
 export interface ScatterProps {
   series: DefaultizedScatterSeriesType;

package/esm/ScatterChart/ScatterChart.js

@@ -72,6 +72,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   apiRef: PropTypes.shape({
     current: PropTypes.object
   }),
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap: PropTypes.number,
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -146,7 +151,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['scatter']).isRequired
   })),
   /**
@@ -159,7 +164,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -189,7 +194,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['scatter']).isRequired
   })),
   /**
@@ -286,7 +291,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['scatter']).isRequired
   }),
   /**

package/esm/ScatterChart/scatterClasses.js

@@ -2,9 +2,9 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getScatterUtilityClass(slot) {
-  return generateUtilityClass('MuiScatter', slot);
+  return generateUtilityClass('MuiScatterChart', slot);
 }
-export const scatterClasses = generateUtilityClasses('MuiScatter', ['root']);
+export const scatterClasses = generateUtilityClasses('MuiScatterChart', ['root']);
 export const useUtilityClasses = classes => {
   const slots = {
     root: ['root']

package/esm/ScatterChart/seriesConfig/extremums.d.ts

@@ -1,3 +1,3 @@
-import { type CartesianExtremumGetter } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type CartesianExtremumGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const getExtremumX: CartesianExtremumGetter<'scatter'>;
 export declare const getExtremumY: CartesianExtremumGetter<'scatter'>;

package/esm/ScatterChart/seriesConfig/getColor.d.ts

@@ -1,3 +1,3 @@
-import { type ColorProcessor } from "../../internals/plugins/models/index.js";
+import { type ColorProcessor } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const getColor: ColorProcessor<'scatter'>;
 export default getColor;

package/esm/ScatterChart/seriesConfig/getSeriesWithDefaultValues.d.ts

@@ -1,3 +1,3 @@
-import type { GetSeriesWithDefaultValues } from "../../internals/plugins/models/seriesConfig/index.js";
+import type { GetSeriesWithDefaultValues } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'scatter'>;
 export default getSeriesWithDefaultValues;

package/esm/ScatterChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
-import { type ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type ChartSeriesTypeConfig } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const scatterSeriesConfig: ChartSeriesTypeConfig<'scatter'>;

package/esm/ScatterChart/seriesConfig/index.js

@@ -7,6 +7,7 @@ import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
 import keyboardFocusHandler from "./keyboardFocusHandler.js";
 import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.js";
+import { identifierCleanerSeriesIdDataIndex } from "../../internals/identifierCleaner.js";
 export const scatterSeriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
@@ -17,5 +18,6 @@ export const scatterSeriesConfig = {
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues,
   keyboardFocusHandler,
-  identifierSerializer: identifierSerializerSeriesIdDataIndex
+  identifierSerializer: identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: identifierCleanerSeriesIdDataIndex
 };

package/esm/ScatterChart/seriesConfig/keyboardFocusHandler.d.ts

@@ -1,3 +1,4 @@
+import { type ComposableCartesianChartSeriesType } from "../../internals/commonNextFocusItem.js";
 import type { KeyboardFocusHandler } from "../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
-declare const keyboardFocusHandler: KeyboardFocusHandler<'scatter', 'bar' | 'line' | 'scatter'>;
+declare const keyboardFocusHandler: KeyboardFocusHandler<'scatter', ComposableCartesianChartSeriesType>;
 export default keyboardFocusHandler;

package/esm/ScatterChart/seriesConfig/keyboardFocusHandler.js

@@ -1,15 +1,14 @@
-import { createGetNextIndexFocusedItem, createGetPreviousIndexFocusedItem, createGetNextSeriesFocusedItem, createGetPreviousSeriesFocusedItem } from "../../internals/commonNextFocusItem.js";
-const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
+import { createGetNextIndexFocusedItem, createGetPreviousIndexFocusedItem, createGetNextSeriesFocusedItem, createGetPreviousSeriesFocusedItem, composableCartesianSeriesTypes } from "../../internals/commonNextFocusItem.js";
 const keyboardFocusHandler = event => {
   switch (event.key) {
     case 'ArrowRight':
-      return createGetNextIndexFocusedItem(outSeriesTypes);
+      return createGetNextIndexFocusedItem(composableCartesianSeriesTypes);
     case 'ArrowLeft':
-      return createGetPreviousIndexFocusedItem(outSeriesTypes);
+      return createGetPreviousIndexFocusedItem(composableCartesianSeriesTypes);
     case 'ArrowDown':
-      return createGetPreviousSeriesFocusedItem(outSeriesTypes);
+      return createGetPreviousSeriesFocusedItem(composableCartesianSeriesTypes);
     case 'ArrowUp':
-      return createGetNextSeriesFocusedItem(outSeriesTypes);
+      return createGetNextSeriesFocusedItem(composableCartesianSeriesTypes);
     default:
       return null;
   }

package/esm/ScatterChart/seriesConfig/legend.d.ts

@@ -1,3 +1,3 @@
-import { type LegendGetter } from "../../internals/plugins/models/index.js";
+import { type LegendGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const legendGetter: LegendGetter<'scatter'>;
 export default legendGetter;

package/esm/ScatterChart/seriesConfig/legend.js

@@ -12,7 +12,6 @@ const legendGetter = params => {
     acc.push({
       type: 'scatter',
       markType: series[seriesId].labelMarkType,
-      id: seriesId,
       seriesId,
       color: series[seriesId].color,
       label: formattedLabel

package/esm/ScatterChart/seriesConfig/seriesProcessor.d.ts

@@ -1,3 +1,3 @@
-import { type SeriesProcessor } from "../../internals/plugins/models/index.js";
+import { type SeriesProcessor } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const seriesProcessor: SeriesProcessor<'scatter'>;
 export default seriesProcessor;

package/esm/ScatterChart/seriesConfig/tooltip.d.ts

@@ -1,3 +1,3 @@
-import type { TooltipGetter } from "../../internals/plugins/models/index.js";
+import type { TooltipGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipGetter: TooltipGetter<'scatter'>;
 export default tooltipGetter;

package/esm/ScatterChart/seriesConfig/tooltipPosition.d.ts

@@ -1,3 +1,3 @@
-import type { TooltipItemPositionGetter } from "../../internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.js";
+import type { TooltipItemPositionGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'scatter'>;
 export default tooltipItemPositionGetter;

package/esm/SparkLineChart/SparkLineChart.d.ts

@@ -13,7 +13,7 @@ import type { BarPlotSlots, BarPlotSlotProps } from "../BarChart/BarPlot.js";
 import type { ChartMargin } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js";
 export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots {}
 export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {}
-export interface SparkLineChartProps<PlotType extends 'line' | 'bar' = 'line' | 'bar'> extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
+export interface SparkLineChartProps<PlotType extends 'line' | 'bar' = 'line' | 'bar'> extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'axesGap' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
   /**
    * The xAxis configuration.
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.

package/esm/SparkLineChart/SparkLineChart.js

@@ -263,23 +263,23 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['bar']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['line']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['scatter']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['pie']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['radar']).isRequired
   })]).isRequired),
   /**
@@ -296,7 +296,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -326,23 +326,23 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['bar']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['line']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['scatter']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['pie']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['radar']).isRequired
   })]).isRequired),
   /**
@@ -442,23 +442,23 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    */
   tooltipItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['bar']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['line']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['scatter']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['pie']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['radar']).isRequired
   })]),
   /**

package/esm/context/ChartProvider/ChartProvider.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { ChartProviderProps } from "./ChartProvider.types.js";
 import { type ChartAnyPluginSignature } from "../../internals/plugins/models/index.js";
-import { type ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";
-import { type ChartSeriesType } from "../../models/seriesType/config.js";
-export declare const defaultSeriesConfig: ChartSeriesConfig<'bar' | 'scatter' | 'line' | 'pie'>;
-declare function ChartProvider<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]>(props: React.PropsWithChildren<ChartProviderProps<TSeriesType, TSignatures>>): import("react/jsx-runtime").JSX.Element;
+import type { ChartSeriesType } from "../../models/seriesType/config.js";
+import type { ChartCorePluginSignatures } from "../../internals/plugins/corePlugins/index.js";
+declare function ChartProvider<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = ChartCorePluginSignatures<TSeriesType>>(props: React.PropsWithChildren<ChartProviderProps<TSeriesType, TSignatures>>): import("react/jsx-runtime").JSX.Element;
 export { ChartProvider };

package/esm/context/ChartProvider/ChartProvider.js

@@ -8,18 +8,7 @@ import { useChartTooltip } from "../../internals/plugins/featurePlugins/useChart
 import { useChartInteraction } from "../../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useChartZAxis } from "../../internals/plugins/featurePlugins/useChartZAxis/index.js";
 import { useChartHighlight } from "../../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.js";
-import { barSeriesConfig } from "../../BarChart/seriesConfig/index.js";
-import { scatterSeriesConfig } from "../../ScatterChart/seriesConfig/index.js";
-import { lineSeriesConfig } from "../../LineChart/seriesConfig/index.js";
-import { pieSeriesConfig } from "../../PieChart/seriesConfig/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const defaultSeriesConfig = {
-  bar: barSeriesConfig,
-  scatter: scatterSeriesConfig,
-  line: lineSeriesConfig,
-  pie: pieSeriesConfig
-};
-
 // For consistency with the v7, the cartesian axes are set by default.
 // To remove them, you can provide a `plugins` props.
 const defaultPlugins = [useChartZAxis, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight];
@@ -27,12 +16,11 @@ function ChartProvider(props) {
   const {
     children,
     plugins = defaultPlugins,
-    pluginParams = {},
-    seriesConfig = defaultSeriesConfig
+    pluginParams = {}
   } = props;
   const {
     contextValue
-  } = useCharts(plugins, pluginParams, seriesConfig);
+  } = useCharts(plugins, pluginParams);
   return /*#__PURE__*/_jsx(ChartContext.Provider, {
     value: contextValue,
     children: children

package/esm/context/ChartProvider/ChartProvider.types.d.ts

@@ -1,8 +1,6 @@
-import type * as React from 'react';
 import { type Store } from '@mui/x-internals/store';
 import type { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ChartState, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../../internals/plugins/models/index.js";
 import type { ChartCorePluginSignatures } from "../../internals/plugins/corePlugins/index.js";
-import type { ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";
 import type { UseChartBaseProps } from "../../internals/store/useCharts.types.js";
 import type { ChartSeriesType } from "../../models/seriesType/config.js";
 export type ChartContextValue<TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[] = []> = {
@@ -18,25 +16,12 @@ export type ChartContextValue<TSignatures extends readonly ChartAnyPluginSignatu
    * The internal state of the chart.
    */
   store: Store<ChartState<TSignatures, TOptionalSignatures>>;
-  /**
-   * The ref to the <svg />.
-   */
-  svgRef: React.RefObject<SVGSVGElement | null>;
-  /**
-   * The ref to the chart root element.
-   */
-  chartRootRef: React.RefObject<HTMLDivElement | null>;
 };
-export type ChartPluginParams<TSignatures extends readonly ChartAnyPluginSignature[]> = UseChartBaseProps<TSignatures> & MergeSignaturesProperty<[...ChartCorePluginSignatures, ...TSignatures], 'params'>;
-export interface ChartProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = []> {
+export type ChartPluginParams<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = UseChartBaseProps<TSignatures> & MergeSignaturesProperty<[...ChartCorePluginSignatures<TSeriesType>, ...TSignatures], 'params'>;
+export interface ChartProviderProps<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> {
   /**
    * Array of plugins used to add features to the chart.
    */
   plugins?: ConvertSignaturesIntoPlugins<TSignatures>;
-  pluginParams?: ChartPluginParams<TSignatures>;
-  /**
-   * The configuration helpers used to compute attributes according to the series type.
-   * @ignore Unstable props for internal usage.
-   */
-  seriesConfig?: ChartSeriesConfig<TSeries>;
+  pluginParams?: ChartPluginParams<TSeriesType, TSignatures>;
 }

package/esm/context/index.d.ts

@@ -1,3 +1,4 @@
-export type { HighlightScope, FadeOptions, HighlightItemData, HighlightOptions } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export type { FadeOptions, HighlightItemData, HighlightOptions } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export type { HighlightScope } from "../models/seriesType/config.js";
 export * from "./useChartApiContext.js";
 export type { ChartApi } from "./ChartApi.js";

package/esm/hooks/index.d.ts

@@ -20,4 +20,7 @@ export * from "./animation/index.js";
 export * from "./useChartRootRef.js";
 export * from "./useChartsLocalization.js";
 export * from "./useBrush.js";
-export * from "./useFocusedItem.js";
+export * from "./useFocusedItem.js";
+export { useXAxisCoordinates, useYAxisCoordinates, type AxisCoordinates } from "./useAxisCoordinates.js";
+export * from "./useAxisTicks.js";
+export { type TickItem } from "./useTicks.js";

package/esm/hooks/index.js

@@ -20,4 +20,6 @@ export * from "./animation/index.js";
 export * from "./useChartRootRef.js";
 export * from "./useChartsLocalization.js";
 export * from "./useBrush.js";
-export * from "./useFocusedItem.js";
+export * from "./useFocusedItem.js";
+export { useXAxisCoordinates, useYAxisCoordinates } from "./useAxisCoordinates.js";
+export * from "./useAxisTicks.js";

package/esm/hooks/useAxisCoordinates.d.ts

@@ -0,0 +1,30 @@
+import { type ChartDrawingArea } from "./useDrawingArea.js";
+import { type AxisId, type ComputedXAxis, type ComputedYAxis } from "../models/axis.js";
+export interface AxisCoordinates {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+export declare function getXAxisCoordinates(drawingArea: ChartDrawingArea, computedAxis: {
+  position?: ComputedXAxis['position'];
+  offset: number;
+  height: number;
+}): AxisCoordinates | null;
+/**
+ * Get the coordinates of the given X axis. The coordinates are relative to the SVG's origin.
+ * @param axisId The id of the X axis.
+ * @returns {AxisCoordinates | null} The coordinates of the X axis or null if the axis does not exist or has position: 'none'.
+ */
+export declare function useXAxisCoordinates(axisId: AxisId): AxisCoordinates | null;
+export declare function getYAxisCoordinates(drawingArea: ChartDrawingArea, computedAxis: {
+  position?: ComputedYAxis['position'];
+  offset: number;
+  width: number;
+}): AxisCoordinates | null;
+/**
+ * Returns the coordinates of the given Y axis. The coordinates are relative to the SVG's origin.
+ * @param axisId The id of the Y axis.
+ * @returns {AxisCoordinates | null} The coordinates of the Y axis or null if the axis does not exist or has position: 'none'.
+ */
+export declare function useYAxisCoordinates(axisId: AxisId): AxisCoordinates | null;

package/esm/hooks/useAxisCoordinates.js

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useThemeProps } from '@mui/material/styles';
+import { useDrawingArea } from "./useDrawingArea.js";
+import { useXAxes, useYAxes } from "./useAxis.js";
+import { defaultProps } from "../ChartsXAxis/utilities.js";
+export function getXAxisCoordinates(drawingArea, computedAxis) {
+  const {
+    position,
+    offset,
+    height: axisHeight
+  } = computedAxis;
+  if (position === 'none') {
+    return null;
+  }
+  let top;
+  if (position === 'top') {
+    top = drawingArea.top - axisHeight - offset;
+  } else {
+    top = drawingArea.top + drawingArea.height + offset;
+  }
+  const left = drawingArea.left;
+  const bottom = top + axisHeight;
+  const right = drawingArea.left + drawingArea.width;
+  return {
+    left,
+    top,
+    right,
+    bottom
+  };
+}
+
+/**
+ * Get the coordinates of the given X axis. The coordinates are relative to the SVG's origin.
+ * @param axisId The id of the X axis.
+ * @returns {AxisCoordinates | null} The coordinates of the X axis or null if the axis does not exist or has position: 'none'.
+ */
+export function useXAxisCoordinates(axisId) {
+  const {
+    xAxis: xAxes
+  } = useXAxes();
+  const drawingArea = useDrawingArea();
+  const axis = xAxes[axisId];
+
+  // FIXME(v9): Remove
+  // eslint-disable-next-line mui/material-ui-name-matches-component-name
+  const themedProps = useThemeProps({
+    props: axis,
+    name: 'MuiChartsXAxis'
+  });
+  if (!axis) {
+    return null;
+  }
+  const defaultizedProps = _extends({}, defaultProps, themedProps);
+  return getXAxisCoordinates(drawingArea, defaultizedProps);
+}
+export function getYAxisCoordinates(drawingArea, computedAxis) {
+  const {
+    position,
+    offset,
+    width: axisWidth
+  } = computedAxis;
+  if (position === 'none') {
+    return null;
+  }
+  let left;
+  if (position === 'right') {
+    left = drawingArea.left + drawingArea.width + offset;
+  } else {
+    left = drawingArea.left - axisWidth - offset;
+  }
+  const top = drawingArea.top;
+  const bottom = drawingArea.top + drawingArea.height;
+  const right = left + axisWidth;
+  return {
+    left,
+    top,
+    right,
+    bottom
+  };
+}
+
+/**
+ * Returns the coordinates of the given Y axis. The coordinates are relative to the SVG's origin.
+ * @param axisId The id of the Y axis.
+ * @returns {AxisCoordinates | null} The coordinates of the Y axis or null if the axis does not exist or has position: 'none'.
+ */
+export function useYAxisCoordinates(axisId) {
+  const {
+    yAxis: yAxes
+  } = useYAxes();
+  const drawingArea = useDrawingArea();
+  const axis = yAxes[axisId];
+
+  // FIXME(v9): Remove
+  // eslint-disable-next-line mui/material-ui-name-matches-component-name
+  const themedProps = useThemeProps({
+    props: axis,
+    name: 'MuiChartsYAxis'
+  });
+  if (!axis) {
+    return null;
+  }
+  const defaultizedProps = _extends({}, defaultProps, themedProps);
+  return getYAxisCoordinates(drawingArea, defaultizedProps);
+}

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[];