@mui/x-charts 8.16.0 → 8.18.0

package/esm/ScatterChart/seriesConfig/getColor.js

@@ -1,7 +1,9 @@
+import { getSeriesColorFn } from "../../internals/getSeriesColorFn.js";
 const getColor = (series, xAxis, yAxis, zAxis) => {
   const zColorScale = zAxis?.colorScale;
   const yColorScale = yAxis?.colorScale;
   const xColorScale = xAxis?.colorScale;
+  const getSeriesColor = getSeriesColorFn(series);
   if (zColorScale) {
     return dataIndex => {
       if (dataIndex === undefined) {
@@ -14,9 +16,15 @@ const getColor = (series, xAxis, yAxis, zAxis) => {
         }
       }
       const value = series.data[dataIndex];
-      const color = value === null ? series.color : zColorScale(value.z);
+      const color = value === null ? getSeriesColor({
+        value,
+        dataIndex
+      }) : zColorScale(value.z);
       if (color === null) {
-        return series.color;
+        return getSeriesColor({
+          value,
+          dataIndex
+        });
       }
       return color;
     };
@@ -27,9 +35,15 @@ const getColor = (series, xAxis, yAxis, zAxis) => {
         return series.color;
       }
       const value = series.data[dataIndex];
-      const color = value === null ? series.color : yColorScale(value.y);
+      const color = value === null ? getSeriesColor({
+        value,
+        dataIndex
+      }) : yColorScale(value.y);
       if (color === null) {
-        return series.color;
+        return getSeriesColor({
+          value,
+          dataIndex
+        });
       }
       return color;
     };
@@ -40,13 +54,28 @@ const getColor = (series, xAxis, yAxis, zAxis) => {
         return series.color;
       }
       const value = series.data[dataIndex];
-      const color = value === null ? series.color : xColorScale(value.x);
+      const color = value === null ? getSeriesColor({
+        value,
+        dataIndex
+      }) : xColorScale(value.x);
       if (color === null) {
-        return series.color;
+        return getSeriesColor({
+          value,
+          dataIndex
+        });
       }
       return color;
     };
   }
-  return () => series.color;
+  return dataIndex => {
+    if (dataIndex === undefined) {
+      return series.color;
+    }
+    const value = series.data[dataIndex];
+    return getSeriesColor({
+      value,
+      dataIndex
+    });
+  };
 };
 export default getColor;

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

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

package/esm/ScatterChart/seriesConfig/index.js

@@ -5,7 +5,7 @@ import legendGetter from "./legend.js";
 import tooltipGetter from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
-export const seriesConfig = {
+export const scatterSeriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
   legendGetter,

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

@@ -4,5 +4,5 @@ import { ChartAnyPluginSignature } from "../../internals/plugins/models/index.js
 import { ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";
 import { 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>>): React.JSX.Element;
+declare function ChartProvider<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]>(props: React.PropsWithChildren<ChartProviderProps<TSeriesType, TSignatures>>): import("react/jsx-runtime").JSX.Element;
 export { ChartProvider };

package/esm/context/ChartProvider/ChartProvider.js

@@ -7,10 +7,10 @@ import { useChartCartesianAxis } from "../../internals/plugins/featurePlugins/us
 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 { seriesConfig as barSeriesConfig } from "../../BarChart/seriesConfig/index.js";
-import { seriesConfig as scatterSeriesConfig } from "../../ScatterChart/seriesConfig/index.js";
-import { seriesConfig as lineSeriesConfig } from "../../LineChart/seriesConfig/index.js";
-import { seriesConfig as pieSeriesConfig } from "../../PieChart/seriesConfig/index.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,

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../../internals/plugins/models/index.js";
-import type { ChartStore } from "../../internals/plugins/utils/ChartStore.js";
+import { 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";
@@ -17,7 +17,7 @@ export type ChartContextValue<TSignatures extends readonly ChartAnyPluginSignatu
   /**
    * The internal state of the chart.
    */
-  store: ChartStore<TSignatures>;
+  store: Store<ChartState<TSignatures, TOptionalSignatures>>;
   /**
    * The ref to the <svg />.
    */

package/esm/context/ChartsSlotsContext.d.ts

@@ -16,5 +16,5 @@ interface ChartsSlotsProviderProps {
   slotProps?: Partial<ChartsSlotProps>;
   defaultSlots: ChartsSlots;
 }
-export declare function ChartsSlotsProvider(props: React.PropsWithChildren<ChartsSlotsProviderProps>): React.JSX.Element;
+export declare function ChartsSlotsProvider(props: React.PropsWithChildren<ChartsSlotsProviderProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/hooks/animation/useAnimateBarLabel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BarLabelProps } from "../../BarChart/index.js";
-type UseAnimateBarLabelParams = Pick<BarLabelProps, 'xOrigin' | 'yOrigin' | 'x' | 'y' | 'width' | 'height' | 'layout' | 'skipAnimation'> & {
+type UseAnimateBarLabelParams = Pick<BarLabelProps, 'xOrigin' | 'yOrigin' | 'x' | 'y' | 'width' | 'height' | 'layout' | 'skipAnimation' | 'placement'> & {
   ref?: React.Ref<SVGTextElement>;
 };
 type UseAnimateBarLabelReturn = {

package/esm/hooks/animation/useAnimateBarLabel.js

@@ -5,14 +5,12 @@ function barLabelPropsInterpolator(from, to) {
   const interpolateY = interpolateNumber(from.y, to.y);
   const interpolateWidth = interpolateNumber(from.width, to.width);
   const interpolateHeight = interpolateNumber(from.height, to.height);
-  return t => {
-    return {
-      x: interpolateX(t),
-      y: interpolateY(t),
-      width: interpolateWidth(t),
-      height: interpolateHeight(t)
-    };
-  };
+  return t => ({
+    x: interpolateX(t),
+    y: interpolateY(t),
+    width: interpolateWidth(t),
+    height: interpolateHeight(t)
+  });
 }
 
 /**
@@ -25,15 +23,21 @@ function barLabelPropsInterpolator(from, to) {
  * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
  */
 export function useAnimateBarLabel(props) {
+  const {
+    initialX,
+    currentX,
+    initialY,
+    currentY
+  } = props.placement === 'outside' ? getOutsidePlacement(props) : getCenterPlacement(props);
   const initialProps = {
-    x: props.layout === 'vertical' ? props.x + props.width / 2 : props.xOrigin,
-    y: props.layout === 'vertical' ? props.yOrigin : props.y + props.height / 2,
+    x: initialX,
+    y: initialY,
     width: props.width,
     height: props.height
   };
   const currentProps = {
-    x: props.x + props.width / 2,
-    y: props.y + props.height / 2,
+    x: currentX,
+    y: currentY,
     width: props.width,
     height: props.height
   };
@@ -50,4 +54,49 @@ export function useAnimateBarLabel(props) {
     skip: props.skipAnimation,
     ref: props.ref
   });
+}
+const LABEL_OFFSET = 4;
+function getCenterPlacement(props) {
+  return {
+    initialX: props.layout === 'vertical' ? props.x + props.width / 2 : props.xOrigin,
+    initialY: props.layout === 'vertical' ? props.yOrigin : props.y + props.height / 2,
+    currentX: props.x + props.width / 2,
+    currentY: props.y + props.height / 2
+  };
+}
+function getOutsidePlacement(props) {
+  let initialY = 0;
+  let currentY = 0;
+  let initialX = 0;
+  let currentX = 0;
+  if (props.layout === 'vertical') {
+    const shouldPlaceAbove = props.y < props.yOrigin;
+    if (shouldPlaceAbove) {
+      initialY = props.yOrigin - LABEL_OFFSET;
+      currentY = props.y - LABEL_OFFSET;
+    } else {
+      initialY = props.yOrigin + LABEL_OFFSET;
+      currentY = props.y + props.height + LABEL_OFFSET;
+    }
+    return {
+      initialX: props.x + props.width / 2,
+      currentX: props.x + props.width / 2,
+      initialY,
+      currentY
+    };
+  }
+  const shouldPlaceToTheLeft = props.x < props.xOrigin;
+  if (shouldPlaceToTheLeft) {
+    initialX = props.xOrigin;
+    currentX = props.x - LABEL_OFFSET;
+  } else {
+    initialX = props.xOrigin;
+    currentX = props.x + props.width + LABEL_OFFSET;
+  }
+  return {
+    initialX,
+    currentX,
+    initialY: props.y + props.height / 2,
+    currentY: props.y + props.height / 2
+  };
 }

package/esm/hooks/index.d.ts

@@ -6,6 +6,7 @@ export * from "./useZAxis.js";
 export * from "./useColorScale.js";
 export * from "./useSvgRef.js";
 export * from "./useSeries.js";
+export * from "./useDataset.js";
 export * from "./useScatterSeries.js";
 export * from "./usePieSeries.js";
 export * from "./useBarSeries.js";

package/esm/hooks/index.js

@@ -6,6 +6,7 @@ export * from "./useZAxis.js";
 export * from "./useColorScale.js";
 export * from "./useSvgRef.js";
 export * from "./useSeries.js";
+export * from "./useDataset.js";
 export * from "./useScatterSeries.js";
 export * from "./usePieSeries.js";
 export * from "./useBarSeries.js";

package/esm/hooks/useAxis.d.ts

@@ -2,12 +2,17 @@ import { AxisId, ChartsRadiusAxisProps, ChartsRotationAxisProps, PolarAxisDefaul
 /**
  * Get all the x-axes.
  *
- * - `xAxis` is an object with the shape `{ [axisId]: axis }`.
- * - `xAxisIds` is an array of axis IDs.
+ * Returns all X axes configured in the chart along with their IDs.
+ * This is useful when you need to iterate over multiple axes or access all axis configurations at once.
  *
- * If access to a specific X axis is needed, use the `useXAxis` hook instead.
+ * @returns An object containing:
+ *   - `xAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `xAxisIds`: An array of all X axis IDs in the chart
  *
- * @returns `{ xAxis, xAxisIds }` - The x-axes and their IDs.
+ * @example
+ * const { xAxis, xAxisIds } = useXAxes();
+ *
+ * @see `useXAxis` for accessing a single X axis
  */
 export declare function useXAxes(): {
   xAxis: import("../internals/index.js").ComputedAxisConfig<ChartsXAxisProps>;
@@ -16,36 +21,131 @@ export declare function useXAxes(): {
 /**
  * Get all the y-axes.
  *
- * - `yAxis` is an object with the shape `{ [axisId]: axis }`.
- * - `yAxisIds` is an array of axis IDs.
+ * Returns all Y axes configured in the chart along with their IDs.
+ * This is useful when you need to iterate over multiple axes or access all axis configurations at once.
+ *
+ * @returns An object containing:
+ *   - `yAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `yAxisIds`: An array of all Y axis IDs in the chart
  *
- * If access to a specific Y axis is needed, use the `useYAxis` hook instead.
+ * @example
+ * const { yAxis, yAxisIds } = useYAxes();
  *
- * @returns `{ yAxis, yAxisIds }` - The y-axes and their IDs.
+ * @see `useYAxis` for accessing a single Y axis
  */
 export declare function useYAxes(): {
   yAxis: import("../internals/index.js").ComputedAxisConfig<ChartsYAxisProps>;
   yAxisIds: AxisId[];
 };
 /**
- * Get the X axis.
- * @param {AxisId | undefined} axisId - If provided returns the x axis with axisId, else returns the values for the default x axis.
- * @returns The X axis.
+ * Get a specific X axis or the default X axis.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `xAxis` prop
+ *   - Undefined to get the default (first) X axis
+ * @returns The configuration for a single X axis.
+ *
+ * @example
+ * // Get the default X axis
+ * const xAxis = useXAxis();
+ *
+ * @example
+ * // Get a specific X axis by string ID
+ * const xAxis = useXAxis('revenue');
  */
 export declare function useXAxis<T extends keyof AxisScaleConfig>(axisId?: AxisId): ComputedAxis<T, any, ChartsXAxisProps>;
 /**
- * Get the Y axis.
- * @param {AxisId | undefined} axisId - If provided returns the y axis with axisId, else returns the values for the default y axis.
- * @returns The Y axis.
+ * Get a specific Y axis or the default Y axis.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `yAxis` prop
+ *   - Undefined to get the default (first) Y axis
+ * @returns The configuration for a single Y axis.
+ *
+ * @example
+ * // Get the default Y axis
+ * const yAxis = useYAxis();
+ *
+ * @example
+ * // Get a specific Y axis by string ID
+ * const yAxis = useYAxis('temperature');
  */
 export declare function useYAxis<T extends keyof AxisScaleConfig>(axisId?: AxisId): ComputedAxis<T, any, ChartsYAxisProps>;
+/**
+ * Get all the rotation axes for polar charts.
+ *
+ * Returns all rotation axes configured in polar charts along with their IDs.
+ * Rotation axes are used in charts like `RadarChart` to define angular positioning.
+ *
+ * @returns An object containing:
+ *   - `rotationAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `rotationAxisIds`: An array of all rotation axis IDs in the chart
+ *
+ * @example
+ * const { rotationAxis, rotationAxisIds } = useRotationAxes();
+ *
+ * @see `useRotationAxis` for accessing a single rotation axis
+ */
 export declare function useRotationAxes(): {
   rotationAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js").DefaultizedAxisConfig<ChartsRotationAxisProps>;
   rotationAxisIds: string[];
 };
+/**
+ * Get all the radius axes for polar charts.
+ *
+ * Returns all radial axes configured in polar charts along with their IDs.
+ * Radius axes are used in charts like `RadarChart` to define radial positioning and scaling.
+ *
+ * @returns An object containing:
+ *   - `radiusAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `radiusAxisIds`: An array of all radius axis IDs in the chart
+ *
+ * @example
+ * const { radiusAxis, radiusAxisIds } = useRadiusAxes();
+ *
+ * @see `useRadiusAxis` for accessing a single radius axis
+ */
 export declare function useRadiusAxes(): {
   radiusAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js").DefaultizedAxisConfig<ChartsRadiusAxisProps>;
   radiusAxisIds: string[];
 };
-export declare function useRotationAxis(identifier?: number | string): PolarAxisDefaultized<ScaleName, any, ChartsRotationAxisProps> | undefined;
-export declare function useRadiusAxis(identifier?: number | string): PolarAxisDefaultized<ScaleName, any, ChartsRadiusAxisProps> | undefined;
+/**
+ * Get a specific rotation axis or the default rotation axis for polar charts.
+ *
+ * Returns the configuration and scale for a rotation axis in polar charts.
+ * The rotation axis controls the angular positioning of data points around the circle.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's rotation axis configuration
+ *   - Undefined to get the default (first) rotation axis
+ * @returns The rotation axis configuration, or undefined if not found
+ *
+ * @example
+ * // Get the default rotation axis
+ * const rotationAxis = useRotationAxis();
+ *
+ * @example
+ * // Get a specific rotation axis by string ID
+ * const rotationAxis = useRotationAxis('categories');
+ */
+export declare function useRotationAxis(axisId?: AxisId): PolarAxisDefaultized<ScaleName, any, ChartsRotationAxisProps> | undefined;
+/**
+ * Get a specific radius axis or the default radius axis for polar charts.
+ *
+ * Returns the configuration and scale for a radial axis in polar charts.
+ * The radius axis controls the radial distance of data points from the center of the circle.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's radius axis configuration
+ *   - Undefined to get the default (first) radius axis
+ * @returns The radius axis configuration, or undefined if not found
+ *
+ * @example
+ * // Get the default radius axis
+ * const radiusAxis = useRadiusAxis();
+ *
+ * @example
+ * // Get a specific radius axis by string ID
+ * const radiusAxis = useRadiusAxis('magnitude');
+ */
+export declare function useRadiusAxis(axisId?: AxisId): PolarAxisDefaultized<ScaleName, any, ChartsRadiusAxisProps> | undefined;

package/esm/hooks/useAxis.js

@@ -7,12 +7,17 @@ import { useStore } from "../internals/store/useStore.js";
 /**
  * Get all the x-axes.
  *
- * - `xAxis` is an object with the shape `{ [axisId]: axis }`.
- * - `xAxisIds` is an array of axis IDs.
+ * Returns all X axes configured in the chart along with their IDs.
+ * This is useful when you need to iterate over multiple axes or access all axis configurations at once.
  *
- * If access to a specific X axis is needed, use the `useXAxis` hook instead.
+ * @returns An object containing:
+ *   - `xAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `xAxisIds`: An array of all X axis IDs in the chart
  *
- * @returns `{ xAxis, xAxisIds }` - The x-axes and their IDs.
+ * @example
+ * const { xAxis, xAxisIds } = useXAxes();
+ *
+ * @see `useXAxis` for accessing a single X axis
  */
 export function useXAxes() {
   const store = useStore();
@@ -29,12 +34,17 @@ export function useXAxes() {
 /**
  * Get all the y-axes.
  *
- * - `yAxis` is an object with the shape `{ [axisId]: axis }`.
- * - `yAxisIds` is an array of axis IDs.
+ * Returns all Y axes configured in the chart along with their IDs.
+ * This is useful when you need to iterate over multiple axes or access all axis configurations at once.
+ *
+ * @returns An object containing:
+ *   - `yAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `yAxisIds`: An array of all Y axis IDs in the chart
  *
- * If access to a specific Y axis is needed, use the `useYAxis` hook instead.
+ * @example
+ * const { yAxis, yAxisIds } = useYAxes();
  *
- * @returns `{ yAxis, yAxisIds }` - The y-axes and their IDs.
+ * @see `useYAxis` for accessing a single Y axis
  */
 export function useYAxes() {
   const store = useStore();
@@ -49,9 +59,20 @@ export function useYAxes() {
 }
 
 /**
- * Get the X axis.
- * @param {AxisId | undefined} axisId - If provided returns the x axis with axisId, else returns the values for the default x axis.
- * @returns The X axis.
+ * Get a specific X axis or the default X axis.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `xAxis` prop
+ *   - Undefined to get the default (first) X axis
+ * @returns The configuration for a single X axis.
+ *
+ * @example
+ * // Get the default X axis
+ * const xAxis = useXAxis();
+ *
+ * @example
+ * // Get a specific X axis by string ID
+ * const xAxis = useXAxis('revenue');
  */
 export function useXAxis(axisId) {
   const store = useStore();
@@ -64,9 +85,20 @@ export function useXAxis(axisId) {
 }
 
 /**
- * Get the Y axis.
- * @param {AxisId | undefined} axisId - If provided returns the y axis with axisId, else returns the values for the default y axis.
- * @returns The Y axis.
+ * Get a specific Y axis or the default Y axis.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `yAxis` prop
+ *   - Undefined to get the default (first) Y axis
+ * @returns The configuration for a single Y axis.
+ *
+ * @example
+ * // Get the default Y axis
+ * const yAxis = useYAxis();
+ *
+ * @example
+ * // Get a specific Y axis by string ID
+ * const yAxis = useYAxis('temperature');
  */
 export function useYAxis(axisId) {
   const store = useStore();
@@ -77,6 +109,22 @@ export function useYAxis(axisId) {
   const id = axisId ?? yAxisIds[0];
   return yAxis[id];
 }
+
+/**
+ * Get all the rotation axes for polar charts.
+ *
+ * Returns all rotation axes configured in polar charts along with their IDs.
+ * Rotation axes are used in charts like `RadarChart` to define angular positioning.
+ *
+ * @returns An object containing:
+ *   - `rotationAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `rotationAxisIds`: An array of all rotation axis IDs in the chart
+ *
+ * @example
+ * const { rotationAxis, rotationAxisIds } = useRotationAxes();
+ *
+ * @see `useRotationAxis` for accessing a single rotation axis
+ */
 export function useRotationAxes() {
   const store = useStore();
   const {
@@ -88,6 +136,22 @@ export function useRotationAxes() {
     rotationAxisIds
   };
 }
+
+/**
+ * Get all the radius axes for polar charts.
+ *
+ * Returns all radial axes configured in polar charts along with their IDs.
+ * Radius axes are used in charts like `RadarChart` to define radial positioning and scaling.
+ *
+ * @returns An object containing:
+ *   - `radiusAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `radiusAxisIds`: An array of all radius axis IDs in the chart
+ *
+ * @example
+ * const { radiusAxis, radiusAxisIds } = useRadiusAxes();
+ *
+ * @see `useRadiusAxis` for accessing a single radius axis
+ */
 export function useRadiusAxes() {
   const store = useStore();
   const {
@@ -99,21 +163,61 @@ export function useRadiusAxes() {
     radiusAxisIds
   };
 }
-export function useRotationAxis(identifier) {
+
+/**
+ * Get a specific rotation axis or the default rotation axis for polar charts.
+ *
+ * Returns the configuration and scale for a rotation axis in polar charts.
+ * The rotation axis controls the angular positioning of data points around the circle.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's rotation axis configuration
+ *   - Undefined to get the default (first) rotation axis
+ * @returns The rotation axis configuration, or undefined if not found
+ *
+ * @example
+ * // Get the default rotation axis
+ * const rotationAxis = useRotationAxis();
+ *
+ * @example
+ * // Get a specific rotation axis by string ID
+ * const rotationAxis = useRotationAxis('categories');
+ */
+export function useRotationAxis(axisId) {
   const store = useStore();
   const {
     axis: rotationAxis,
     axisIds: rotationAxisIds
   } = useSelector(store, selectorChartRotationAxis);
-  const id = typeof identifier === 'string' ? identifier : rotationAxisIds[identifier ?? 0];
+  const id = axisId ?? rotationAxisIds[0];
   return rotationAxis[id];
 }
-export function useRadiusAxis(identifier) {
+
+/**
+ * Get a specific radius axis or the default radius axis for polar charts.
+ *
+ * Returns the configuration and scale for a radial axis in polar charts.
+ * The radius axis controls the radial distance of data points from the center of the circle.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's radius axis configuration
+ *   - Undefined to get the default (first) radius axis
+ * @returns The radius axis configuration, or undefined if not found
+ *
+ * @example
+ * // Get the default radius axis
+ * const radiusAxis = useRadiusAxis();
+ *
+ * @example
+ * // Get a specific radius axis by string ID
+ * const radiusAxis = useRadiusAxis('magnitude');
+ */
+export function useRadiusAxis(axisId) {
   const store = useStore();
   const {
     axis: radiusAxis,
     axisIds: radiusAxisIds
   } = useSelector(store, selectorChartRadiusAxis);
-  const id = typeof identifier === 'string' ? identifier : radiusAxisIds[identifier ?? 0];
+  const id = axisId ?? radiusAxisIds[0];
   return radiusAxis[id];
 }

package/esm/hooks/useDataset.d.ts

@@ -0,0 +1,6 @@
+import { DatasetType } from "../models/seriesType/config.js";
+/**
+ * Get access to the dataset used to populate series and axes data.
+ * @returns {DatasetType | undefined} The dataset array if provided, otherwise undefined.
+ */
+export declare function useDataset<T extends DatasetType>(): Readonly<T> | undefined;

package/esm/hooks/useDataset.js

@@ -0,0 +1,13 @@
+'use client';
+
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartDataset } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
+/**
+ * Get access to the dataset used to populate series and axes data.
+ * @returns {DatasetType | undefined} The dataset array if provided, otherwise undefined.
+ */
+export function useDataset() {
+  const store = useStore();
+  return useSelector(store, selectorChartDataset);
+}