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

package/esm/SparkLineChart/SparkLineChart.js

@@ -263,24 +263,24 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['bar']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar'])
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['line']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['line'])
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['scatter']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['scatter'])
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['pie']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['pie'])
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['radar']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['radar'])
   })]).isRequired),
   /**
    * The controlled axis highlight.
@@ -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,24 +326,24 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['bar']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar'])
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['line']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['line'])
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['scatter']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['scatter'])
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['pie']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['pie'])
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['radar']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['radar'])
   })]).isRequired),
   /**
    * Localized text for chart components.
@@ -395,6 +395,14 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier Identify which item got clicked
    */
   onItemClick: PropTypes.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onTooltipAxisChange: PropTypes.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -436,30 +444,38 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    dataIndex: PropTypes.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
   tooltipItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['bar']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar'])
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['line']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['line'])
   }), PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['scatter']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['scatter'])
   }), PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['pie']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['pie'])
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['radar']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['radar'])
   })]),
   /**
    * Formatter used by the tooltip.

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/getValueToPositionMapper.d.ts

@@ -0,0 +1,12 @@
+import type { D3Scale } from "../models/axis.js";
+/**
+ * For a given scale return a function that map value to their position.
+ * Useful when dealing with specific scale such as band.
+ * @param {D3Scale} scale The scale to use
+ * @returns {(value: any) => number} A function that map value to their position
+ */
+export declare function getValueToPositionMapper<Domain extends {
+  toString(): string;
+} = {
+  toString(): string;
+}, Range = number>(scale: D3Scale<Domain, Range>): (value: any) => number;

package/esm/hooks/getValueToPositionMapper.js

@@ -0,0 +1,21 @@
+'use client';
+
+import { isOrdinalScale } from "../internals/scaleGuards.js";
+/**
+ * For a given scale return a function that map value to their position.
+ * Useful when dealing with specific scale such as band.
+ * @param {D3Scale} scale The scale to use
+ * @returns {(value: any) => number} A function that map value to their position
+ */
+export function getValueToPositionMapper(scale) {
+  if (isOrdinalScale(scale)) {
+    return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
+  }
+  const domain = scale.domain();
+
+  // Fixes https://github.com/mui/mui-x/issues/18999#issuecomment-3173787401
+  if (domain[0] === domain[1]) {
+    return value => value === domain[0] ? scale(value) : NaN;
+  }
+  return value => scale(value);
+}

package/esm/hooks/index.d.ts

@@ -20,4 +20,8 @@ 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";
+export * from "./getValueToPositionMapper.js";

package/esm/hooks/index.js

@@ -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 } from "./useAxisCoordinates.js";
+export * from "./useAxisTicks.js";
+export * from "./getValueToPositionMapper.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[];

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

@@ -3,15 +3,15 @@ import { type SeriesItemIdentifierWithData } from "../models/index.js";
 import type { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import type { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import type { ChartSeriesType } from "../models/seriesType/config.js";
-import type { SeriesItemIdentifier } from "../models/seriesType/index.js";
+import type { SeriesItemIdentifierWithType } 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;
 };
-export declare function getInteractionItemProps(instance: ChartInstance<[UseChartInteractionSignature, UseChartHighlightSignature, UseChartTooltipSignature]>, item: SeriesItemIdentifier<ChartSeriesType>): {
+export declare function getInteractionItemProps(instance: ChartInstance<[UseChartInteractionSignature, UseChartHighlightSignature, UseChartTooltipSignature]>, item: SeriesItemIdentifierWithType<ChartSeriesType>): {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;

package/esm/hooks/useLegend.d.ts

@@ -1,4 +1,4 @@
-import type { LegendItemParams } from "../ChartsLegend/index.js";
+import type { SeriesLegendItemParams } from "../ChartsLegend/index.js";
 /**
  * Get the legend items to display.
  *
@@ -9,5 +9,5 @@ import type { LegendItemParams } from "../ChartsLegend/index.js";
  * @returns legend data
  */
 export declare function useLegend(): {
-  items: LegendItemParams[];
+  items: SeriesLegendItemParams[];
 };

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/useScale.d.ts

@@ -1,15 +1,4 @@
-import { type AxisId, type AxisScaleConfig, type D3Scale, type ScaleName } from "../models/axis.js";
-/**
- * For a given scale return a function that map value to their position.
- * Useful when dealing with specific scale such as band.
- * @param {D3Scale} scale The scale to use
- * @returns {(value: any) => number} A function that map value to their position
- */
-export declare function getValueToPositionMapper<Domain extends {
-  toString(): string;
-} = {
-  toString(): string;
-}, Range = number>(scale: D3Scale<Domain, Range>): (value: any) => number;
+import type { AxisId, AxisScaleConfig, ScaleName } from "../models/axis.js";
 /**
  * Get the X scale.
  *

package/esm/hooks/useScale.js

@@ -1,27 +1,7 @@
 'use client';
 
-import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { useRadiusAxis, useRotationAxis, useXAxis, useYAxis } from "./useAxis.js";
 
-/**
- * For a given scale return a function that map value to their position.
- * Useful when dealing with specific scale such as band.
- * @param {D3Scale} scale The scale to use
- * @returns {(value: any) => number} A function that map value to their position
- */
-export function getValueToPositionMapper(scale) {
-  if (isOrdinalScale(scale)) {
-    return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
-  }
-  const domain = scale.domain();
-
-  // Fixes https://github.com/mui/mui-x/issues/18999#issuecomment-3173787401
-  if (domain[0] === domain[1]) {
-    return value => value === domain[0] ? scale(value) : NaN;
-  }
-  return value => scale(value);
-}
-
 /**
  * Get the X scale.
  *

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;
 }