@mui/x-charts 8.0.0-alpha.10 → 8.0.0-alpha.12

package/modern/SparkLineChart/SparkLineChart.d.ts

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { MakeOptional } from '@mui/x-internals/types';
+import { ChartsColor } from "../colorPalettes/index.js";
+import { ChartContainerProps } from "../ChartContainer/index.js";
+import { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
+import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
+import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from "../models/axis.js";
+import { LineSeriesType } from "../models/seriesType/index.js";
+import { AreaPlotSlots, AreaPlotSlotProps } from "../LineChart/AreaPlot.js";
+import { LinePlotSlots, LinePlotSlotProps } from "../LineChart/LinePlot.js";
+import { MarkPlotSlots, MarkPlotSlotProps } from "../LineChart/MarkPlot.js";
+import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from "../LineChart/LineHighlightPlot.js";
+import { BarPlotSlots, BarPlotSlotProps } from "../BarChart/BarPlot.js";
+import { ChartMargin } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js";
+export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots {}
+export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {}
+export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'margin' | 'plugins' | 'colors'> {
+  /**
+   * The xAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>;
+  /**
+   * The yAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>;
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * Type of plot used.
+   * @default 'line'
+   */
+  plotType?: 'line' | 'bar';
+  /**
+   * Data to plot.
+   */
+  data: number[];
+  /**
+   * Formatter used by the tooltip.
+   * @param {number} value The value to format.
+   * @returns {string} the formatted value.
+   * @default (value: number | null) => (value === null ? '' : value.toString())
+   */
+  valueFormatter?: (value: number | null) => string;
+  /**
+   * Set to `true` to enable the tooltip in the sparkline.
+   * @default false
+   */
+  showTooltip?: boolean;
+  /**
+   * Set to `true` to highlight the value.
+   * With line, it shows a point.
+   * With bar, it shows a highlight band.
+   * @default false
+   */
+  showHighlight?: boolean;
+  /**
+   * Set to `true` to fill spark line area.
+   * Has no effect if plotType='bar'.
+   * @default false
+   */
+  area?: LineSeriesType['area'];
+  /**
+   * @default 'linear'
+   */
+  curve?: LineSeriesType['curve'];
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default {
+   *   top: 5,
+   *   bottom: 5,
+   *   left: 5,
+   *   right: 5,
+   * }
+   */
+  margin?: Partial<ChartMargin>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SparkLineChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SparkLineChartSlotProps;
+  /**
+   * Color used to colorize the sparkline.
+   * @default rainbowSurgePalette[0]
+   */
+  color?: ChartsColor;
+}
+/**
+ * Demos:
+ *
+ * - [SparkLine](https://mui.com/x/react-charts/sparkline/)
+ *
+ * API:
+ *
+ * - [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
+ */
+declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps & React.RefAttributes<SVGSVGElement>>;
+export { SparkLineChart };

package/modern/SparkLineChart/SparkLineChart.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "colors", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
+const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "color", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { BarPlot } from "../BarChart/index.js";
@@ -35,7 +35,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       width,
       height,
       margin = SPARKLINE_DEFAULT_MARGIN,
-      colors,
+      color,
       sx,
       showTooltip,
       showHighlight,
@@ -58,6 +58,12 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
   };
   const axisHighlight = _extends({}, defaultXHighlight, inAxisHighlight);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  const colors = React.useMemo(() => {
+    if (color == null) {
+      return undefined;
+    }
+    return typeof color === 'function' ? mode => [color(mode)] : [color];
+  }, [color]);
   return /*#__PURE__*/_jsxs(ChartContainer, _extends({}, other, {
     ref: ref,
     series: [_extends({
@@ -128,10 +134,10 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   /**
-   * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * Color used to colorize the sparkline.
+   * @default rainbowSurgePalette[0]
    */
-  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  color: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
    * @default 'linear'
    */
@@ -151,6 +157,10 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * If true, the voronoi interaction are ignored.
+   */
+  disableVoronoi: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -185,12 +195,26 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * Callback fired when clicking close to an item.
+   * This is only available for scatter plot for now.
+   * @param {MouseEvent} event Mouse event caught at the svg level
+   * @param {ScatterItemIdentifier} scatterItemIdentifier Identify which item got clicked
+   */
+  onItemClick: PropTypes.func,
   /**
    * Type of plot used.
    * @default 'line'
@@ -233,6 +257,11 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default (value: number | null) => (value === null ? '' : value.toString())
    */
   valueFormatter: PropTypes.func,
+  /**
+   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  voronoiMaxRadius: PropTypes.number,
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/modern/SparkLineChart/index.d.ts

@@ -0,0 +1 @@
+export * from "./SparkLineChart.js";

package/modern/colorPalettes/colorPalettes.d.ts

@@ -0,0 +1,16 @@
+export type ChartsColorPaletteCallback = (mode: 'light' | 'dark') => string[];
+export type ChartsColorPalette = string[] | ChartsColorPaletteCallback;
+export type ChartsColorCallback = (mode: 'light' | 'dark') => string;
+export type ChartsColor = string | ChartsColorCallback;
+export declare const rainbowSurgePaletteLight: string[];
+export declare const rainbowSurgePaletteDark: string[];
+export declare const rainbowSurgePalette: ChartsColorPaletteCallback;
+export declare const blueberryTwilightPaletteLight: string[];
+export declare const blueberryTwilightPaletteDark: string[];
+export declare const blueberryTwilightPalette: ChartsColorPaletteCallback;
+export declare const mangoFusionPaletteLight: string[];
+export declare const mangoFusionPaletteDark: string[];
+export declare const mangoFusionPalette: ChartsColorPaletteCallback;
+export declare const cheerfulFiestaPaletteDark: string[];
+export declare const cheerfulFiestaPaletteLight: string[];
+export declare const cheerfulFiestaPalette: ChartsColorPaletteCallback;

package/modern/colorPalettes/index.d.ts

@@ -0,0 +1 @@
+export * from "./colorPalettes.js";

package/modern/constants/index.d.ts

@@ -0,0 +1,9 @@
+export declare const DEFAULT_X_AXIS_KEY = "DEFAULT_X_AXIS_KEY";
+export declare const DEFAULT_Y_AXIS_KEY = "DEFAULT_Y_AXIS_KEY";
+export declare const DEFAULT_MARGINS: {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};
+export declare const DEFAULT_LEGEND_FACING_MARGIN = 20;

package/modern/context/AnimationProvider/Animation.types.d.ts

@@ -0,0 +1,15 @@
+export type AnimationProviderProps = {
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  children: React.ReactNode;
+};
+export type AnimationState = {
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation?: boolean;
+};

package/modern/context/AnimationProvider/AnimationContext.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Initializable } from "../context.types.js";
+import { AnimationState } from "./Animation.types.js";
+export declare const AnimationContext: React.Context<Initializable<AnimationState>>;

package/modern/context/AnimationProvider/AnimationProvider.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { AnimationProviderProps } from "./Animation.types.js";
+declare function AnimationProvider(props: AnimationProviderProps): React.JSX.Element;
+export { AnimationProvider };

package/modern/context/AnimationProvider/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Animation.types.js";
+export * from "./AnimationContext.js";
+export * from "./AnimationProvider.js";
+export * from "./useSkipAnimation.js";

package/modern/context/AnimationProvider/useSkipAnimation.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A hook to get if chart animations should be skipped.
+ *
+ * @returns {boolean|undefined} whether to skip animations
+ */
+export declare function useSkipAnimation(skipAnimation?: boolean): boolean | undefined;

package/modern/context/ChartProvider/ChartContext.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { ChartContextValue } from './ChartProvider.types';
+/**
+ * @ignore - internal component.
+ */
+export declare const ChartContext: React.Context<ChartContextValue<any> | null>;

package/modern/context/ChartProvider/ChartProvider.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { ChartProviderProps } from './ChartProvider.types';
+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: ChartProviderProps<TSeriesType, TSignatures>): React.JSX.Element;
+export { ChartProvider };

package/modern/context/ChartProvider/ChartProvider.js

@@ -7,16 +7,16 @@ 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 { plugin as barPlugin } from "../../BarChart/plugin.js";
-import { plugin as scatterPlugin } from "../../ScatterChart/plugin.js";
-import { plugin as linePlugin } from "../../LineChart/plugin.js";
-import { plugin as piePlugin } from "../../PieChart/plugin.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 { jsx as _jsx } from "react/jsx-runtime";
 export const defaultSeriesConfig = {
-  bar: barPlugin,
-  scatter: scatterPlugin,
-  line: linePlugin,
-  pie: piePlugin
+  bar: barSeriesConfig,
+  scatter: scatterSeriesConfig,
+  line: lineSeriesConfig,
+  pie: pieSeriesConfig
 };
 
 // For consistency with the v7, the cartesian axes are set by default.

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../../internals/plugins/models/index.js";
+import { ChartStore } from "../../internals/plugins/utils/ChartStore.js";
+import { ChartCorePluginSignatures } from "../../internals/plugins/corePlugins/index.js";
+import { ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+import { UseChartBaseProps } from "../../internals/store/useCharts.types.js";
+import { ChartSeriesType } from "../../models/seriesType/config.js";
+export type ChartContextValue<TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[] = []> = {
+  /**
+   * And object with all the methods needed to interact with the chart.
+   */
+  instance: ChartInstance<TSignatures, TOptionalSignatures>;
+  /**
+   * A subset of the `instance` method that are exposed to the developers.
+   */
+  publicAPI: ChartPublicAPI<TSignatures, TOptionalSignatures>;
+  /**
+   * The internal state of the chart.
+   */
+  store: ChartStore<TSignatures>;
+  /**
+   * The ref to the <svg />.
+   */
+  svgRef: React.RefObject<SVGSVGElement | 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[] = []> {
+  /**
+   * 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 serries type.
+   * @ignore Unstable props for internal usage.
+   */
+  seriesConfig?: ChartSeriesConfig<TSeries>;
+  children: React.ReactNode;
+}

package/modern/context/ChartProvider/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ChartProvider.js";
+export * from "./ChartProvider.types.js";
+export * from "./useChartContext.js";

package/modern/context/ChartProvider/useChartContext.d.ts

@@ -0,0 +1,3 @@
+import { ChartAnyPluginSignature } from "../../internals/plugins/models/index.js";
+import { ChartContextValue } from "./ChartProvider.types.js";
+export declare const useChartContext: <TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[] = []>() => ChartContextValue<TSignatures, TOptionalSignatures>;

package/modern/context/PolarProvider/Polar.types.d.ts

@@ -0,0 +1,42 @@
+import { DatasetType } from "../../models/seriesType/config.js";
+import { AxisDefaultized, ScaleName, AxisId, AxisConfig, ChartsRotationAxisProps, ChartsRadiusAxisProps } from "../../models/axis.js";
+export type PolarProviderProps = {
+  /**
+   * The configuration of the rotation-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  rotationAxis: AxisConfig<ScaleName, any, ChartsRotationAxisProps>[];
+  /**
+   * The configuration of the radial-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  radiusAxis: AxisConfig<'linear', any, ChartsRadiusAxisProps>[];
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset?: DatasetType;
+  children: React.ReactNode;
+};
+export type DefaultizedAxisConfig<Axis> = {
+  [axisId: AxisId]: AxisDefaultized<ScaleName, any, Axis>;
+};
+export type PolarContextState = {
+  /**
+   * Mapping from rotation-axis key to scaling configuration.
+   */
+  rotationAxis: DefaultizedAxisConfig<ChartsRotationAxisProps>;
+  /**
+   * Mapping from radius-axis key to scaling configuration.
+   */
+  radiusAxis: DefaultizedAxisConfig<ChartsRadiusAxisProps>;
+  /**
+   * The rotation-axes IDs sorted by order they got provided.
+   */
+  rotationAxisIds: AxisId[];
+  /**
+   * The radius-axes IDs sorted by order they got provided.
+   */
+  radiusAxisIds: AxisId[];
+};

package/modern/context/PolarProvider/PolarContext.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Initializable } from "../context.types.js";
+import { PolarContextState } from "./Polar.types.js";
+export declare const PolarContext: React.Context<Initializable<PolarContextState>>;

package/modern/context/context.types.d.ts

@@ -0,0 +1,4 @@
+export type Initializable<T> = {
+  isInitialized: boolean;
+  data: T;
+};

package/modern/context/index.d.ts

@@ -0,0 +1 @@
+export type { HighlightScope, FadeOptions, HighlightItemData, HighlightOptions } from '../internals/plugins/featurePlugins/useChartHighlight';

package/modern/hooks/getValueToPositionMapper.d.ts

@@ -0,0 +1,8 @@
+import { 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 scale The scale to use
+ * @returns (value: any) => number
+ */
+export declare function getValueToPositionMapper(scale: D3Scale): (value: any) => number;

package/modern/hooks/getValueToPositionMapper.js

@@ -0,0 +1,15 @@
+'use client';
+
+import { isBandScale } from "../internals/isBandScale.js";
+/**
+ * For a given scale return a function that map value to their position.
+ * Useful when dealing with specific scale such as band.
+ * @param scale The scale to use
+ * @returns (value: any) => number
+ */
+export function getValueToPositionMapper(scale) {
+  if (isBandScale(scale)) {
+    return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
+  }
+  return value => scale(value);
+}

package/modern/hooks/index.d.ts

@@ -0,0 +1,16 @@
+export * from "./useDrawingArea.js";
+export * from "./useChartId.js";
+export * from "./useScale.js";
+export * from "./useAxis.js";
+export * from "./useZAxis.js";
+export * from "./useColorScale.js";
+export * from "./useSvgRef.js";
+export * from "./useSeries.js";
+export * from "./useScatterSeries.js";
+export * from "./usePieSeries.js";
+export * from "./useBarSeries.js";
+export * from "./useLineSeries.js";
+export * from "./useItemHighlighted.js";
+export * from "./useItemHighlightedGetter.js";
+export * from "./useLegend.js";
+export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";

package/modern/hooks/index.js

@@ -5,8 +5,12 @@ export * from "./useAxis.js";
 export * from "./useZAxis.js";
 export * from "./useColorScale.js";
 export * from "./useSvgRef.js";
+export * from "./useSeries.js";
+export * from "./useScatterSeries.js";
+export * from "./usePieSeries.js";
+export * from "./useBarSeries.js";
+export * from "./useLineSeries.js";
 export * from "./useItemHighlighted.js";
 export * from "./useItemHighlightedGetter.js";
-export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from "./useSeries.js";
 export * from "./useLegend.js";
 export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";

package/modern/hooks/useAxis.d.ts

@@ -0,0 +1,41 @@
+import { AxisId } from "../models/axis.js";
+/**
+ * Get all the x-axes.
+ *
+ * - `xAxis` is an object with the shape `{ [axisId]: axis }`.
+ * - `xAxisIds` is an array of axis IDs.
+ *
+ * If access to a specific X axis is needed, use the `useXAxis` hook instead.
+ *
+ * @returns `{ xAxis, xAxisIds }` - The x-axes and their IDs.
+ */
+export declare function useXAxes(): {
+  xAxis: import("../internals").DefaultizedAxisConfig<import("../internals").ChartsAxisProps>;
+  xAxisIds: string[];
+};
+/**
+ * Get all the y-axes.
+ *
+ * - `yAxis` is an object with the shape `{ [axisId]: axis }`.
+ * - `yAxisIds` is an array of axis IDs.
+ *
+ * If access to a specific Y axis is needed, use the `useYAxis` hook instead.
+ *
+ * @returns `{ yAxis, yAxisIds }` - The y-axes and their IDs.
+ */
+export declare function useYAxes(): {
+  yAxis: import("../internals").DefaultizedAxisConfig<import("..").ChartsYAxisProps>;
+  yAxisIds: string[];
+};
+/**
+ * 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.
+ */
+export declare function useXAxis(axisId?: AxisId): import("../internals").AxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("../internals").ChartsAxisProps>;
+/**
+ * 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.
+ */
+export declare function useYAxis(axisId?: AxisId): import("../internals").AxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("..").ChartsYAxisProps>;

package/modern/hooks/useAxis.js

@@ -3,6 +3,16 @@
 import { selectorChartXAxis, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.js";
 import { useSelector } from "../internals/store/useSelector.js";
 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.
+ *
+ * If access to a specific X axis is needed, use the `useXAxis` hook instead.
+ *
+ * @returns `{ xAxis, xAxisIds }` - The x-axes and their IDs.
+ */
 export function useXAxes() {
   const store = useStore();
   const {
@@ -14,6 +24,17 @@ export function useXAxes() {
     xAxisIds
   };
 }
+
+/**
+ * Get all the y-axes.
+ *
+ * - `yAxis` is an object with the shape `{ [axisId]: axis }`.
+ * - `yAxisIds` is an array of axis IDs.
+ *
+ * If access to a specific Y axis is needed, use the `useYAxis` hook instead.
+ *
+ * @returns `{ yAxis, yAxisIds }` - The y-axes and their IDs.
+ */
 export function useYAxes() {
   const store = useStore();
   const {
@@ -25,21 +46,33 @@ export function useYAxes() {
     yAxisIds
   };
 }
-export function useXAxis(identifier) {
+
+/**
+ * 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.
+ */
+export function useXAxis(axisId) {
   const store = useStore();
   const {
     axis: xAxis,
     axisIds: xAxisIds
   } = useSelector(store, selectorChartXAxis);
-  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
+  const id = axisId ?? xAxisIds[0];
   return xAxis[id];
 }
-export function useYAxis(identifier) {
+
+/**
+ * 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.
+ */
+export function useYAxis(axisId) {
   const store = useStore();
   const {
     axis: yAxis,
     axisIds: yAxisIds
   } = useSelector(store, selectorChartYAxis);
-  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
+  const id = axisId ?? yAxisIds[0];
   return yAxis[id];
 }