@mui/x-charts 9.0.2 → 9.0.3

package/ChartsRadiusAxis/ChartsRadiusAxis.mjs

@@ -0,0 +1,141 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import clsx from 'clsx';
+import { useTheme } from '@mui/material/styles';
+import { useTicks } from "../hooks/useTicks.mjs";
+import { useRadiusAxis, useRotationAxis } from "../hooks/useAxis.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
+import { selectorChartPolarCenter } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
+import { useUtilityClasses } from "./chartsRadiusAxisClasses.mjs";
+import { createGetLabelTextAnchors } from "./createGetLabelTextAnchors.mjs";
+import { getLabelTransform } from "./getLabelTransform.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Gap between a tick and its label. */
+const TICK_LABEL_GAP = 3;
+const getLabelTextAnchors = createGetLabelTextAnchors(getLabelTransform);
+
+/**
+ * Get the angle to use to display the radius axis.
+ * @param position The position props
+ * @param rotationAxis The default rotation axis
+ * @returns the angle in radians to use.
+ */
+function getAxisAngleInRadians(position, rotationAxis) {
+  if (position === 'start') {
+    return rotationAxis?.scale.range()[0] ?? 0;
+  }
+  if (position === 'end') {
+    return rotationAxis?.scale.range()[1] ?? 0;
+  }
+  if (typeof position === 'number') {
+    return position * Math.PI / 180;
+  }
+  return 0;
+}
+export function ChartsRadiusAxis(props) {
+  const {
+    axisId,
+    position = 'start',
+    disableLine,
+    disableTicks,
+    tickLabelPosition = 'after',
+    tickPosition = 'after',
+    tickSize = 6,
+    className,
+    classes: classesProp
+  } = props;
+  const isCentered = tickLabelPosition === 'center';
+  const classes = useUtilityClasses({
+    classes: classesProp,
+    isCentered
+  });
+  const theme = useTheme();
+  const {
+    store
+  } = useChartsContext();
+  const {
+    cx,
+    cy
+  } = store.use(selectorChartPolarCenter);
+  const radiusAxis = useRadiusAxis(axisId);
+  const rotationAxis = useRotationAxis();
+  const ticks = useTicks({
+    scale: radiusAxis.scale,
+    tickNumber: radiusAxis?.tickNumber ?? 5,
+    tickInterval: radiusAxis?.tickInterval,
+    tickSpacing: radiusAxis?.tickSpacing,
+    valueFormatter: radiusAxis?.valueFormatter,
+    direction: 'radius'
+  });
+  if (!radiusAxis) {
+    return null;
+  }
+  const angle = getAxisAngleInRadians(position, rotationAxis);
+  // Convert "0 = up" convention to SVG math angle (0 = right, clockwise y-down).
+  const dx = Math.sin(angle);
+  const dy = -Math.cos(angle);
+  // Perpendicular offset for tick marks (rotated 90° clockwise).
+  const px = -dy;
+  const py = dx;
+  const [innerRadius, outerRadius] = radiusAxis.scale.range();
+  const stroke = (theme.vars ?? theme).palette.text.primary;
+  const tickDx = (tickPosition === 'after' ? 1 : -1) * px * tickSize;
+  const tickDy = (tickPosition === 'after' ? 1 : -1) * py * tickSize;
+  const tickLabelGap = isCentered ? 0 : TICK_LABEL_GAP;
+  const tickLabelGapDx = (tickLabelPosition === 'after' ? 1 : -1) * px * tickLabelGap;
+  const tickLabelGapDy = (tickLabelPosition === 'after' ? 1 : -1) * py * tickLabelGap;
+  return /*#__PURE__*/_jsxs("g", {
+    className: clsx(classes.root, className),
+    children: [!disableLine && /*#__PURE__*/_jsx("line", {
+      x1: cx + dx * innerRadius,
+      y1: cy + dy * innerRadius,
+      x2: cx + dx * outerRadius,
+      y2: cy + dy * outerRadius,
+      stroke: stroke,
+      className: classes.line
+    }), ticks.map(({
+      offset: radius,
+      formattedValue
+    }, index) => {
+      if (!formattedValue) {
+        return null;
+      }
+      const tx = cx + dx * radius;
+      const ty = cy + dy * radius;
+
+      // Compute the label position.
+      let labelX = tx;
+      let labelY = ty;
+      if (tickLabelGap !== 0) {
+        labelX += tickLabelGapDx;
+        labelY += tickLabelGapDy;
+      }
+      if (!isCentered && tickLabelPosition === tickPosition && !disableTicks) {
+        // Add the size of the tick if they are in the same direction.
+        labelX += tickDx;
+        labelY += tickDy;
+      }
+      return /*#__PURE__*/_jsxs("g", {
+        className: classes.tickContainer,
+        children: [!disableTicks && /*#__PURE__*/_jsx("line", {
+          x1: tx,
+          y1: ty,
+          x2: tx + tickDx,
+          y2: ty + tickDy,
+          stroke: stroke,
+          className: classes.tick
+        }), /*#__PURE__*/_jsx("text", _extends({
+          x: labelX,
+          y: labelY,
+          fill: stroke,
+          fontSize: 12,
+          className: classes.tickLabel,
+          pointerEvents: "none"
+        }, getLabelTextAnchors(dx, dy, tickLabelPosition), {
+          children: formattedValue
+        }))]
+      }, index);
+    })]
+  });
+}

package/ChartsRadiusAxis/chartsRadiusAxisClasses.d.mts

@@ -0,0 +1,6 @@
+import { type ChartsRadialAxisClasses } from "./sharedRadialAxisClasses.mjs";
+export declare const useUtilityClasses: (props: {
+  classes?: Partial<ChartsRadialAxisClasses>;
+  isCentered?: boolean;
+}) => Record<"root" | "line" | "tickContainer" | "tick" | "tickLabel", string>;
+export { type ChartsRadialAxisClasses, type ChartsRadialAxisClassKey, chartsRadialAxisClasses } from "./sharedRadialAxisClasses.mjs";

package/ChartsRadiusAxis/chartsRadiusAxisClasses.d.ts

@@ -0,0 +1,6 @@
+import { type ChartsRadialAxisClasses } from "./sharedRadialAxisClasses.js";
+export declare const useUtilityClasses: (props: {
+  classes?: Partial<ChartsRadialAxisClasses>;
+  isCentered?: boolean;
+}) => Record<"root" | "line" | "tickContainer" | "tick" | "tickLabel", string>;
+export { type ChartsRadialAxisClasses, type ChartsRadialAxisClassKey, chartsRadialAxisClasses } from "./sharedRadialAxisClasses.js";

package/ChartsRadiusAxis/chartsRadiusAxisClasses.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "chartsRadialAxisClasses", {
+  enumerable: true,
+  get: function () {
+    return _sharedRadialAxisClasses.chartsRadialAxisClasses;
+  }
+});
+exports.useUtilityClasses = void 0;
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _sharedRadialAxisClasses = require("./sharedRadialAxisClasses");
+const useUtilityClasses = props => {
+  const {
+    classes,
+    isCentered
+  } = props;
+  const slots = {
+    root: ['root', 'radius'],
+    line: ['line'],
+    tickContainer: ['tickContainer'],
+    tick: ['tick'],
+    tickLabel: ['tickLabel', isCentered && 'centered']
+  };
+  return (0, _composeClasses.default)(slots, _sharedRadialAxisClasses.getRadialAxisUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/ChartsRadiusAxis/chartsRadiusAxisClasses.mjs

@@ -0,0 +1,17 @@
+import composeClasses from '@mui/utils/composeClasses';
+import { getRadialAxisUtilityClass } from "./sharedRadialAxisClasses.mjs";
+export const useUtilityClasses = props => {
+  const {
+    classes,
+    isCentered
+  } = props;
+  const slots = {
+    root: ['root', 'radius'],
+    line: ['line'],
+    tickContainer: ['tickContainer'],
+    tick: ['tick'],
+    tickLabel: ['tickLabel', isCentered && 'centered']
+  };
+  return composeClasses(slots, getRadialAxisUtilityClass, classes);
+};
+export { chartsRadialAxisClasses } from "./sharedRadialAxisClasses.mjs";

package/ChartsRadiusAxis/createGetLabelTextAnchors.d.mts

@@ -0,0 +1,10 @@
+/**
+ * Higher order function that transform a `getLabelTransform` to the <text /> anchor props.
+ */
+export declare const createGetLabelTextAnchors: (getLabelTransform: (px: number, py: number, tickLabelPosition: "center" | "after" | "before") => {
+  verticalAlign: "start" | "middle" | "end";
+  horizontalAlign: "start" | "middle" | "end";
+}) => (px: number, py: number, tickLabelPosition: "center" | "after" | "before") => {
+  textAnchor: "start" | "middle" | "end";
+  dominantBaseline: "hanging" | "middle" | "auto";
+};

package/ChartsRadiusAxis/createGetLabelTextAnchors.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Higher order function that transform a `getLabelTransform` to the <text /> anchor props.
+ */
+export declare const createGetLabelTextAnchors: (getLabelTransform: (px: number, py: number, tickLabelPosition: "center" | "after" | "before") => {
+  verticalAlign: "start" | "middle" | "end";
+  horizontalAlign: "start" | "middle" | "end";
+}) => (px: number, py: number, tickLabelPosition: "center" | "after" | "before") => {
+  textAnchor: "start" | "middle" | "end";
+  dominantBaseline: "hanging" | "middle" | "auto";
+};

package/ChartsRadiusAxis/createGetLabelTextAnchors.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGetLabelTextAnchors = void 0;
+/**
+ * Higher order function that transform a `getLabelTransform` to the <text /> anchor props.
+ */
+const createGetLabelTextAnchors = getLabelTransform => (px, py, tickLabelPosition) => {
+  const {
+    verticalAlign,
+    horizontalAlign
+  } = getLabelTransform(px, py, tickLabelPosition);
+  let textAnchor;
+  let dominantBaseline;
+  switch (verticalAlign) {
+    case 'start':
+      dominantBaseline = 'hanging';
+      break;
+    case 'middle':
+      dominantBaseline = 'middle';
+      break;
+    case 'end':
+    default:
+      dominantBaseline = 'auto';
+      break;
+  }
+  switch (horizontalAlign) {
+    case 'start':
+      textAnchor = 'start';
+      break;
+    case 'middle':
+      textAnchor = 'middle';
+      break;
+    case 'end':
+    default:
+      textAnchor = 'end';
+      break;
+  }
+  return {
+    textAnchor,
+    dominantBaseline
+  };
+};
+exports.createGetLabelTextAnchors = createGetLabelTextAnchors;

package/ChartsRadiusAxis/createGetLabelTextAnchors.mjs

@@ -0,0 +1,39 @@
+/**
+ * Higher order function that transform a `getLabelTransform` to the <text /> anchor props.
+ */
+export const createGetLabelTextAnchors = getLabelTransform => (px, py, tickLabelPosition) => {
+  const {
+    verticalAlign,
+    horizontalAlign
+  } = getLabelTransform(px, py, tickLabelPosition);
+  let textAnchor;
+  let dominantBaseline;
+  switch (verticalAlign) {
+    case 'start':
+      dominantBaseline = 'hanging';
+      break;
+    case 'middle':
+      dominantBaseline = 'middle';
+      break;
+    case 'end':
+    default:
+      dominantBaseline = 'auto';
+      break;
+  }
+  switch (horizontalAlign) {
+    case 'start':
+      textAnchor = 'start';
+      break;
+    case 'middle':
+      textAnchor = 'middle';
+      break;
+    case 'end':
+    default:
+      textAnchor = 'end';
+      break;
+  }
+  return {
+    textAnchor,
+    dominantBaseline
+  };
+};

package/ChartsRadiusAxis/getLabelTransform.d.mts

@@ -0,0 +1,11 @@
+/**
+ * Return the vertical/horizontal alignment for a tick label at a given position.
+ * @param px The normalized x position to the axis line (between -1 and 1).
+ * @param py The normalized y position to the axis line (between -1 and 1).
+ * @param tickLabelPosition The position of the tick label relative to the axis line.
+ * @returns The vertical and horizontal alignment for the tick label.
+ */
+export declare function getLabelTransform(px: number, py: number, tickLabelPosition: 'center' | 'after' | 'before'): {
+  verticalAlign: 'start' | 'middle' | 'end';
+  horizontalAlign: 'start' | 'middle' | 'end';
+};

package/ChartsRadiusAxis/getLabelTransform.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Return the vertical/horizontal alignment for a tick label at a given position.
+ * @param px The normalized x position to the axis line (between -1 and 1).
+ * @param py The normalized y position to the axis line (between -1 and 1).
+ * @param tickLabelPosition The position of the tick label relative to the axis line.
+ * @returns The vertical and horizontal alignment for the tick label.
+ */
+export declare function getLabelTransform(px: number, py: number, tickLabelPosition: 'center' | 'after' | 'before'): {
+  verticalAlign: 'start' | 'middle' | 'end';
+  horizontalAlign: 'start' | 'middle' | 'end';
+};

package/ChartsRadiusAxis/getLabelTransform.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLabelTransform = getLabelTransform;
+/**
+ * Return the vertical/horizontal alignment for a tick label at a given position.
+ * @param px The normalized x position to the axis line (between -1 and 1).
+ * @param py The normalized y position to the axis line (between -1 and 1).
+ * @param tickLabelPosition The position of the tick label relative to the axis line.
+ * @returns The vertical and horizontal alignment for the tick label.
+ */
+function getLabelTransform(px, py, tickLabelPosition) {
+  if (tickLabelPosition === 'center') {
+    return {
+      verticalAlign: 'middle',
+      horizontalAlign: 'middle'
+    };
+  }
+  let verticalAlign = 'middle';
+  let horizontalAlign = 'middle';
+  if (px > 0.3) {
+    verticalAlign = tickLabelPosition === 'after' ? 'start' : 'end';
+  } else if (px < -0.3) {
+    verticalAlign = tickLabelPosition === 'after' ? 'end' : 'start';
+  }
+  if (py > 0.3) {
+    horizontalAlign = tickLabelPosition === 'after' ? 'end' : 'start';
+  } else if (py < -0.3) {
+    horizontalAlign = tickLabelPosition === 'after' ? 'start' : 'end';
+  }
+  return {
+    verticalAlign,
+    horizontalAlign
+  };
+}

package/ChartsRadiusAxis/getLabelTransform.mjs

@@ -0,0 +1,31 @@
+/**
+ * Return the vertical/horizontal alignment for a tick label at a given position.
+ * @param px The normalized x position to the axis line (between -1 and 1).
+ * @param py The normalized y position to the axis line (between -1 and 1).
+ * @param tickLabelPosition The position of the tick label relative to the axis line.
+ * @returns The vertical and horizontal alignment for the tick label.
+ */
+export function getLabelTransform(px, py, tickLabelPosition) {
+  if (tickLabelPosition === 'center') {
+    return {
+      verticalAlign: 'middle',
+      horizontalAlign: 'middle'
+    };
+  }
+  let verticalAlign = 'middle';
+  let horizontalAlign = 'middle';
+  if (px > 0.3) {
+    verticalAlign = tickLabelPosition === 'after' ? 'start' : 'end';
+  } else if (px < -0.3) {
+    verticalAlign = tickLabelPosition === 'after' ? 'end' : 'start';
+  }
+  if (py > 0.3) {
+    horizontalAlign = tickLabelPosition === 'after' ? 'end' : 'start';
+  } else if (py < -0.3) {
+    horizontalAlign = tickLabelPosition === 'after' ? 'start' : 'end';
+  }
+  return {
+    verticalAlign,
+    horizontalAlign
+  };
+}

package/ChartsRadiusAxis/index.d.mts

@@ -0,0 +1,3 @@
+export { type ChartsRadiusAxisProps, ChartsRadiusAxis as Unstable_ChartsRadiusAxis } from "./ChartsRadiusAxis.mjs";
+export { chartsRadialAxisClasses } from "./chartsRadiusAxisClasses.mjs";
+export type { ChartsRadialAxisClasses, ChartsRadialAxisClassKey } from "./chartsRadiusAxisClasses.mjs";

package/ChartsRadiusAxis/index.d.ts

@@ -0,0 +1,3 @@
+export { type ChartsRadiusAxisProps, ChartsRadiusAxis as Unstable_ChartsRadiusAxis } from "./ChartsRadiusAxis.js";
+export { chartsRadialAxisClasses } from "./chartsRadiusAxisClasses.js";
+export type { ChartsRadialAxisClasses, ChartsRadialAxisClassKey } from "./chartsRadiusAxisClasses.js";

package/ChartsRadiusAxis/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Unstable_ChartsRadiusAxis", {
+  enumerable: true,
+  get: function () {
+    return _ChartsRadiusAxis.ChartsRadiusAxis;
+  }
+});
+Object.defineProperty(exports, "chartsRadialAxisClasses", {
+  enumerable: true,
+  get: function () {
+    return _chartsRadiusAxisClasses.chartsRadialAxisClasses;
+  }
+});
+var _ChartsRadiusAxis = require("./ChartsRadiusAxis");
+var _chartsRadiusAxisClasses = require("./chartsRadiusAxisClasses");

package/ChartsRadiusAxis/index.mjs

@@ -0,0 +1,2 @@
+export { ChartsRadiusAxis as Unstable_ChartsRadiusAxis } from "./ChartsRadiusAxis.mjs";
+export { chartsRadialAxisClasses } from "./chartsRadiusAxisClasses.mjs";

package/ChartsRadiusAxis/sharedRadialAxisClasses.d.mts

@@ -0,0 +1,21 @@
+export interface ChartsRadialAxisClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element of radius axis. */
+  radius: string;
+  /** Styles applied to the root element of rotation axis. */
+  rotation: string;
+  /** Styles applied to the main line element. */
+  line: string;
+  /** Styles applied to the group including the tick and its label. */
+  tickContainer: string;
+  /** Styles applied to ticks. */
+  tick: string;
+  /** Styles applied to the tick label. */
+  tickLabel: string;
+  /** Styles applied to the tick label when centered. */
+  centered: string;
+}
+export type ChartsRadialAxisClassKey = keyof ChartsRadialAxisClasses;
+export declare function getRadialAxisUtilityClass(slot: string): string;
+export declare const chartsRadialAxisClasses: ChartsRadialAxisClasses;

package/ChartsRadiusAxis/sharedRadialAxisClasses.d.ts

@@ -0,0 +1,21 @@
+export interface ChartsRadialAxisClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element of radius axis. */
+  radius: string;
+  /** Styles applied to the root element of rotation axis. */
+  rotation: string;
+  /** Styles applied to the main line element. */
+  line: string;
+  /** Styles applied to the group including the tick and its label. */
+  tickContainer: string;
+  /** Styles applied to ticks. */
+  tick: string;
+  /** Styles applied to the tick label. */
+  tickLabel: string;
+  /** Styles applied to the tick label when centered. */
+  centered: string;
+}
+export type ChartsRadialAxisClassKey = keyof ChartsRadialAxisClasses;
+export declare function getRadialAxisUtilityClass(slot: string): string;
+export declare const chartsRadialAxisClasses: ChartsRadialAxisClasses;

package/ChartsRadiusAxis/sharedRadialAxisClasses.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chartsRadialAxisClasses = void 0;
+exports.getRadialAxisUtilityClass = getRadialAxisUtilityClass;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getRadialAxisUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsRadialAxis', slot);
+}
+const chartsRadialAxisClasses = exports.chartsRadialAxisClasses = (0, _generateUtilityClasses.default)('MuiChartsRadialAxis', ['root', 'radius', 'rotation', 'line', 'tickContainer', 'tick', 'tickLabel', 'centered']);

package/ChartsRadiusAxis/sharedRadialAxisClasses.mjs

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getRadialAxisUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsRadialAxis', slot);
+}
+export const chartsRadialAxisClasses = generateUtilityClasses('MuiChartsRadialAxis', ['root', 'radius', 'rotation', 'line', 'tickContainer', 'tick', 'tickLabel', 'centered']);

package/ChartsRotationAxis/ChartsRotationAxis.d.mts

@@ -0,0 +1,48 @@
+import type { AxisId } from "../models/axis.mjs";
+import { type ChartsRadialAxisClasses } from "./chartsRotationAxisClasses.mjs";
+export interface ChartsRotationAxisProps {
+  /**
+   * Id of the rotation axis to render.
+   * If not provided, it will use the first defined rotation axis.
+   */
+  axisId?: AxisId;
+  /**
+   * If `true`, the axis line is not rendered.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If `true`, the ticks are not rendered.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /**
+   * The position of the rotation axis.
+   * It can be 'inside' or 'outside'.
+   * @default 'outside'
+   */
+  position?: 'inside' | 'outside';
+  /**
+   * The size (in pixels) of the tick marks.
+   * @default 6
+   */
+  tickSize?: number;
+  /**
+   * Set the position of the tick labels relative to the axis line.
+   * `'after'` places them outside the arc, `'before'` inside.
+   * @default position === 'outside' ? 'after' : 'before'
+   */
+  tickLabelPosition?: 'after' | 'before';
+  /**
+   * Set the position of the tick relative to the axis line.
+   * `'after'` places them outside the arc, `'before'` inside.
+   * @default position === 'outside' ? 'after' : 'before'
+   */
+  tickPosition?: 'after' | 'before';
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
+  classes?: Partial<ChartsRadialAxisClasses>;
+}
+export declare function ChartsRotationAxis(props: ChartsRotationAxisProps): import("react/jsx-runtime").JSX.Element | null;

package/ChartsRotationAxis/ChartsRotationAxis.d.ts

@@ -0,0 +1,48 @@
+import type { AxisId } from "../models/axis.js";
+import { type ChartsRadialAxisClasses } from "./chartsRotationAxisClasses.js";
+export interface ChartsRotationAxisProps {
+  /**
+   * Id of the rotation axis to render.
+   * If not provided, it will use the first defined rotation axis.
+   */
+  axisId?: AxisId;
+  /**
+   * If `true`, the axis line is not rendered.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If `true`, the ticks are not rendered.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /**
+   * The position of the rotation axis.
+   * It can be 'inside' or 'outside'.
+   * @default 'outside'
+   */
+  position?: 'inside' | 'outside';
+  /**
+   * The size (in pixels) of the tick marks.
+   * @default 6
+   */
+  tickSize?: number;
+  /**
+   * Set the position of the tick labels relative to the axis line.
+   * `'after'` places them outside the arc, `'before'` inside.
+   * @default position === 'outside' ? 'after' : 'before'
+   */
+  tickLabelPosition?: 'after' | 'before';
+  /**
+   * Set the position of the tick relative to the axis line.
+   * `'after'` places them outside the arc, `'before'` inside.
+   * @default position === 'outside' ? 'after' : 'before'
+   */
+  tickPosition?: 'after' | 'before';
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
+  classes?: Partial<ChartsRadialAxisClasses>;
+}
+export declare function ChartsRotationAxis(props: ChartsRotationAxisProps): import("react/jsx-runtime").JSX.Element | null;