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

package/esm/models/seriesType/bar.d.ts

@@ -3,7 +3,7 @@ import type { StackOffsetType } from "../stacking.js";
 import { type CartesianSeriesType, type CommonSeriesType, type CommonDefaultizedProps, type StackableSeriesType, type SeriesId } from "./common.js";
 import { type BarItem, type BarLabelContext } from "../../BarChart/index.js";
 export type BarValueType = number;
-export interface BarSeriesType extends CommonSeriesType<BarValueType | null>, CartesianSeriesType, StackableSeriesType {
+export interface BarSeriesType extends CommonSeriesType<BarValueType | null, 'bar'>, CartesianSeriesType, StackableSeriesType {
   type: 'bar';
   /**
    * Data associated to each bar.

package/esm/models/seriesType/common.d.ts

@@ -1,11 +1,11 @@
-import { type HighlightScope } from "../../internals/plugins/featurePlugins/useChartHighlight/highlightConfig.types.js";
 import type { StackOffsetType, StackOrderType } from "../stacking.js";
 import type { ChartsLabelMarkType } from "../../ChartsLabel/ChartsLabelMark.js";
-import { type AxisId } from "../axis.js";
+import type { AxisId } from "../axis.js";
+import type { ChartSeriesType, HighlightScope } from "./config.js";
 /**
  * The unique identifier of a series.
  */
-export type SeriesId = number | string;
+export type SeriesId = string;
 export type SeriesValueFormatterContext = {
   /**
    * The index of the value in the data array.
@@ -33,7 +33,7 @@ export interface SeriesColor<TValue> {
    */
   colorGetter?: (data: ColorCallbackValue<TValue>) => string;
 }
-export interface CommonSeriesType<TValue> extends SeriesColor<TValue> {
+export interface CommonSeriesType<TValue, SeriesType extends ChartSeriesType> extends SeriesColor<TValue> {
   /**
    * The id of this series.
    */
@@ -48,7 +48,7 @@ export interface CommonSeriesType<TValue> extends SeriesColor<TValue> {
   /**
    * The scope to apply when the series is highlighted.
    */
-  highlightScope?: HighlightScope;
+  highlightScope?: HighlightScope<SeriesType>;
   /**
    * Defines the mark type for the series.
    *

package/esm/models/seriesType/config.d.ts

@@ -5,6 +5,7 @@ import type { BarItemIdentifier, BarSeriesType, DefaultizedBarSeriesType } from
 import type { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType, DefaultizedPieValueType, PieSeriesLayout } from "./pie.js";
 import type { DefaultizedRadarSeriesType, RadarItemIdentifier, RadarSeriesType } from "./radar.js";
 import type { SeriesColor } from "./common.js";
+import type { CommonHighlightScope } from "../../internals/plugins/featurePlugins/useChartHighlight/highlightConfig.types.js";
 export interface ChartsSeriesConfig {
   bar: {
     /**
@@ -29,6 +30,7 @@ export interface ChartsSeriesConfig {
     valueType: number | null;
     canBeStacked: true;
     axisType: 'cartesian';
+    highlightScope: CommonHighlightScope;
   };
   line: {
     seriesInput: DefaultizedProps<LineSeriesType, 'id'> & MakeRequired<SeriesColor<number | null>, 'color'>;
@@ -40,6 +42,7 @@ export interface ChartsSeriesConfig {
     valueType: number | null;
     canBeStacked: true;
     axisType: 'cartesian';
+    highlightScope: CommonHighlightScope;
   };
   scatter: {
     seriesInput: DefaultizedProps<ScatterSeriesType, 'id'> & MakeRequired<SeriesColor<ScatterValueType | null>, 'color'>;
@@ -50,6 +53,7 @@ export interface ChartsSeriesConfig {
     itemIdentifier: ScatterItemIdentifier;
     itemIdentifierWithData: ScatterItemIdentifier;
     axisType: 'cartesian';
+    highlightScope: CommonHighlightScope;
   };
   pie: {
     seriesInput: Omit<DefaultizedProps<PieSeriesType, 'id'>, 'data'> & {
@@ -61,6 +65,7 @@ export interface ChartsSeriesConfig {
     itemIdentifier: PieItemIdentifier;
     itemIdentifierWithData: PieItemIdentifier;
     valueType: DefaultizedPieValueType;
+    highlightScope: CommonHighlightScope;
   };
   radar: {
     seriesInput: DefaultizedProps<RadarSeriesType, 'id'> & MakeRequired<SeriesColor<number>, 'color'>;
@@ -71,6 +76,7 @@ export interface ChartsSeriesConfig {
     itemIdentifierWithData: RadarItemIdentifier;
     valueType: number;
     axisType: 'polar';
+    highlightScope: CommonHighlightScope;
   };
 }
 export type ChartSeriesType = keyof ChartsSeriesConfig;
@@ -94,4 +100,5 @@ export type ChartSeriesLayout<T extends ChartSeriesType> = ChartsSeriesConfig[T]
 export type DatasetElementType<T> = {
   [key: string]: T;
 };
-export type DatasetType<T = unknown> = DatasetElementType<T>[];
+export type DatasetType<T = unknown> = DatasetElementType<T>[];
+export type HighlightScope<T extends ChartSeriesType> = ChartsSeriesConfig[T] extends any ? ChartsSeriesConfig[T]['highlightScope'] : never;

package/esm/models/seriesType/index.d.ts

@@ -1,40 +1,15 @@
 import type { DefaultizedProps } from '@mui/x-internals/types';
-import type { BarSeriesType, DefaultizedBarSeriesType } from "./bar.js";
-import { type CartesianChartSeriesType, type ChartSeriesType, type ChartsSeriesConfig, type StackableChartSeriesType } from "./config.js";
+import { type ChartSeriesType, type ChartsSeriesConfig } from "./config.js";
 type AllSeriesType<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['seriesProp'];
-/**
- * @deprecated We do not use this type in v8. If it's useful for you use case, please open an issue explaining why.
- * Otherwise, it will be removed in next major.
- */
-type CartesianSeriesType = AllSeriesType<CartesianChartSeriesType>;
 type DefaultizedSeriesType<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['series'];
-/**
- * @deprecated We do not use this type in v8. If it's useful for you use case, please open an issue explaining why.
- * Otherwise, it will be removed in next major.
- */
-type DefaultizedCartesianSeriesType = DefaultizedSeriesType<CartesianChartSeriesType>;
-/**
- * @deprecated We do not use this type in v8. If it's useful for you use case, please open an issue explaining why.
- * Otherwise, it will be removed in next major.
- */
-type StackableSeriesType = DefaultizedSeriesType<StackableChartSeriesType>;
-export type SeriesItemIdentifier<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
-export type SeriesItemIdentifierWithData<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifierWithData'];
+export type SeriesItemIdentifier<T extends ChartSeriesType> = T extends ChartSeriesType ? ChartsSeriesConfig[T]['itemIdentifier'] : never;
+export type SeriesItemIdentifierWithData<T extends ChartSeriesType> = T extends ChartSeriesType ? ChartsSeriesConfig[T]['itemIdentifierWithData'] : never;
 export type FocusedItemIdentifier<T extends ChartSeriesType = ChartSeriesType> = T extends 'line' | 'radar' ? DefaultizedProps<ChartsSeriesConfig[T]['itemIdentifier'], 'dataIndex'> : T extends 'heatmap' ? DefaultizedProps<ChartsSeriesConfig[T]['itemIdentifier'], 'xIndex' | 'yIndex'> : ChartsSeriesConfig[T]['itemIdentifier'];
 export { type SeriesId } from "./common.js";
+export type { CartesianChartSeriesType, StackableChartSeriesType } from "./config.js";
 export * from "./line.js";
 export * from "./bar.js";
 export * from "./scatter.js";
 export * from "./pie.js";
 export * from "./radar.js";
-export type { AllSeriesType, DefaultizedSeriesType, CartesianSeriesType, DefaultizedCartesianSeriesType, StackableSeriesType };
-/**
- * @deprecated We do not use this function in v8. If it's useful for you use case, please open an issue explaining why.
- * Otherwise, it will be removed in next major.
- */
-export declare function isDefaultizedBarSeries(series: DefaultizedSeriesType): series is DefaultizedBarSeriesType;
-/**
- * @deprecated We do not use this function in v8. If it's useful for you use case, please open an issue explaining why.
- * Otherwise, it will be removed in next major.
- */
-export declare function isBarSeries(series: AllSeriesType): series is BarSeriesType;
+export type { AllSeriesType, DefaultizedSeriesType };

package/esm/models/seriesType/index.js

@@ -1,20 +1,5 @@
 // Series definition
 
-/**
- * @deprecated We do not use this type in v8. If it's useful for you use case, please open an issue explaining why.
- * Otherwise, it will be removed in next major.
- */
-
-/**
- * @deprecated We do not use this type in v8. If it's useful for you use case, please open an issue explaining why.
- * Otherwise, it will be removed in next major.
- */
-
-/**
- * @deprecated We do not use this type in v8. If it's useful for you use case, please open an issue explaining why.
- * Otherwise, it will be removed in next major.
- */
-
 // item identifier
 
 export * from "./line.js";
@@ -22,20 +7,4 @@ export * from "./bar.js";
 export * from "./scatter.js";
 export * from "./pie.js";
 export * from "./radar.js";
-// Helpers
-
-/**
- * @deprecated We do not use this function in v8. If it's useful for you use case, please open an issue explaining why.
- * Otherwise, it will be removed in next major.
- */
-export function isDefaultizedBarSeries(series) {
-  return series.type === 'bar';
-}
-
-/**
- * @deprecated We do not use this function in v8. If it's useful for you use case, please open an issue explaining why.
- * Otherwise, it will be removed in next major.
- */
-export function isBarSeries(series) {
-  return series.type === 'bar';
-}
+export {};

package/esm/models/seriesType/line.d.ts

@@ -24,7 +24,7 @@ export interface ShowMarkParams<AxisValue = number | Date> {
    */
   value: number;
 }
-export interface LineSeriesType extends CommonSeriesType<number | null>, CartesianSeriesType, StackableSeriesType {
+export interface LineSeriesType extends CommonSeriesType<number | null, 'line'>, CartesianSeriesType, StackableSeriesType {
   type: 'line';
   /**
    * Data associated to the line.

package/esm/models/seriesType/pie.d.ts

@@ -26,7 +26,7 @@ export type DefaultizedPieValueType = PieValueType & Omit<D3PieArcDatum<any>, 'd
   hidden: boolean;
 };
 export type ChartsPieSorting = 'none' | 'asc' | 'desc' | ((a: number, b: number) => number);
-export interface PieSeriesType<TData = PieValueType> extends CommonSeriesType<TData> {
+export interface PieSeriesType<TData = PieValueType> extends CommonSeriesType<TData, 'pie'> {
   type: 'pie';
   data: Readonly<TData[]>;
   /**

package/esm/models/seriesType/radar.d.ts

@@ -1,6 +1,6 @@
 import { type DefaultizedProps } from '@mui/x-internals/types';
 import { type CommonDefaultizedProps, type CommonSeriesType, type SeriesId } from "./common.js";
-export interface RadarSeriesType extends CommonSeriesType<number> {
+export interface RadarSeriesType extends CommonSeriesType<number, 'radar'> {
   type: 'radar';
   data: number[];
   /**

package/esm/models/seriesType/scatter.d.ts

@@ -9,7 +9,7 @@ export type ScatterValueType = {
    */
   id?: string | number;
 };
-export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | null>, CartesianSeriesType {
+export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | null, 'scatter'>, CartesianSeriesType {
   type: 'scatter';
   data?: readonly ScatterValueType[];
   /**

package/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/hooks/index.js

@@ -7,7 +7,9 @@ var _exportNames = {
   usePieSeries: true,
   usePieSeriesContext: true,
   useChartGradientId: true,
-  useChartGradientIdObjectBound: true
+  useChartGradientIdObjectBound: true,
+  useXAxisCoordinates: true,
+  useYAxisCoordinates: true
 };
 Object.defineProperty(exports, "useChartGradientId", {
   enumerable: true,
@@ -33,6 +35,18 @@ Object.defineProperty(exports, "usePieSeriesContext", {
     return _usePieSeries.usePieSeriesContext;
   }
 });
+Object.defineProperty(exports, "useXAxisCoordinates", {
+  enumerable: true,
+  get: function () {
+    return _useAxisCoordinates.useXAxisCoordinates;
+  }
+});
+Object.defineProperty(exports, "useYAxisCoordinates", {
+  enumerable: true,
+  get: function () {
+    return _useAxisCoordinates.useYAxisCoordinates;
+  }
+});
 var _useDrawingArea = require("./useDrawingArea");
 Object.keys(_useDrawingArea).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -286,4 +300,17 @@ Object.keys(_useFocusedItem).forEach(function (key) {
       return _useFocusedItem[key];
     }
   });
+});
+var _useAxisCoordinates = require("./useAxisCoordinates");
+var _useAxisTicks = require("./useAxisTicks");
+Object.keys(_useAxisTicks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useAxisTicks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAxisTicks[key];
+    }
+  });
 });

package/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/hooks/useAxisCoordinates.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getXAxisCoordinates = getXAxisCoordinates;
+exports.getYAxisCoordinates = getYAxisCoordinates;
+exports.useXAxisCoordinates = useXAxisCoordinates;
+exports.useYAxisCoordinates = useYAxisCoordinates;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styles = require("@mui/material/styles");
+var _useDrawingArea = require("./useDrawingArea");
+var _useAxis = require("./useAxis");
+var _utilities = require("../ChartsXAxis/utilities");
+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'.
+ */
+function useXAxisCoordinates(axisId) {
+  const {
+    xAxis: xAxes
+  } = (0, _useAxis.useXAxes)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const axis = xAxes[axisId];
+
+  // FIXME(v9): Remove
+  // eslint-disable-next-line mui/material-ui-name-matches-component-name
+  const themedProps = (0, _styles.useThemeProps)({
+    props: axis,
+    name: 'MuiChartsXAxis'
+  });
+  if (!axis) {
+    return null;
+  }
+  const defaultizedProps = (0, _extends2.default)({}, _utilities.defaultProps, themedProps);
+  return getXAxisCoordinates(drawingArea, defaultizedProps);
+}
+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'.
+ */
+function useYAxisCoordinates(axisId) {
+  const {
+    yAxis: yAxes
+  } = (0, _useAxis.useYAxes)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const axis = yAxes[axisId];
+
+  // FIXME(v9): Remove
+  // eslint-disable-next-line mui/material-ui-name-matches-component-name
+  const themedProps = (0, _styles.useThemeProps)({
+    props: axis,
+    name: 'MuiChartsYAxis'
+  });
+  if (!axis) {
+    return null;
+  }
+  const defaultizedProps = (0, _extends2.default)({}, _utilities.defaultProps, themedProps);
+  return getYAxisCoordinates(drawingArea, defaultizedProps);
+}

package/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/hooks/useAxisTicks.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useXAxisTicks = useXAxisTicks;
+exports.useYAxisTicks = useYAxisTicks;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styles = require("@mui/material/styles");
+var _useAxis = require("./useAxis");
+var _useTicks = require("./useTicks");
+var _utilities = require("../ChartsXAxis/utilities");
+/**
+ * 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.
+ */
+function useXAxisTicks(axisId) {
+  const {
+    xAxis: xAxes
+  } = (0, _useAxis.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 = (0, _styles.useThemeProps)({
+    props: axis,
+    name: 'MuiChartsXAxis'
+  });
+  const defaultizedProps = (0, _extends2.default)({}, _utilities.defaultProps, themedProps);
+  return (0, _useTicks.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.
+ */
+function useYAxisTicks(axisId) {
+  const {
+    yAxis: yAxes
+  } = (0, _useAxis.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 = (0, _styles.useThemeProps)({
+    props: axis,
+    name: 'MuiChartsYAxis'
+  });
+  const defaultizedProps = (0, _extends2.default)({}, _utilities.defaultProps, themedProps);
+  return (0, _useTicks.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/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/hooks/useChartRootRef.js

@@ -11,6 +11,8 @@ var _ChartProvider = require("../context/ChartProvider");
  * @returns The root chart element ref.
  */
 function useChartRootRef() {
-  const context = (0, _ChartProvider.useChartContext)();
-  return context.chartRootRef;
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
+  return instance.chartRootRef;
 }

package/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/hooks/useLegend.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useLegend = useLegend;
-var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries");
+var _useChartSeriesConfig = require("../internals/plugins/corePlugins/useChartSeriesConfig");
 var _useSeries = require("./useSeries");
 var _useStore = require("../internals/store/useStore");
 function getSeriesToDisplay(series, seriesConfig) {
@@ -27,7 +27,7 @@ function getSeriesToDisplay(series, seriesConfig) {
 function useLegend() {
   const series = (0, _useSeries.useSeries)();
   const store = (0, _useStore.useStore)();
-  const seriesConfig = store.use(_useChartSeries.selectorChartSeriesConfig);
+  const seriesConfig = store.use(_useChartSeriesConfig.selectorChartSeriesConfig);
   return {
     items: getSeriesToDisplay(series, seriesConfig)
   };

package/hooks/useSvgRef.js

@@ -11,9 +11,8 @@ var _ChartProvider = require("../context/ChartProvider");
  * @returns The SVG ref.
  */
 function useSvgRef() {
-  const context = (0, _ChartProvider.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
+  } = (0, _ChartProvider.useChartContext)();
+  return instance.svgRef;
 }

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