@mui/x-charts 9.1.0 → 9.2.0

package/CHANGELOG.md

@@ -1,5 +1,108 @@
 # Changelog
 
+## 9.2.0
+
+_May 13, 2026_
+
+We'd like to extend a big thank you to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡️ Add a WebGL renderer to the [Bar chart](https://mui.com/x/react-charts/bars/#webgl-renderer)
+- 📊 Add a radial charts with the [radial line](https://mui.com/x/react-charts/radial-lines/), [radial bar](https://mui.com/x/react-charts/radial-bars/), and the [radial grid and axes](https://mui.com/x/react-charts/radial-axes/)
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@Anexus5919, @mustafajw07
+
+The following team members contributed to this release:
+@aemartos, @alexfauquette, @bernardobelchior, @JCQuintas, @oliviertassinari, @sai6855, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.2.0`
+
+- [data grid] Add support for pinned columns in `GridVirtualScroller` (#22347) @sai6855
+- [data grid] Remove unused CSS (#22390) @oliviertassinari
+
+#### `@mui/x-data-grid-pro@9.2.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@9.2.0`.
+
+#### `@mui/x-data-grid-premium@9.2.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@9.2.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.2.0`
+
+- [pickers] Trim test helpers' default load graph (#22421) @JCQuintas
+
+#### `@mui/x-date-pickers-pro@9.2.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@9.2.0`.
+
+### Charts
+
+#### `@mui/x-charts@9.2.0`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@9.2.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@9.2.0`.
+
+#### `@mui/x-charts-premium@9.2.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@9.2.0`, plus:
+
+- [charts-premium] Add `Highlight` support to `RadialBarChart` (#22322) @alexfauquette
+- [charts-premium] Add `WebGL` renderer to `BarChartPremium` (#22354) @JCQuintas
+- [charts-premium] Add mark shape support to the radial line (#22242) @alexfauquette
+- [charts-premium] `RadialBarChart` support axis interaction with layout horizontal (#22319) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@9.1.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@9.1.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@9.1.0`.
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-alpha.6`
+
+- [scheduler] Complete ARIA grid semantics on `EventTimeline` and `EventCalendar` (#22266) @Anexus5919
+- [scheduler] Improve UX for recurrence tab (#22287) @mustafajw07
+
+#### `@mui/x-scheduler-premium@9.0.0-alpha.6` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-alpha.6`.
+
+### Codemod
+
+#### `@mui/x-codemod@9.1.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Document the `RadialBarChart` (#22320) @alexfauquette
+- [docs] Add histogram demo to bar-demo page (#22373) @siriwatknp
+- [docs] Add radial bar to the nav bar (#22429) @alexfauquette
+- [docs] Split radial grid and radial line pages (#22238) @alexfauquette
+
+### Miscellaneous
+
+- [test] Disable animations in chart benchmarks (#22433) @bernardobelchior
+- [test] Move `x-internal-gestures` vitest isolate flag to test block (#22427) @JCQuintas
+- [test] Reduce flakiness in `MobileTimeRangePicker` multi-input `describeValue` tests (#22422) @JCQuintas
+- [x-license] Exclude compat test pins from Renovate major bumps (#22414) @aemartos
+- [x-license] Add cross-major license format compatibility tests (#22335) @aemartos
+
 ## 9.1.0
 
 _May 8, 2026_

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)({

package/ChartsRadiusAxis/ChartsRadiusAxis.mjs

@@ -10,8 +10,9 @@ import { selectorChartPolarCenter } from "../internals/plugins/featurePlugins/us
 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. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TICK_LABEL_GAP = 3;
 const getLabelTextAnchors = createGetLabelTextAnchors(getLabelTransform);
 
@@ -34,17 +35,22 @@ function getAxisAngleInRadians(position, rotationAxis) {
   return 0;
 }
 export function ChartsRadiusAxis(props) {
+  const radiusAxis = useRadiusAxis(props.axisId);
+  const settings = _extends({}, 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 = useUtilityClasses({
     classes: classesProp,
@@ -58,7 +64,6 @@ export function ChartsRadiusAxis(props) {
     cx,
     cy
   } = store.use(selectorChartPolarCenter);
-  const radiusAxis = useRadiusAxis(axisId);
   const rotationAxis = useRotationAxis();
   const ticks = useTicks({
     scale: radiusAxis.scale,
@@ -68,7 +73,7 @@ export function ChartsRadiusAxis(props) {
     valueFormatter: radiusAxis?.valueFormatter,
     direction: 'radius'
   });
-  if (!radiusAxis) {
+  if (!radiusAxis || settings.position === 'none') {
     return null;
   }
   const angle = getAxisAngleInRadians(position, rotationAxis);
@@ -96,17 +101,18 @@ export 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;
@@ -119,10 +125,10 @@ export function ChartsRadiusAxis(props) {
       return /*#__PURE__*/_jsxs("g", {
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/_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__*/_jsx("text", _extends({

package/ChartsRotationAxis/ChartsRotationAxis.d.mts

@@ -1,48 +1,2 @@
-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>;
-}
+import type { ChartsRotationAxisProps } from "../models/axis.mjs";
 export declare function ChartsRotationAxis(props: ChartsRotationAxisProps): import("react/jsx-runtime").JSX.Element | null;

package/ChartsRotationAxis/ChartsRotationAxis.d.ts

@@ -1,48 +1,2 @@
-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>;
-}
+import type { ChartsRotationAxisProps } from "../models/axis.js";
 export declare function ChartsRotationAxis(props: ChartsRotationAxisProps): import("react/jsx-runtime").JSX.Element | null;