@mui/x-charts 8.17.0 → 8.19.0

package/esm/internals/seriesSelectorOfType.d.ts

@@ -0,0 +1,20 @@
+import { ChartSeriesDefaultized, ChartsSeriesConfig } from "../models/seriesType/config.js";
+import { SeriesId } from "../models/seriesType/common.js";
+import type { ProcessedSeries } from "./plugins/corePlugins/useChartSeries/index.js";
+export declare const selectorAllSeriesOfType: (args_0: import("./plugins/corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("./plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./plugins/corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./plugins/corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof ChartsSeriesConfig> & import("./plugins/corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("./index.js").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("./index.js").ChartStateCacheKey;
+}, seriesType: keyof ChartsSeriesConfig) => import("./index.js").SeriesProcessorResult<"line"> | import("./index.js").SeriesProcessorResult<"bar"> | {
+  series: Record<SeriesId, import("../index.js").DefaultizedScatterSeriesType>;
+  seriesOrder: SeriesId[];
+} | {
+  series: Record<SeriesId, import("../index.js").DefaultizedPieSeriesType>;
+  seriesOrder: SeriesId[];
+} | {
+  series: Record<SeriesId, import("../index.js").DefaultizedRadarSeriesType>;
+  seriesOrder: SeriesId[];
+} | undefined;
+export declare const selectorSeriesOfType: (args_0: import("./plugins/corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("./plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./plugins/corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./plugins/corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof ChartsSeriesConfig> & import("./plugins/corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("./index.js").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("./index.js").ChartStateCacheKey;
+}, seriesType: keyof ChartsSeriesConfig, ids?: SeriesId | SeriesId[] | undefined) => import("../index.js").DefaultizedLineSeriesType | import("../index.js").DefaultizedBarSeriesType | import("../index.js").DefaultizedRadarSeriesType | import("../index.js").DefaultizedScatterSeriesType | import("../index.js").DefaultizedPieSeriesType | (import("../index.js").DefaultizedLineSeriesType | import("../index.js").DefaultizedBarSeriesType | import("../index.js").DefaultizedRadarSeriesType | import("../index.js").DefaultizedScatterSeriesType | import("../index.js").DefaultizedPieSeriesType | undefined)[] | undefined;
+export declare const useAllSeriesOfType: <T extends keyof ChartsSeriesConfig>(seriesType: T) => ProcessedSeries[T];
+export declare const useSeriesOfType: <T extends keyof ChartsSeriesConfig>(seriesType: T, seriesId?: SeriesId | SeriesId[]) => ChartSeriesDefaultized<T> | ChartSeriesDefaultized<T>[] | undefined;

package/esm/internals/seriesSelectorOfType.js

@@ -0,0 +1,38 @@
+import { warnOnce } from '@mui/x-internals/warning';
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
+import { selectorChartSeriesProcessed } from "./plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
+import { useStore } from "./store/useStore.js";
+import { useSelector } from "./store/useSelector.js";
+export const selectorAllSeriesOfType = createSelector(selectorChartSeriesProcessed, (processedSeries, seriesType) => processedSeries[seriesType]);
+export const selectorSeriesOfType = createSelectorMemoized(selectorChartSeriesProcessed, (processedSeries, seriesType, ids) => {
+  if (!ids || Array.isArray(ids) && ids.length === 0) {
+    return processedSeries[seriesType]?.seriesOrder?.map(seriesId => processedSeries[seriesType]?.series[seriesId]) ?? [];
+  }
+  if (!Array.isArray(ids)) {
+    return processedSeries[seriesType]?.series?.[ids];
+  }
+  const result = [];
+  const failedIds = [];
+  for (const id of ids) {
+    const series = processedSeries[seriesType]?.series?.[id];
+    if (series) {
+      result.push(series);
+    } else {
+      failedIds.push(id);
+    }
+  }
+  if (process.env.NODE_ENV !== 'production' && failedIds.length > 0) {
+    const formattedIds = failedIds.map(v => JSON.stringify(v)).join(', ');
+    const fnName = `use${seriesType.charAt(0).toUpperCase()}${seriesType.slice(1)}Series`;
+    warnOnce([`MUI X Charts: The following ids provided to "${fnName}" could not be found: ${formattedIds}.`, `Make sure that they exist and their series are using the "${seriesType}" series type.`]);
+  }
+  return result;
+});
+export const useAllSeriesOfType = seriesType => {
+  const store = useStore();
+  return useSelector(store, selectorAllSeriesOfType, seriesType);
+};
+export const useSeriesOfType = (seriesType, seriesId) => {
+  const store = useStore();
+  return useSelector(store, selectorSeriesOfType, seriesType, seriesId);
+};

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

@@ -44,6 +44,13 @@ export interface BarSeriesType extends CommonSeriesType<number | null>, Cartesia
    * @returns {string} The formatted label.
    */
   barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label. It accepts the following values:
+   * - 'center': the label is centered on the bar
+   * - 'outside': the label is placed after the end of the bar, from the point of the view of the origin. For a vertical positive bar, the label is above its top edge; for a horizontal negative bar, the label is placed to the left of its leftmost limit.
+   * @default 'center'
+   */
+  barLabelPlacement?: 'center' | 'outside';
 }
 /**
  * An object that allows to identify a single bar.

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

@@ -83,6 +83,6 @@ export type ChartSeriesDefaultized<T extends ChartSeriesType> = ChartsSeriesConf
 export type ChartItemIdentifier<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
 export type ChartItemIdentifierWithData<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifierWithData'];
 export type DatasetElementType<T> = {
-  [key: string]: Readonly<T>;
+  [key: string]: T;
 };
-export type DatasetType<T = number | string | Date | null | undefined> = DatasetElementType<T>[];
+export type DatasetType<T = unknown> = DatasetElementType<T>[];

package/esm/utils/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Exported utility functions for the x-charts library.
+ */
+export * from "./niceDomain.js";

package/esm/utils/index.js

@@ -0,0 +1,5 @@
+/**
+ * Exported utility functions for the x-charts library.
+ */
+
+export * from "./niceDomain.js";

package/esm/utils/niceDomain.d.ts

@@ -0,0 +1,20 @@
+import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
+import { ContinuousScaleName } from "../models/index.js";
+/**
+ * Returns a nice domain for the given scale type and domain.
+ * Does not modify the original domain.
+ *
+ * Providing a count improves the nice domain calculation by trying to align tick values to round
+ * numbers or dates.
+ *
+ * For example, if you have a domain of [29, 72] and there are 5 ticks, the nice domain will be
+ * [20, 80] so that the ticks can be at [20, 35, 50, 65, 80].
+ * However, if there are 11 ticks, the nice domain will be [25, 75] so that the ticks can be at
+ * [25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75].
+ *
+ * @param scaleType The type of the scale (e.g., 'linear', 'log', 'time', etc.).
+ * @param domain The domain to be made nicer.
+ * @param count An optional number of ticks to improve the nice domain calculation. Defaults to 5.
+ */
+export declare function niceDomain<Domain extends NumberValue>(scaleType: Exclude<ContinuousScaleName, 'time' | 'utc'>, domain: Iterable<Domain>, count?: number): Domain[];
+export declare function niceDomain<Domain extends NumberValue>(scaleType: 'time' | 'utc', domain: Iterable<Domain>, count?: number): Date[];

package/esm/utils/niceDomain.js

@@ -0,0 +1,24 @@
+import { getScale } from "../internals/getScale.js";
+
+/**
+ * Returns a nice domain for the given scale type and domain.
+ * Does not modify the original domain.
+ *
+ * Providing a count improves the nice domain calculation by trying to align tick values to round
+ * numbers or dates.
+ *
+ * For example, if you have a domain of [29, 72] and there are 5 ticks, the nice domain will be
+ * [20, 80] so that the ticks can be at [20, 35, 50, 65, 80].
+ * However, if there are 11 ticks, the nice domain will be [25, 75] so that the ticks can be at
+ * [25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75].
+ *
+ * @param scaleType The type of the scale (e.g., 'linear', 'log', 'time', etc.).
+ * @param domain The domain to be made nicer.
+ * @param count An optional number of ticks to improve the nice domain calculation. Defaults to 5.
+ */
+
+export function niceDomain(scaleType, domain, count = 5) {
+  const scale = getScale(scaleType, domain, [0, 1]);
+  scale.nice(count);
+  return scale.domain();
+}

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

@@ -11,14 +11,12 @@ function barLabelPropsInterpolator(from, to) {
   const interpolateY = (0, _d3Interpolate.interpolateNumber)(from.y, to.y);
   const interpolateWidth = (0, _d3Interpolate.interpolateNumber)(from.width, to.width);
   const interpolateHeight = (0, _d3Interpolate.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)
+  });
 }
 
 /**
@@ -31,15 +29,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.
  */
 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
   };
@@ -56,4 +60,49 @@ 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/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/hooks/useAxis.js

@@ -19,12 +19,17 @@ var _useStore = require("../internals/store/useStore");
 /**
  * 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
  */
 function useXAxes() {
   const store = (0, _useStore.useStore)();
@@ -41,12 +46,17 @@ 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
  */
 function useYAxes() {
   const store = (0, _useStore.useStore)();
@@ -61,9 +71,20 @@ 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');
  */
 function useXAxis(axisId) {
   const store = (0, _useStore.useStore)();
@@ -76,9 +97,20 @@ 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');
  */
 function useYAxis(axisId) {
   const store = (0, _useStore.useStore)();
@@ -89,6 +121,22 @@ 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
+ */
 function useRotationAxes() {
   const store = (0, _useStore.useStore)();
   const {
@@ -100,6 +148,22 @@ 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
+ */
 function useRadiusAxes() {
   const store = (0, _useStore.useStore)();
   const {
@@ -111,21 +175,61 @@ function useRadiusAxes() {
     radiusAxisIds
   };
 }
-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');
+ */
+function useRotationAxis(axisId) {
   const store = (0, _useStore.useStore)();
   const {
     axis: rotationAxis,
     axisIds: rotationAxisIds
   } = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartRotationAxis);
-  const id = typeof identifier === 'string' ? identifier : rotationAxisIds[identifier ?? 0];
+  const id = axisId ?? rotationAxisIds[0];
   return rotationAxis[id];
 }
-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');
+ */
+function useRadiusAxis(axisId) {
   const store = (0, _useStore.useStore)();
   const {
     axis: radiusAxis,
     axisIds: radiusAxisIds
   } = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartRadiusAxis);
-  const id = typeof identifier === 'string' ? identifier : radiusAxisIds[identifier ?? 0];
+  const id = axisId ?? radiusAxisIds[0];
   return radiusAxis[id];
 }

package/hooks/useBarSeries.js

@@ -6,10 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useBarSeries = useBarSeries;
 exports.useBarSeriesContext = useBarSeriesContext;
-var _createSeriesSelectorOfType = require("../internals/createSeriesSelectorOfType");
-const useSelectorSeries = (0, _createSeriesSelectorOfType.createSeriesSelectorsOfType)('bar');
-const useSelectorSeriesContext = (0, _createSeriesSelectorOfType.createAllSeriesSelectorOfType)('bar');
-
+var _seriesSelectorOfType = require("../internals/seriesSelectorOfType");
 /**
  * Get access to the internal state of bar series.
  *
@@ -33,7 +30,7 @@ const useSelectorSeriesContext = (0, _createSeriesSelectorOfType.createAllSeries
  */
 
 function useBarSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return (0, _seriesSelectorOfType.useSeriesOfType)('bar', seriesIds);
 }
 
 /**
@@ -45,5 +42,5 @@ function useBarSeries(seriesIds) {
  * @returns the bar series
  */
 function useBarSeriesContext() {
-  return useSelectorSeriesContext();
+  return (0, _seriesSelectorOfType.useAllSeriesOfType)('bar');
 }