@mui/x-charts 9.1.0 → 9.3.0

package/ChartsContainer/ChartsContainer.mjs

@@ -129,11 +129,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   hiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar', 'line', 'pie', 'radar', 'scatter'])
+    type: PropTypes.oneOf(['bar', 'line', 'pie', 'radar', 'scatter']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar', 'line', 'pie', 'radar', 'scatter']).isRequired
+    type: PropTypes.oneOf(['bar', 'line', 'pie', 'radar', 'scatter'])
   })]).isRequired),
   /**
    * The controlled axis highlight.
@@ -190,11 +190,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   initialHiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar', 'line', 'pie', 'radar', 'scatter'])
+    type: PropTypes.oneOf(['bar', 'line', 'pie', 'radar', 'scatter']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar', 'line', 'pie', 'radar', 'scatter']).isRequired
+    type: PropTypes.oneOf(['bar', 'line', 'pie', 'radar', 'scatter'])
   })]).isRequired),
   /**
    * Localized text for chart components.
@@ -338,11 +338,6 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
    */
   zAxis: PropTypes.arrayOf(PropTypes.shape({
     colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -351,6 +346,11 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,

package/ChartsLabel/ChartsLabelMark.js

@@ -37,8 +37,6 @@ const Root = (0, _styles.styled)('div', {
       alignItems: 'center'
     },
     [`&.${_labelMarkClasses.labelMarkClasses.lineAndMark}`]: {
-      width: 16,
-      height: 16,
       alignItems: 'center'
     },
     [`&.${_labelMarkClasses.labelMarkClasses.square}`]: {

package/ChartsLabel/ChartsLabelMark.mjs

@@ -30,8 +30,6 @@ const Root = styled('div', {
       alignItems: 'center'
     },
     [`&.${labelMarkClasses.lineAndMark}`]: {
-      width: 16,
-      height: 16,
       alignItems: 'center'
     },
     [`&.${labelMarkClasses.square}`]: {

package/ChartsLabel/labelMarkClasses.d.mts

@@ -13,6 +13,5 @@ export interface ChartsLabelMarkClasses {
   /** Styles applied to the element with fill={color} attribute. */
   fill: string;
 }
-export declare function getLabelMarkUtilityClass(slot: string): string;
 export declare const labelMarkClasses: ChartsLabelMarkClasses;
 export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"root" | "fill", string>;

package/ChartsLabel/labelMarkClasses.d.ts

@@ -13,6 +13,5 @@ export interface ChartsLabelMarkClasses {
   /** Styles applied to the element with fill={color} attribute. */
   fill: string;
 }
-export declare function getLabelMarkUtilityClass(slot: string): string;
 export declare const labelMarkClasses: ChartsLabelMarkClasses;
 export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"root" | "fill", string>;

package/ChartsLabel/labelMarkClasses.js

@@ -4,7 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLabelMarkUtilityClass = getLabelMarkUtilityClass;
 exports.useUtilityClasses = exports.labelMarkClasses = void 0;
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
@@ -18,7 +17,7 @@ const useUtilityClasses = props => {
     type
   } = props;
   const slots = {
-    root: typeof type === 'function' ? ['root'] : ['root', type],
+    root: typeof type === 'function' ? ['root'] : ['root', type === 'line+mark' ? 'lineAndMark' : type],
     fill: ['fill']
   };
   return (0, _composeClasses.default)(slots, getLabelMarkUtilityClass, props.classes);

package/ChartsLabel/labelMarkClasses.mjs

@@ -1,7 +1,7 @@
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getLabelMarkUtilityClass(slot) {
+function getLabelMarkUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLabelMark', slot);
 }
 export const labelMarkClasses = generateUtilityClasses('MuiChartsLabelMark', ['root', 'line', 'lineAndMark', 'square', 'circle', 'fill']);
@@ -10,7 +10,7 @@ export const useUtilityClasses = props => {
     type
   } = props;
   const slots = {
-    root: typeof type === 'function' ? ['root'] : ['root', type],
+    root: typeof type === 'function' ? ['root'] : ['root', type === 'line+mark' ? 'lineAndMark' : type],
     fill: ['fill']
   };
   return composeClasses(slots, getLabelMarkUtilityClass, props.classes);

package/ChartsLayerContainer/ChartsLayerContainer.js

@@ -81,37 +81,43 @@ const ChartsLayerContainer = exports.ChartsLayerContainer = /*#__PURE__*/React.f
       }
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsLayerContainerDiv, (0, _extends2.default)({
-    ref: handleRef,
-    ownerState: {
-      width: propsWidth,
-      height: propsHeight
-    },
-    role: "presentation",
-    "aria-label": title,
-    "aria-describedby": desc ? descId : undefined,
-    className: (0, _clsx.default)(classes.root, className)
-  }, other, {
-    onPointerEnter: event => {
-      other.onPointerEnter?.(event);
-      instance.handlePointerEnter?.(event);
-    },
-    onPointerLeave: event => {
-      other.onPointerLeave?.(event);
-      instance.handlePointerLeave?.(event);
-    },
-    onClick: event => {
-      other.onClick?.(event);
-      instance.handleClick?.(event);
-    },
-    children: [isKeyboardNavigationEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAccessibilityProxy.ChartsAccessibilityProxy, {}), desc && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      id: descId,
-      style: {
-        display: 'none'
+  return (
+    /*#__PURE__*/
+    // `role="none"` is an alias for `role="presentation"`, but aria-query treats them differently.
+    // See https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/1090
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+    (0, _jsxRuntime.jsxs)(ChartsLayerContainerDiv, (0, _extends2.default)({
+      ref: handleRef,
+      ownerState: {
+        width: propsWidth,
+        height: propsHeight
       },
-      children: desc
-    }), children]
-  }));
+      role: "none",
+      "aria-label": title,
+      "aria-describedby": desc ? descId : undefined,
+      className: (0, _clsx.default)(classes.root, className)
+    }, other, {
+      onPointerEnter: event => {
+        other.onPointerEnter?.(event);
+        instance.handlePointerEnter?.(event);
+      },
+      onPointerLeave: event => {
+        other.onPointerLeave?.(event);
+        instance.handlePointerLeave?.(event);
+      },
+      onClick: event => {
+        other.onClick?.(event);
+        instance.handleClick?.(event);
+      },
+      children: [isKeyboardNavigationEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAccessibilityProxy.ChartsAccessibilityProxy, {}), desc && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        id: descId,
+        style: {
+          display: 'none'
+        },
+        children: desc
+      }), children]
+    }))
+  );
 });
 if (process.env.NODE_ENV !== "production") ChartsLayerContainer.displayName = "ChartsLayerContainer";
 process.env.NODE_ENV !== "production" ? ChartsLayerContainer.propTypes = {

package/ChartsLayerContainer/ChartsLayerContainer.mjs

@@ -75,37 +75,43 @@ const ChartsLayerContainer = /*#__PURE__*/React.forwardRef(function ChartsLayerC
       }
     });
   }
-  return /*#__PURE__*/_jsxs(ChartsLayerContainerDiv, _extends({
-    ref: handleRef,
-    ownerState: {
-      width: propsWidth,
-      height: propsHeight
-    },
-    role: "presentation",
-    "aria-label": title,
-    "aria-describedby": desc ? descId : undefined,
-    className: clsx(classes.root, className)
-  }, other, {
-    onPointerEnter: event => {
-      other.onPointerEnter?.(event);
-      instance.handlePointerEnter?.(event);
-    },
-    onPointerLeave: event => {
-      other.onPointerLeave?.(event);
-      instance.handlePointerLeave?.(event);
-    },
-    onClick: event => {
-      other.onClick?.(event);
-      instance.handleClick?.(event);
-    },
-    children: [isKeyboardNavigationEnabled && /*#__PURE__*/_jsx(ChartsAccessibilityProxy, {}), desc && /*#__PURE__*/_jsx("span", {
-      id: descId,
-      style: {
-        display: 'none'
+  return (
+    /*#__PURE__*/
+    // `role="none"` is an alias for `role="presentation"`, but aria-query treats them differently.
+    // See https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/1090
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+    _jsxs(ChartsLayerContainerDiv, _extends({
+      ref: handleRef,
+      ownerState: {
+        width: propsWidth,
+        height: propsHeight
       },
-      children: desc
-    }), children]
-  }));
+      role: "none",
+      "aria-label": title,
+      "aria-describedby": desc ? descId : undefined,
+      className: clsx(classes.root, className)
+    }, other, {
+      onPointerEnter: event => {
+        other.onPointerEnter?.(event);
+        instance.handlePointerEnter?.(event);
+      },
+      onPointerLeave: event => {
+        other.onPointerLeave?.(event);
+        instance.handlePointerLeave?.(event);
+      },
+      onClick: event => {
+        other.onClick?.(event);
+        instance.handleClick?.(event);
+      },
+      children: [isKeyboardNavigationEnabled && /*#__PURE__*/_jsx(ChartsAccessibilityProxy, {}), desc && /*#__PURE__*/_jsx("span", {
+        id: descId,
+        style: {
+          display: 'none'
+        },
+        children: desc
+      }), children]
+    }))
+  );
 });
 if (process.env.NODE_ENV !== "production") ChartsLayerContainer.displayName = "ChartsLayerContainer";
 process.env.NODE_ENV !== "production" ? ChartsLayerContainer.propTypes = {

package/ChartsRadialAxisHighlight/ChartsRadialAxisHighlight.types.d.mts

@@ -1,5 +1,5 @@
 export type ChartsRadialAxisHighlightRotationType = 'none' | 'line' | 'band';
-export type ChartsRadialAxisHighlightRadiusType = 'none' | 'line';
+export type ChartsRadialAxisHighlightRadiusType = 'none' | 'line' | 'band';
 export type ChartsRadialAxisHighlightProps = {
   rotation?: ChartsRadialAxisHighlightRotationType;
   radius?: ChartsRadialAxisHighlightRadiusType;

package/ChartsRadialAxisHighlight/ChartsRadialAxisHighlight.types.d.ts

@@ -1,5 +1,5 @@
 export type ChartsRadialAxisHighlightRotationType = 'none' | 'line' | 'band';
-export type ChartsRadialAxisHighlightRadiusType = 'none' | 'line';
+export type ChartsRadialAxisHighlightRadiusType = 'none' | 'line' | 'band';
 export type ChartsRadialAxisHighlightProps = {
   rotation?: ChartsRadialAxisHighlightRotationType;
   radius?: ChartsRadialAxisHighlightRadiusType;

package/ChartsRadialAxisHighlight/ChartsRadiusAxisHighlight.js

@@ -9,8 +9,9 @@ exports.default = ChartsRadiusAxisHighlight;
 var React = _interopRequireWildcard(require("react"));
 var _useStore = require("../internals/store/useStore");
 var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
-var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _ChartsRadialAxisHighlightPath = require("./ChartsRadialAxisHighlightPath");
+var _getRingPath = require("../internals/getRingPath");
+var _scaleGuards = require("../internals/scaleGuards");
 var _jsxRuntime = require("react/jsx-runtime");
 function polarToSvg(cx, cy, radius, angle) {
   return [cx + radius * Math.sin(angle), cy - radius * Math.cos(angle)];
@@ -37,29 +38,25 @@ function ChartsRadiusAxisHighlight(props) {
     axis: rotationAxes,
     axisIds: rotationAxisIds
   } = store.use(_useChartPolarAxis.selectorChartRotationAxis);
-  const pointerX = store.use(_useChartInteraction.selectorChartsInteractionPointerX);
-  const pointerY = store.use(_useChartInteraction.selectorChartsInteractionPointerY);
-  if (pointerX === null || pointerY === null) {
-    return null;
-  }
+  const pointerRadius = store.use(_useChartPolarAxis.selectorChartsInteractionRadius);
+  const radiusValue = store.use(_useChartPolarAxis.selectorChartsInteractionRadiusAxisValue);
   const radiusAxisId = radiusAxisIds[0];
-  if (radiusAxisId === undefined) {
+  if (type === 'none' || radiusAxisId === undefined || pointerRadius === null) {
     return null;
   }
   const radiusAxis = radiusAxes[radiusAxisId];
   const radiusScale = radiusAxis.scale;
   const innerRadius = radiusScale.range()[0];
   const outerRadius = radiusScale.range()[1];
-  const pointerRadius = Math.sqrt((pointerX - cx) ** 2 + (pointerY - cy) ** 2);
   if (pointerRadius < innerRadius || pointerRadius > outerRadius) {
     return null;
   }
+  const rotationAxisId = rotationAxisIds[0];
+  const rotationAxis = rotationAxisId !== undefined ? rotationAxes[rotationAxisId] : undefined;
+  const startAngle = rotationAxis?.scale.range()[0] ?? 0;
+  const endAngle = rotationAxis?.scale.range()[1] ?? 2 * Math.PI;
+  const isFullCircle = rotationAxis?.isFullCircle ?? Math.abs(endAngle - startAngle) >= 2 * Math.PI;
   if (type === 'line') {
-    const rotationAxisId = rotationAxisIds[0];
-    const rotationAxis = rotationAxisId !== undefined ? rotationAxes[rotationAxisId] : undefined;
-    const startAngle = rotationAxis?.scale.range()[0] ?? 0;
-    const endAngle = rotationAxis?.scale.range()[1] ?? 2 * Math.PI;
-    const isFullCircle = rotationAxis?.isFullCircle ?? Math.abs(endAngle - startAngle) >= 2 * Math.PI;
     if (isFullCircle) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialAxisHighlightPath.ChartsRadialAxisHighlightCircle, {
         cx: cx,
@@ -83,5 +80,25 @@ function ChartsRadiusAxisHighlight(props) {
       }
     });
   }
-  return null;
+  if (!(0, _scaleGuards.isOrdinalScale)(radiusAxis.scale)) {
+    return null;
+  }
+  const radius = radiusAxis.scale(radiusValue);
+  const step = radiusAxis.scale.step();
+  const bandwidth = radiusAxis.scale.bandwidth();
+  const bandInnerRadius = radius - (step - bandwidth) / 2;
+  const bandOuterRadius = bandInnerRadius + step;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialAxisHighlightPath.ChartsRadialAxisHighlightPath, {
+    d: (0, _getRingPath.getRingPath)({
+      x: cx,
+      y: cy
+    }, bandInnerRadius, bandOuterRadius, isFullCircle ? undefined : {
+      start: startAngle,
+      end: endAngle
+    }),
+    className: classes.root,
+    ownerState: {
+      axisHighlight: 'band'
+    }
+  });
 }

package/ChartsRadialAxisHighlight/ChartsRadiusAxisHighlight.mjs

@@ -2,9 +2,10 @@
 
 import * as React from 'react';
 import { useStore } from "../internals/store/useStore.mjs";
-import { selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
-import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../internals/plugins/featurePlugins/useChartInteraction/index.mjs";
+import { selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis, selectorChartsInteractionRadius, selectorChartsInteractionRadiusAxisValue } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
 import { ChartsRadialAxisHighlightCircle, ChartsRadialAxisHighlightPath } from "./ChartsRadialAxisHighlightPath.mjs";
+import { getRingPath } from "../internals/getRingPath.mjs";
+import { isOrdinalScale } from "../internals/scaleGuards.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 function polarToSvg(cx, cy, radius, angle) {
   return [cx + radius * Math.sin(angle), cy - radius * Math.cos(angle)];
@@ -31,29 +32,25 @@ export default function ChartsRadiusAxisHighlight(props) {
     axis: rotationAxes,
     axisIds: rotationAxisIds
   } = store.use(selectorChartRotationAxis);
-  const pointerX = store.use(selectorChartsInteractionPointerX);
-  const pointerY = store.use(selectorChartsInteractionPointerY);
-  if (pointerX === null || pointerY === null) {
-    return null;
-  }
+  const pointerRadius = store.use(selectorChartsInteractionRadius);
+  const radiusValue = store.use(selectorChartsInteractionRadiusAxisValue);
   const radiusAxisId = radiusAxisIds[0];
-  if (radiusAxisId === undefined) {
+  if (type === 'none' || radiusAxisId === undefined || pointerRadius === null) {
     return null;
   }
   const radiusAxis = radiusAxes[radiusAxisId];
   const radiusScale = radiusAxis.scale;
   const innerRadius = radiusScale.range()[0];
   const outerRadius = radiusScale.range()[1];
-  const pointerRadius = Math.sqrt((pointerX - cx) ** 2 + (pointerY - cy) ** 2);
   if (pointerRadius < innerRadius || pointerRadius > outerRadius) {
     return null;
   }
+  const rotationAxisId = rotationAxisIds[0];
+  const rotationAxis = rotationAxisId !== undefined ? rotationAxes[rotationAxisId] : undefined;
+  const startAngle = rotationAxis?.scale.range()[0] ?? 0;
+  const endAngle = rotationAxis?.scale.range()[1] ?? 2 * Math.PI;
+  const isFullCircle = rotationAxis?.isFullCircle ?? Math.abs(endAngle - startAngle) >= 2 * Math.PI;
   if (type === 'line') {
-    const rotationAxisId = rotationAxisIds[0];
-    const rotationAxis = rotationAxisId !== undefined ? rotationAxes[rotationAxisId] : undefined;
-    const startAngle = rotationAxis?.scale.range()[0] ?? 0;
-    const endAngle = rotationAxis?.scale.range()[1] ?? 2 * Math.PI;
-    const isFullCircle = rotationAxis?.isFullCircle ?? Math.abs(endAngle - startAngle) >= 2 * Math.PI;
     if (isFullCircle) {
       return /*#__PURE__*/_jsx(ChartsRadialAxisHighlightCircle, {
         cx: cx,
@@ -77,5 +74,25 @@ export default function ChartsRadiusAxisHighlight(props) {
       }
     });
   }
-  return null;
+  if (!isOrdinalScale(radiusAxis.scale)) {
+    return null;
+  }
+  const radius = radiusAxis.scale(radiusValue);
+  const step = radiusAxis.scale.step();
+  const bandwidth = radiusAxis.scale.bandwidth();
+  const bandInnerRadius = radius - (step - bandwidth) / 2;
+  const bandOuterRadius = bandInnerRadius + step;
+  return /*#__PURE__*/_jsx(ChartsRadialAxisHighlightPath, {
+    d: getRingPath({
+      x: cx,
+      y: cy
+    }, bandInnerRadius, bandOuterRadius, isFullCircle ? undefined : {
+      start: startAngle,
+      end: endAngle
+    }),
+    className: classes.root,
+    ownerState: {
+      axisHighlight: 'band'
+    }
+  });
 }

package/ChartsRadiusAxis/ChartsRadiusAxis.d.mts

@@ -1,48 +1,2 @@
-import type { AxisId } from "../models/axis.mjs";
-import { type ChartsRadialAxisClasses } from "./chartsRadiusAxisClasses.mjs";
-export interface ChartsRadiusAxisProps {
-  /**
-   * Id of the radius axis to render.
-   * If not provided, it will use the first defined radius axis.
-   */
-  axisId?: AxisId;
-  /**
-   * The position of the axis in polar coordinates.
-   * It can be 'start', 'end', or a specific angle in degrees.
-   * @default 'start'
-   */
-  position?: 'start' | 'end' | number;
-  /**
-   * If `true`, the axis line is not rendered.
-   * @default false
-   */
-  disableLine?: boolean;
-  /**
-   * If `true`, the ticks are not rendered.
-   * @default false
-   */
-  disableTicks?: boolean;
-  /**
-   * The size (in pixels) of the tick marks.
-   * @default 6
-   */
-  tickSize?: number;
-  /**
-   * Set the position of the tick labels relative to the axis line.
-   * The before/after is defined based on clockwise direction.
-   * @default 'after'
-   */
-  tickLabelPosition?: 'center' | 'after' | 'before';
-  /**
-   * Set the position of the tick relative to the axis line.
-   * The before/after is defined based on clockwise direction.
-   * @default 'after'
-   */
-  tickPosition?: 'after' | 'before';
-  /**
-   * A CSS class name applied to the root element.
-   */
-  className?: string;
-  classes?: Partial<ChartsRadialAxisClasses>;
-}
+import type { ChartsRadiusAxisProps } from "../models/axis.mjs";
 export declare function ChartsRadiusAxis(props: ChartsRadiusAxisProps): import("react/jsx-runtime").JSX.Element | null;

package/ChartsRadiusAxis/ChartsRadiusAxis.d.ts

@@ -1,48 +1,2 @@
-import type { AxisId } from "../models/axis.js";
-import { type ChartsRadialAxisClasses } from "./chartsRadiusAxisClasses.js";
-export interface ChartsRadiusAxisProps {
-  /**
-   * Id of the radius axis to render.
-   * If not provided, it will use the first defined radius axis.
-   */
-  axisId?: AxisId;
-  /**
-   * The position of the axis in polar coordinates.
-   * It can be 'start', 'end', or a specific angle in degrees.
-   * @default 'start'
-   */
-  position?: 'start' | 'end' | number;
-  /**
-   * If `true`, the axis line is not rendered.
-   * @default false
-   */
-  disableLine?: boolean;
-  /**
-   * If `true`, the ticks are not rendered.
-   * @default false
-   */
-  disableTicks?: boolean;
-  /**
-   * The size (in pixels) of the tick marks.
-   * @default 6
-   */
-  tickSize?: number;
-  /**
-   * Set the position of the tick labels relative to the axis line.
-   * The before/after is defined based on clockwise direction.
-   * @default 'after'
-   */
-  tickLabelPosition?: 'center' | 'after' | 'before';
-  /**
-   * Set the position of the tick relative to the axis line.
-   * The before/after is defined based on clockwise direction.
-   * @default 'after'
-   */
-  tickPosition?: 'after' | 'before';
-  /**
-   * A CSS class name applied to the root element.
-   */
-  className?: string;
-  classes?: Partial<ChartsRadialAxisClasses>;
-}
+import type { ChartsRadiusAxisProps } from "../models/axis.js";
 export declare function ChartsRadiusAxis(props: ChartsRadiusAxisProps): import("react/jsx-runtime").JSX.Element | null;

package/ChartsRadiusAxis/ChartsRadiusAxis.js

@@ -17,8 +17,7 @@ var _chartsRadiusAxisClasses = require("./chartsRadiusAxisClasses");
 var _createGetLabelTextAnchors = require("./createGetLabelTextAnchors");
 var _getLabelTransform = require("./getLabelTransform");
 var _jsxRuntime = require("react/jsx-runtime");
-/* Gap between a tick and its label. */
-const TICK_LABEL_GAP = 3;
+/* Gap between a tick and its label. */const TICK_LABEL_GAP = 3;
 const getLabelTextAnchors = (0, _createGetLabelTextAnchors.createGetLabelTextAnchors)(_getLabelTransform.getLabelTransform);
 
 /**
@@ -40,17 +39,22 @@ function getAxisAngleInRadians(position, rotationAxis) {
   return 0;
 }
 function ChartsRadiusAxis(props) {
+  const radiusAxis = (0, _useAxis.useRadiusAxis)(props.axisId);
+  const settings = (0, _extends2.default)({}, radiusAxis, props);
   const {
-    axisId,
     position = 'start',
     disableLine,
     disableTicks,
-    tickLabelPosition = 'after',
-    tickPosition = 'after',
+    tickLabelPosition: tickLabelPositionProp = 'auto',
+    tickPosition = position === 'start' ? 'before' : 'after',
     tickSize = 6,
     className,
     classes: classesProp
-  } = props;
+  } = settings;
+  let tickLabelPosition = tickLabelPositionProp;
+  if (tickLabelPosition === 'auto') {
+    tickLabelPosition = position === 'start' ? 'before' : 'after';
+  }
   const isCentered = tickLabelPosition === 'center';
   const classes = (0, _chartsRadiusAxisClasses.useUtilityClasses)({
     classes: classesProp,
@@ -64,7 +68,6 @@ function ChartsRadiusAxis(props) {
     cx,
     cy
   } = store.use(_useChartPolarAxis.selectorChartPolarCenter);
-  const radiusAxis = (0, _useAxis.useRadiusAxis)(axisId);
   const rotationAxis = (0, _useAxis.useRotationAxis)();
   const ticks = (0, _useTicks.useTicks)({
     scale: radiusAxis.scale,
@@ -74,7 +77,7 @@ function ChartsRadiusAxis(props) {
     valueFormatter: radiusAxis?.valueFormatter,
     direction: 'radius'
   });
-  if (!radiusAxis) {
+  if (!radiusAxis || settings.position === 'none') {
     return null;
   }
   const angle = getAxisAngleInRadians(position, rotationAxis);
@@ -102,17 +105,18 @@ function ChartsRadiusAxis(props) {
       className: classes.line
     }), ticks.map(({
       offset: radius,
+      labelOffset,
       formattedValue
     }, index) => {
       if (!formattedValue) {
         return null;
       }
-      const tx = cx + dx * radius;
-      const ty = cy + dy * radius;
+      const tickX = cx + dx * radius;
+      const tickY = cy + dy * radius;
 
       // Compute the label position.
-      let labelX = tx;
-      let labelY = ty;
+      let labelX = cx + dx * (radius + labelOffset);
+      let labelY = cy + dy * (radius + labelOffset);
       if (tickLabelGap !== 0) {
         labelX += tickLabelGapDx;
         labelY += tickLabelGapDy;
@@ -125,10 +129,10 @@ function ChartsRadiusAxis(props) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-          x1: tx,
-          y1: ty,
-          x2: tx + tickDx,
-          y2: ty + tickDy,
+          x1: tickX,
+          y1: tickY,
+          x2: tickX + tickDx,
+          y2: tickY + tickDy,
           stroke: stroke,
           className: classes.tick
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("text", (0, _extends2.default)({