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

package/esm/ScatterChart/ScatterChart.js

@@ -78,12 +78,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
-  /**
-   * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default xAxisIds[0] The id of the first provided axis
-   */
-  bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   children: PropTypes.node,
   className: PropTypes.string,
   /**
@@ -135,12 +129,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: PropTypes.string,
-  /**
-   * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default yAxisIds[0] The id of the first provided axis
-   */
-  leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -149,14 +137,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   /**
    * 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`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: PropTypes.shape({
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,
     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.
@@ -176,12 +165,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: PropTypes.func,
-  /**
-   * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default null
-   */
-  rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeriesType]] objects.
@@ -205,12 +188,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
-  /**
-   * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default null
-   */
-  topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
    * If `undefined`, the radius is assumed to be infinite.
@@ -226,6 +203,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
+    axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -248,13 +226,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'top']),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -263,6 +243,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelMinGap: PropTypes.number,
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
@@ -278,6 +259,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
+    axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -306,7 +288,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['left', 'right']),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -322,7 +305,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    width: PropTypes.number
   })),
   /**
    * The configuration of the z-axes.

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

@@ -1,3 +1,3 @@
-import { CartesianExtremumGetter } from "../../internals/plugins/models/seriesConfig/extremumGetter.types.js";
+import { CartesianExtremumGetter } from "../../internals/plugins/models/seriesConfig/index.js";
 export declare const getExtremumX: CartesianExtremumGetter<'scatter'>;
 export declare const getExtremumY: CartesianExtremumGetter<'scatter'>;

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

@@ -0,0 +1,3 @@
+import type { GetSeriesWithDefaultValues } from '../../internals/plugins/models/seriesConfig';
+declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'scatter'>;
+export default getSeriesWithDefaultValues;

package/esm/ScatterChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -0,0 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
+  return _extends({
+    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
+    color: colors[seriesIndex % colors.length]
+  }, seriesData);
+};
+export default getSeriesWithDefaultValues;

package/esm/ScatterChart/seriesConfig/index.js

@@ -3,11 +3,13 @@ import seriesProcessor from "./seriesProcessor.js";
 import getColor from "./getColor.js";
 import legendGetter from "./legend.js";
 import tooltipGetter from "./tooltip.js";
+import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 export const seriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
   legendGetter,
   tooltipGetter,
   xExtremumGetter: getExtremumX,
-  yExtremumGetter: getExtremumY
+  yExtremumGetter: getExtremumY,
+  getSeriesWithDefaultValues
 };

package/esm/ScatterChart/useScatterChartProps.js

@@ -2,8 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
-import { calculateMargins } from "../internals/calculateMargins.js";
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
 import { SCATTER_CHART_PLUGINS } from "./ScatterChart.plugins.js";
 /**
  * A helper function that extracts ScatterChartProps from the input props
@@ -21,17 +20,12 @@ export const useScatterChartProps = props => {
       axisHighlight,
       voronoiMaxRadius,
       disableVoronoi,
-      hideLegend,
       width,
       height,
       margin,
       colors,
       sx,
       grid,
-      topAxis,
-      leftAxis,
-      rightAxis,
-      bottomAxis,
       onItemClick,
       children,
       slots,
@@ -48,12 +42,7 @@ export const useScatterChartProps = props => {
     }, s)),
     width,
     height,
-    margin: calculateMargins({
-      margin,
-      hideLegend,
-      slotProps,
-      series
-    }),
+    margin,
     colors,
     xAxis,
     yAxis,
@@ -67,10 +56,6 @@ export const useScatterChartProps = props => {
     plugins: SCATTER_CHART_PLUGINS
   });
   const chartsAxisProps = {
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
     slots,
     slotProps
   };

package/esm/SparkLineChart/SparkLineChart.d.ts

@@ -14,7 +14,7 @@ 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'> {
+export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'margin' | 'plugins' | 'colors'> {
   /**
    * The xAxis configuration.
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.
@@ -67,15 +67,11 @@ export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series'
   /**
    * 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,
-   * }
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default 5
    */
-  margin?: Partial<ChartMargin>;
+  margin?: Partial<ChartMargin> | number;
   /**
    * Overridable component slots.
    * @default {}

package/esm/SparkLineChart/SparkLineChart.js

@@ -12,12 +12,7 @@ import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SPARKLINE_DEFAULT_MARGIN = {
-  top: 5,
-  bottom: 5,
-  left: 5,
-  right: 5
-};
+const SPARK_LINE_DEFAULT_MARGIN = 5;
 
 /**
  * Demos:
@@ -34,7 +29,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       yAxis,
       width,
       height,
-      margin = SPARKLINE_DEFAULT_MARGIN,
+      margin = SPARK_LINE_DEFAULT_MARGIN,
       color,
       sx,
       showTooltip,
@@ -86,10 +81,14 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
         length: data.length
       }, (_, index) => index),
       hideTooltip: xAxis === undefined
-    }, xAxis)],
+    }, xAxis, {
+      position: 'none'
+    })],
     yAxis: [_extends({
       id: DEFAULT_Y_AXIS_KEY
-    }, yAxis)],
+    }, yAxis, {
+      position: 'none'
+    })],
     colors: colors,
     sx: sx,
     disableAxisListener: (!showTooltip || slotProps?.tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
@@ -181,20 +180,16 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   /**
    * 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,
-   * }
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default 5
    */
-  margin: PropTypes.shape({
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,
     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.
@@ -271,6 +266,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.
    */
   xAxis: PropTypes.shape({
+    axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -293,13 +289,15 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'top']),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -308,6 +306,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelMinGap: PropTypes.number,
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
@@ -322,6 +321,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.
    */
   yAxis: PropTypes.shape({
+    axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -350,7 +350,8 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['left', 'right']),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -366,7 +367,8 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    width: PropTypes.number
   })
 } : void 0;
 export { SparkLineChart };

package/esm/constants/index.d.ts

@@ -1,9 +1,13 @@
 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_ROTATION_AXIS_KEY = "DEFAULT_ROTATION_AXIS_KEY";
+export declare const DEFAULT_RADIUS_AXIS_KEY = "DEFAULT_RADIUS_AXIS_KEY";
 export declare const DEFAULT_MARGINS: {
   top: number;
   bottom: number;
   left: number;
   right: number;
 };
-export declare const DEFAULT_LEGEND_FACING_MARGIN = 20;
+export declare const DEFAULT_AXIS_SIZE_WIDTH = 30;
+export declare const DEFAULT_AXIS_SIZE_HEIGHT = 25;
+export declare const AXIS_LABEL_DEFAULT_HEIGHT = 20;

package/esm/constants/index.js

@@ -1,9 +1,15 @@
 export const DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
 export const DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
+export const DEFAULT_ROTATION_AXIS_KEY = 'DEFAULT_ROTATION_AXIS_KEY';
+export const DEFAULT_RADIUS_AXIS_KEY = 'DEFAULT_RADIUS_AXIS_KEY';
 export const DEFAULT_MARGINS = {
-  top: 50,
-  bottom: 50,
-  left: 50,
-  right: 50
+  top: 20,
+  bottom: 20,
+  left: 20,
+  right: 20
 };
-export const DEFAULT_LEGEND_FACING_MARGIN = 20;
+export const DEFAULT_AXIS_SIZE_WIDTH = 30;
+export const DEFAULT_AXIS_SIZE_HEIGHT = 25;
+
+// How many pixels to add to the default axis size if that axis has a label
+export const AXIS_LABEL_DEFAULT_HEIGHT = 20;

package/esm/context/AnimationProvider/useSkipAnimation.js

@@ -14,7 +14,7 @@ export function useSkipAnimation(skipAnimation) {
     data
   } = React.useContext(AnimationContext);
   if (!isInitialized) {
-    throw new Error(['MUI X: Could not find the animation ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+    throw new Error(['MUI X: Could not find the animation ref context.', 'It looks like you rendered your component outside of a ChartContainer parent component.'].join('\n'));
   }
   return skipAnimation || data.skipAnimation;
 }

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

@@ -1,10 +1,10 @@
 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";
+import type { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from '../../internals/plugins/models';
+import type { ChartStore } from '../../internals/plugins/utils/ChartStore';
+import type { ChartCorePluginSignatures } from '../../internals/plugins/corePlugins';
+import type { ChartSeriesConfig } from '../../internals/plugins/models/seriesConfig';
+import type { UseChartBaseProps } from '../../internals/store/useCharts.types';
+import type { ChartSeriesType } from '../../models/seriesType/config';
 export type ChartContextValue<TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[] = []> = {
   /**
    * And object with all the methods needed to interact with the chart.

package/esm/hooks/useAxis.d.ts

@@ -10,7 +10,7 @@ import { AxisId } from "../models/axis.js";
  * @returns `{ xAxis, xAxisIds }` - The x-axes and their IDs.
  */
 export declare function useXAxes(): {
-  xAxis: import("../internals").DefaultizedAxisConfig<import("../internals").ChartsAxisProps>;
+  xAxis: import("../internals").DefaultizedAxisConfig<import("..").ChartsXAxisProps>;
   xAxisIds: string[];
 };
 /**
@@ -32,10 +32,20 @@ export declare function useYAxes(): {
  * @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>;
+export declare function useXAxis(axisId?: AxisId): import("../internals").AxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("..").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.
  */
-export declare function useYAxis(axisId?: AxisId): import("../internals").AxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("..").ChartsYAxisProps>;
+export declare function useYAxis(axisId?: AxisId): import("../internals").AxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("..").ChartsYAxisProps>;
+export declare function useRotationAxes(): {
+  rotationAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue").DefaultizedAxisConfig<import("../internals").ChartsAxisProps>;
+  rotationAxisIds: string[];
+};
+export declare function useRadiusAxes(): {
+  radiusAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue").DefaultizedAxisConfig<import("..").ChartsYAxisProps>;
+  radiusAxisIds: string[];
+};
+export declare function useRotationAxis(identifier?: number | string): import("../internals").PolarAxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("../internals").ChartsAxisProps>;
+export declare function useRadiusAxis(identifier?: number | string): import("../internals").PolarAxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("..").ChartsYAxisProps>;

package/esm/hooks/useAxis.js

@@ -1,6 +1,7 @@
 'use client';
 
-import { selectorChartXAxis, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.js";
+import { selectorChartXAxis, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js";
+import { selectorChartRadiusAxis, selectorChartRotationAxis } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 /**
@@ -75,4 +76,44 @@ export function useYAxis(axisId) {
   } = useSelector(store, selectorChartYAxis);
   const id = axisId ?? yAxisIds[0];
   return yAxis[id];
+}
+export function useRotationAxes() {
+  const store = useStore();
+  const {
+    axis: rotationAxis,
+    axisIds: rotationAxisIds
+  } = useSelector(store, selectorChartRotationAxis);
+  return {
+    rotationAxis,
+    rotationAxisIds
+  };
+}
+export function useRadiusAxes() {
+  const store = useStore();
+  const {
+    axis: radiusAxis,
+    axisIds: radiusAxisIds
+  } = useSelector(store, selectorChartRadiusAxis);
+  return {
+    radiusAxis,
+    radiusAxisIds
+  };
+}
+export function useRotationAxis(identifier) {
+  const store = useStore();
+  const {
+    axis: rotationAxis,
+    axisIds: rotationAxisIds
+  } = useSelector(store, selectorChartRotationAxis);
+  const id = typeof identifier === 'string' ? identifier : rotationAxisIds[identifier ?? 0];
+  return rotationAxis[id];
+}
+export function useRadiusAxis(identifier) {
+  const store = useStore();
+  const {
+    axis: radiusAxis,
+    axisIds: radiusAxisIds
+  } = useSelector(store, selectorChartRadiusAxis);
+  const id = typeof identifier === 'string' ? identifier : radiusAxisIds[identifier ?? 0];
+  return radiusAxis[id];
 }

package/esm/hooks/useRadarSeries.d.ts

@@ -0,0 +1,35 @@
+import { ProcessedSeries } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js";
+import { SeriesId } from "../models/seriesType/common.js";
+import { ChartSeriesDefaultized } from "../models/seriesType/config.js";
+export type UseRadarSeriesReturnValue = ChartSeriesDefaultized<'radar'>;
+export type UseRadarSeriesContextReturnValue = ProcessedSeries['radar'];
+/**
+ * Get access to the internal state of radar series.
+ *
+ * @param {SeriesId} seriesId The id of the series to get.
+ * @returns {UseRadarSeriesReturnValue} the radar series
+ */
+export declare function useRadarSeries(seriesId: SeriesId): UseRadarSeriesReturnValue | undefined;
+/**
+ * Get access to the internal state of radar series.
+ *
+ * When called without arguments, it returns all radar series.
+ *
+ * @returns {UseRadarSeriesReturnValue[]} the radar series
+ */
+export declare function useRadarSeries(): UseRadarSeriesReturnValue[];
+/**
+ * Get access to the internal state of radar series.
+ *
+ * @param {SeriesId[]} seriesIds The ids of the series to get. Order is preserved.
+ * @returns {UseRadarSeriesReturnValue[]} the radar series
+ */
+export declare function useRadarSeries(seriesIds?: SeriesId[]): UseRadarSeriesReturnValue[];
+/**
+ * Get access to the internal state of radar series.
+ * The returned object contains:
+ * - series: a mapping from ids to series attributes.
+ * - seriesOrder: the array of series ids.
+ * @returns the radar series
+ */
+export declare function useRadarSeriesContext(): UseRadarSeriesContextReturnValue;

package/esm/hooks/useRadarSeries.js

@@ -0,0 +1,42 @@
+'use client';
+
+import { createSeriesSelectorsOfType, createAllSeriesSelectorOfType } from "../internals/createSeriesSelectorOfType.js";
+const useSelectorSeries = createSeriesSelectorsOfType('radar');
+const useSelectorSeriesContext = createAllSeriesSelectorOfType('radar');
+
+/**
+ * Get access to the internal state of radar series.
+ *
+ * @param {SeriesId} seriesId The id of the series to get.
+ * @returns {UseRadarSeriesReturnValue} the radar series
+ */
+
+/**
+ * Get access to the internal state of radar series.
+ *
+ * When called without arguments, it returns all radar series.
+ *
+ * @returns {UseRadarSeriesReturnValue[]} the radar series
+ */
+
+/**
+ * Get access to the internal state of radar series.
+ *
+ * @param {SeriesId[]} seriesIds The ids of the series to get. Order is preserved.
+ * @returns {UseRadarSeriesReturnValue[]} the radar series
+ */
+
+export function useRadarSeries(seriesIds) {
+  return useSelectorSeries(seriesIds);
+}
+
+/**
+ * Get access to the internal state of radar series.
+ * The returned object contains:
+ * - series: a mapping from ids to series attributes.
+ * - seriesOrder: the array of series ids.
+ * @returns the radar series
+ */
+export function useRadarSeriesContext() {
+  return useSelectorSeriesContext();
+}

package/esm/hooks/useScale.d.ts

@@ -19,4 +19,6 @@ export declare function useXScale<S extends ScaleName>(axisId?: AxisId): AxisSca
  * @param {AxisId | undefined} axisId - If provided returns the scale for the y axis with axisId, else returns the values for the default y axis.
  * @returns {AxisScaleConfig[S]['scale']} The scale for the specified Y axis.
  */
-export declare function useYScale<S extends ScaleName>(axisId?: AxisId): AxisScaleConfig[S]['scale'];
+export declare function useYScale<S extends ScaleName>(axisId?: AxisId): AxisScaleConfig[S]['scale'];
+export declare function useRotationScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'];
+export declare function useRadiusScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'];

package/esm/hooks/useScale.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { isBandScale } from "../internals/isBandScale.js";
-import { useXAxis, useYAxis } from "./useAxis.js";
+import { useRadiusAxis, useRotationAxis, useXAxis, useYAxis } from "./useAxis.js";
 
 /**
  * For a given scale return a function that map value to their position.
@@ -36,4 +36,12 @@ export function useXScale(axisId) {
 export function useYScale(axisId) {
   const axis = useYAxis(axisId);
   return axis.scale;
+}
+export function useRotationScale(identifier) {
+  const axis = useRotationAxis(identifier);
+  return axis.scale;
+}
+export function useRadiusScale(identifier) {
+  const axis = useRadiusAxis(identifier);
+  return axis.scale;
 }

package/esm/hooks/useSvgRef.js

@@ -9,7 +9,7 @@ import { useChartContext } from "../context/ChartProvider/index.js";
 export function useSvgRef() {
   const context = useChartContext();
   if (!context) {
-    throw new Error(['MUI X: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+    throw new Error(['MUI X: 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;
 }