@mui/x-charts-premium 9.0.4 → 9.2.0

package/RadialBarChart/useRadialBarChartProps.mjs

@@ -0,0 +1,101 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["rotationAxis", "radiusAxis", "series", "width", "height", "margin", "colors", "dataset", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "showToolbar", "axisHighlight"];
+import * as React from 'react';
+import useId from '@mui/utils/useId';
+import { RADIAL_BAR_CHART_PLUGINS } from "./RadialBarChart.plugins.mjs";
+import { DEFAULT_ROTATION_AXIS_KEY } from "../constants/index.mjs";
+
+/**
+ * A helper function that extracts RadialBarChartProps from the input props
+ * and returns an object with props for the children components of RadialBarChart.
+ *
+ * @param props The input props for RadialBarChart
+ * @returns An object with props for the children components of RadialBarChart
+ */
+export const useRadialBarChartProps = props => {
+  const {
+      rotationAxis,
+      radiusAxis,
+      series,
+      width,
+      height,
+      margin,
+      colors,
+      dataset,
+      grid,
+      children,
+      slots,
+      slotProps,
+      skipAnimation,
+      loading,
+      axisHighlight
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const id = useId();
+  const clipPathId = `${id}-clip-path`;
+  const seriesWithDefault = React.useMemo(() => series.map(s => _extends({
+    type: 'radialBar'
+  }, s)), [series]);
+  const defaultRotationAxis = React.useMemo(() => {
+    return [{
+      id: DEFAULT_ROTATION_AXIS_KEY,
+      scaleType: 'band',
+      data: Array.from({
+        length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
+      }, (_, index) => index)
+    }];
+  }, [series, dataset]);
+  const chartsContainerProps = _extends({}, other, {
+    series: seriesWithDefault,
+    width,
+    height,
+    margin,
+    colors,
+    dataset,
+    rotationAxis: rotationAxis ?? defaultRotationAxis,
+    radiusAxis,
+    skipAnimation,
+    plugins: RADIAL_BAR_CHART_PLUGINS
+  });
+  const isHorizontal = series.some(s => s.layout === 'horizontal');
+  const axisHighlightProps = _extends({}, isHorizontal ? {
+    radius: 'band'
+  } : {
+    rotation: 'band'
+  }, axisHighlight);
+  const gridProps = grid;
+  const clipPathGroupProps = {
+    clipPath: `url(#${clipPathId})`
+  };
+  const clipPathProps = {
+    id: clipPathId
+  };
+  const overlayProps = {
+    slots,
+    slotProps,
+    loading
+  };
+  const legendProps = {
+    slots,
+    slotProps
+  };
+  const chartsWrapperProps = {
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction,
+    hideLegend: props.hideLegend ?? false
+  };
+  return {
+    chartsWrapperProps,
+    chartsContainerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    overlayProps,
+    legendProps,
+    axisHighlightProps,
+    children
+  };
+};

package/RadialBarChart/useRadialBarPlotData.d.mts

@@ -0,0 +1,23 @@
+import { type SeriesId } from '@mui/x-charts/models';
+interface ProcessedRadialBarData {
+  seriesId: SeriesId;
+  dataIndex: number;
+  color: string;
+  value: number | null;
+  hidden: boolean;
+  startAngle: number;
+  endAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+}
+interface ProcessedRadialBarSeriesData {
+  seriesId: SeriesId;
+  data: ProcessedRadialBarData[];
+  layout: 'vertical' | 'horizontal';
+  rotationOrigin: number;
+  radiusOrigin: number;
+}
+export declare function useRadialBarPlotData(): {
+  completedData: ProcessedRadialBarSeriesData[];
+};
+export {};

package/RadialBarChart/useRadialBarPlotData.d.ts

@@ -0,0 +1,23 @@
+import { type SeriesId } from '@mui/x-charts/models';
+interface ProcessedRadialBarData {
+  seriesId: SeriesId;
+  dataIndex: number;
+  color: string;
+  value: number | null;
+  hidden: boolean;
+  startAngle: number;
+  endAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+}
+interface ProcessedRadialBarSeriesData {
+  seriesId: SeriesId;
+  data: ProcessedRadialBarData[];
+  layout: 'vertical' | 'horizontal';
+  rotationOrigin: number;
+  radiusOrigin: number;
+}
+export declare function useRadialBarPlotData(): {
+  completedData: ProcessedRadialBarSeriesData[];
+};
+export {};

package/RadialBarChart/useRadialBarPlotData.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRadialBarPlotData = useRadialBarPlotData;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("@mui/x-charts/hooks");
+var _internals = require("@mui/x-charts/internals");
+function useRadialBarPlotData() {
+  const seriesData = (0, _internals.useAllSeriesOfType)('radialBar') ?? {
+    series: {},
+    stackingGroups: [],
+    seriesOrder: []
+  };
+  const {
+    rotationAxis: rotationAxes,
+    rotationAxisIds
+  } = (0, _hooks.useRotationAxes)();
+  const {
+    radiusAxis: radiusAxes,
+    radiusAxisIds
+  } = (0, _hooks.useRadiusAxes)();
+  const defaultRotationAxisId = rotationAxisIds[0];
+  const defaultRadiusAxisId = radiusAxisIds[0];
+  return React.useMemo(() => processRadialBarDataForPlot(seriesData.stackingGroups, seriesData.series, rotationAxes, radiusAxes, defaultRotationAxisId, defaultRadiusAxisId), [seriesData.stackingGroups, seriesData.series, rotationAxes, radiusAxes, defaultRotationAxisId, defaultRadiusAxisId]);
+}
+function processRadialBarDataForPlot(stackingGroups, series, rotationAxes, radiusAxes, defaultRotationAxisId, defaultRadiusAxisId) {
+  const data = stackingGroups.flatMap(({
+    ids: seriesIds
+  }, groupIndex) => {
+    return seriesIds.map(seriesId => {
+      const seriesItem = series[seriesId];
+      const rotationAxisId = seriesItem.rotationAxisId ?? defaultRotationAxisId;
+      const radiusAxisId = seriesItem.radiusAxisId ?? defaultRadiusAxisId;
+      const layout = seriesItem.layout;
+      const verticalLayout = layout === 'vertical';
+      const rotationAxisConfig = rotationAxes[rotationAxisId];
+      const radiusAxisConfig = radiusAxes[radiusAxisId];
+      const baseAxisConfig = verticalLayout ? rotationAxisConfig : radiusAxisConfig;
+      const valueAxisConfig = verticalLayout ? radiusAxisConfig : rotationAxisConfig;
+      const reverse = valueAxisConfig.reverse ?? false;
+      const baseScale = baseAxisConfig.scale;
+      const valueScale = valueAxisConfig.scale;
+      const rotationOrigin = rotationAxisConfig.scale(0) ?? 0;
+      const radiusOrigin = radiusAxisConfig.scale(0) ?? 0;
+      const {
+        barWidth: bandSlice,
+        offset
+      } = (0, _internals.getBandSize)(baseScale.bandwidth(), stackingGroups.length, baseAxisConfig.barGapRatio);
+      const seriesDataPoints = [];
+      for (let dataIndex = 0; dataIndex < baseAxisConfig.data.length; dataIndex += 1) {
+        const seriesValue = seriesItem.data[dataIndex];
+        if (seriesValue == null) {
+          continue;
+        }
+        const stackValues = seriesItem.visibleStackedData[dataIndex];
+        const stackCoords = stackValues.map(v => valueScale(v));
+        const [minValueCoord, maxValueCoord] = (0, _internals.findMinMax)(stackCoords);
+        let barSize = 0;
+        if (seriesValue !== 0 && !seriesItem.hidden) {
+          barSize = Math.max(seriesItem.minBarSize ?? 0, maxValueCoord - minValueCoord);
+        }
+        const isPositive = reverse ? seriesValue < 0 : seriesValue > 0;
+        const valueStart = isPositive ? maxValueCoord - barSize : minValueCoord;
+        const valueEnd = isPositive ? maxValueCoord : minValueCoord + barSize;
+        const baseStart = baseScale(baseAxisConfig.data[dataIndex]) + groupIndex * (bandSlice + offset);
+        const baseEnd = baseStart + bandSlice;
+        seriesDataPoints.push({
+          seriesId,
+          dataIndex,
+          hidden: seriesItem.hidden,
+          color: seriesItem.color,
+          value: seriesValue,
+          startAngle: verticalLayout ? baseStart : valueStart,
+          endAngle: verticalLayout ? baseEnd : valueEnd,
+          innerRadius: verticalLayout ? valueStart : baseStart,
+          outerRadius: verticalLayout ? valueEnd : baseEnd
+        });
+      }
+      return {
+        seriesId,
+        data: seriesDataPoints,
+        layout,
+        rotationOrigin,
+        radiusOrigin
+      };
+    });
+  });
+  return {
+    completedData: data
+  };
+}

package/RadialBarChart/useRadialBarPlotData.mjs

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { useRadiusAxes, useRotationAxes } from '@mui/x-charts/hooks';
+import { findMinMax, getBandSize, useAllSeriesOfType } from '@mui/x-charts/internals';
+export function useRadialBarPlotData() {
+  const seriesData = useAllSeriesOfType('radialBar') ?? {
+    series: {},
+    stackingGroups: [],
+    seriesOrder: []
+  };
+  const {
+    rotationAxis: rotationAxes,
+    rotationAxisIds
+  } = useRotationAxes();
+  const {
+    radiusAxis: radiusAxes,
+    radiusAxisIds
+  } = useRadiusAxes();
+  const defaultRotationAxisId = rotationAxisIds[0];
+  const defaultRadiusAxisId = radiusAxisIds[0];
+  return React.useMemo(() => processRadialBarDataForPlot(seriesData.stackingGroups, seriesData.series, rotationAxes, radiusAxes, defaultRotationAxisId, defaultRadiusAxisId), [seriesData.stackingGroups, seriesData.series, rotationAxes, radiusAxes, defaultRotationAxisId, defaultRadiusAxisId]);
+}
+function processRadialBarDataForPlot(stackingGroups, series, rotationAxes, radiusAxes, defaultRotationAxisId, defaultRadiusAxisId) {
+  const data = stackingGroups.flatMap(({
+    ids: seriesIds
+  }, groupIndex) => {
+    return seriesIds.map(seriesId => {
+      const seriesItem = series[seriesId];
+      const rotationAxisId = seriesItem.rotationAxisId ?? defaultRotationAxisId;
+      const radiusAxisId = seriesItem.radiusAxisId ?? defaultRadiusAxisId;
+      const layout = seriesItem.layout;
+      const verticalLayout = layout === 'vertical';
+      const rotationAxisConfig = rotationAxes[rotationAxisId];
+      const radiusAxisConfig = radiusAxes[radiusAxisId];
+      const baseAxisConfig = verticalLayout ? rotationAxisConfig : radiusAxisConfig;
+      const valueAxisConfig = verticalLayout ? radiusAxisConfig : rotationAxisConfig;
+      const reverse = valueAxisConfig.reverse ?? false;
+      const baseScale = baseAxisConfig.scale;
+      const valueScale = valueAxisConfig.scale;
+      const rotationOrigin = rotationAxisConfig.scale(0) ?? 0;
+      const radiusOrigin = radiusAxisConfig.scale(0) ?? 0;
+      const {
+        barWidth: bandSlice,
+        offset
+      } = getBandSize(baseScale.bandwidth(), stackingGroups.length, baseAxisConfig.barGapRatio);
+      const seriesDataPoints = [];
+      for (let dataIndex = 0; dataIndex < baseAxisConfig.data.length; dataIndex += 1) {
+        const seriesValue = seriesItem.data[dataIndex];
+        if (seriesValue == null) {
+          continue;
+        }
+        const stackValues = seriesItem.visibleStackedData[dataIndex];
+        const stackCoords = stackValues.map(v => valueScale(v));
+        const [minValueCoord, maxValueCoord] = findMinMax(stackCoords);
+        let barSize = 0;
+        if (seriesValue !== 0 && !seriesItem.hidden) {
+          barSize = Math.max(seriesItem.minBarSize ?? 0, maxValueCoord - minValueCoord);
+        }
+        const isPositive = reverse ? seriesValue < 0 : seriesValue > 0;
+        const valueStart = isPositive ? maxValueCoord - barSize : minValueCoord;
+        const valueEnd = isPositive ? maxValueCoord : minValueCoord + barSize;
+        const baseStart = baseScale(baseAxisConfig.data[dataIndex]) + groupIndex * (bandSlice + offset);
+        const baseEnd = baseStart + bandSlice;
+        seriesDataPoints.push({
+          seriesId,
+          dataIndex,
+          hidden: seriesItem.hidden,
+          color: seriesItem.color,
+          value: seriesValue,
+          startAngle: verticalLayout ? baseStart : valueStart,
+          endAngle: verticalLayout ? baseEnd : valueEnd,
+          innerRadius: verticalLayout ? valueStart : baseStart,
+          outerRadius: verticalLayout ? valueEnd : baseEnd
+        });
+      }
+      return {
+        seriesId,
+        data: seriesDataPoints,
+        layout,
+        rotationOrigin,
+        radiusOrigin
+      };
+    });
+  });
+  return {
+    completedData: data
+  };
+}

package/RadialLineChart/RadialArea.js

@@ -11,6 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _internals = require("@mui/x-charts/internals");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "color", "hidden", "curve", "points"];
 function RadialArea(props) {
@@ -22,12 +23,23 @@ function RadialArea(props) {
       points
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const identifier = React.useMemo(() => ({
+    type: 'radialLine',
+    seriesId
+  }), [seriesId]);
+  const highlightState = (0, _hooks.useItemHighlightState)(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const d = (0, _d3Shape.areaRadial)().angle(p => p.angle).innerRadius(p => p.baseRadius).outerRadius(p => p.radius).curve((0, _internals.getCurveFactory)(curve))(points) || '';
+  const fadedOpacity = isFaded ? 0.3 : 1;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
     "data-series": seriesId,
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
     d: d,
     fill: color,
     stroke: "none",
-    opacity: hidden ? 0 : 1
+    filter: isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: hidden ? 0 : fadedOpacity
   }, other));
 }

package/RadialLineChart/RadialArea.mjs

@@ -4,6 +4,7 @@ const _excluded = ["seriesId", "color", "hidden", "curve", "points"];
 import * as React from 'react';
 import { areaRadial as d3AreaRadial } from '@mui/x-charts-vendor/d3-shape';
 import { getCurveFactory } from '@mui/x-charts/internals';
+import { useItemHighlightState } from "../hooks/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 function RadialArea(props) {
   const {
@@ -14,13 +15,24 @@ function RadialArea(props) {
       points
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const identifier = React.useMemo(() => ({
+    type: 'radialLine',
+    seriesId
+  }), [seriesId]);
+  const highlightState = useItemHighlightState(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const d = d3AreaRadial().angle(p => p.angle).innerRadius(p => p.baseRadius).outerRadius(p => p.radius).curve(getCurveFactory(curve))(points) || '';
+  const fadedOpacity = isFaded ? 0.3 : 1;
   return /*#__PURE__*/_jsx("path", _extends({
     "data-series": seriesId,
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
     d: d,
     fill: color,
     stroke: "none",
-    opacity: hidden ? 0 : 1
+    filter: isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: hidden ? 0 : fadedOpacity
   }, other));
 }
 export { RadialArea };

package/RadialLineChart/RadialLine.js

@@ -11,6 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _internals = require("@mui/x-charts/internals");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "color", "hidden", "points", "curve"];
 function RadialLine(props) {
@@ -22,12 +23,23 @@ function RadialLine(props) {
       curve
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const identifier = React.useMemo(() => ({
+    type: 'radialLine',
+    seriesId
+  }), [seriesId]);
+  const highlightState = (0, _hooks.useItemHighlightState)(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const d = (0, _d3Shape.lineRadial)().angle(p => p.angle).radius(p => p.radius).curve((0, _internals.getCurveFactory)(curve))(points) || '';
+  const fadedOpacity = isFaded ? 0.3 : 1;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
     "data-series": seriesId,
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
     d: d,
     stroke: color,
     fill: "none",
-    opacity: hidden ? 0 : 1
+    filter: isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: hidden ? 0 : fadedOpacity
   }, other));
 }

package/RadialLineChart/RadialLine.mjs

@@ -4,6 +4,7 @@ const _excluded = ["seriesId", "color", "hidden", "points", "curve"];
 import * as React from 'react';
 import { lineRadial as d3LineRadial } from '@mui/x-charts-vendor/d3-shape';
 import { getCurveFactory } from '@mui/x-charts/internals';
+import { useItemHighlightState } from "../hooks/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 function RadialLine(props) {
   const {
@@ -14,13 +15,24 @@ function RadialLine(props) {
       curve
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const identifier = React.useMemo(() => ({
+    type: 'radialLine',
+    seriesId
+  }), [seriesId]);
+  const highlightState = useItemHighlightState(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const d = d3LineRadial().angle(p => p.angle).radius(p => p.radius).curve(getCurveFactory(curve))(points) || '';
+  const fadedOpacity = isFaded ? 0.3 : 1;
   return /*#__PURE__*/_jsx("path", _extends({
     "data-series": seriesId,
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
     d: d,
     stroke: color,
     fill: "none",
-    opacity: hidden ? 0 : 1
+    filter: isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: hidden ? 0 : fadedOpacity
   }, other));
 }
 export { RadialLine };

package/RadialLineChart/RadialLineChart.d.mts

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { type ChartsSlots, type ChartsSlotProps } from '@mui/x-charts/internals';
 import { type ChartsRadialGridProps } from '@mui/x-charts/ChartsRadialGrid';
+import { type ChartsRadialAxisHighlightProps } from '@mui/x-charts/ChartsRadialAxisHighlight';
 import { type ChartsLegendSlots, type ChartsLegendSlotProps } from "../ChartsLegend/index.mjs";
 import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/index.mjs";
 import { type RadialLineChartPluginSignatures } from "./RadialLineChart.plugins.mjs";
 import { type ChartsOverlayProps, type ChartsOverlaySlots, type ChartsOverlaySlotProps } from "../ChartsOverlay/index.mjs";
 import type { LinePlotSlots, LinePlotSlotProps, LineSeries } from "../LineChart/index.mjs";
 import { type ChartsToolbarSlots, type ChartsToolbarSlotProps } from "../Toolbar/index.mjs";
+import { type RadialLineHighlightPlotSlots, type RadialLineHighlightPlotSlotProps } from "./RadialLineHighlightPlot.mjs";
 import { type ChartsRadialDataProviderPremiumProps } from "../ChartsRadialDataProviderPremium/index.mjs";
-export interface RadialLineChartSlots extends LinePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
-export interface RadialLineChartSlotProps extends LinePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export interface RadialLineChartSlots extends LinePlotSlots, RadialLineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface RadialLineChartSlotProps extends LinePlotSlotProps, RadialLineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface RadialLineChartProps extends Omit<ChartsRadialDataProviderPremiumProps<'radialLine', RadialLineChartPluginSignatures>, 'series' | 'plugins' | 'zAxis' | 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the line chart.
@@ -17,9 +19,15 @@ export interface RadialLineChartProps extends Omit<ChartsRadialDataProviderPremi
    */
   series: Readonly<LineSeries[]>;
   /**
-   * Option to display a cartesian grid in the background.
+   * Option to display a radial grid in the background.
    */
   grid?: Pick<ChartsRadialGridProps, 'radius' | 'rotation'>;
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @default { rotation: 'line' }
+   */
+  axisHighlight?: ChartsRadialAxisHighlightProps;
   /**
    * If `true`, the legend is not rendered.
    */

package/RadialLineChart/RadialLineChart.d.ts

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { type ChartsSlots, type ChartsSlotProps } from '@mui/x-charts/internals';
 import { type ChartsRadialGridProps } from '@mui/x-charts/ChartsRadialGrid';
+import { type ChartsRadialAxisHighlightProps } from '@mui/x-charts/ChartsRadialAxisHighlight';
 import { type ChartsLegendSlots, type ChartsLegendSlotProps } from "../ChartsLegend/index.js";
 import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/index.js";
 import { type RadialLineChartPluginSignatures } from "./RadialLineChart.plugins.js";
 import { type ChartsOverlayProps, type ChartsOverlaySlots, type ChartsOverlaySlotProps } from "../ChartsOverlay/index.js";
 import type { LinePlotSlots, LinePlotSlotProps, LineSeries } from "../LineChart/index.js";
 import { type ChartsToolbarSlots, type ChartsToolbarSlotProps } from "../Toolbar/index.js";
+import { type RadialLineHighlightPlotSlots, type RadialLineHighlightPlotSlotProps } from "./RadialLineHighlightPlot.js";
 import { type ChartsRadialDataProviderPremiumProps } from "../ChartsRadialDataProviderPremium/index.js";
-export interface RadialLineChartSlots extends LinePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
-export interface RadialLineChartSlotProps extends LinePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export interface RadialLineChartSlots extends LinePlotSlots, RadialLineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface RadialLineChartSlotProps extends LinePlotSlotProps, RadialLineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface RadialLineChartProps extends Omit<ChartsRadialDataProviderPremiumProps<'radialLine', RadialLineChartPluginSignatures>, 'series' | 'plugins' | 'zAxis' | 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the line chart.
@@ -17,9 +19,15 @@ export interface RadialLineChartProps extends Omit<ChartsRadialDataProviderPremi
    */
   series: Readonly<LineSeries[]>;
   /**
-   * Option to display a cartesian grid in the background.
+   * Option to display a radial grid in the background.
    */
   grid?: Pick<ChartsRadialGridProps, 'radius' | 'rotation'>;
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @default { rotation: 'line' }
+   */
+  axisHighlight?: ChartsRadialAxisHighlightProps;
   /**
    * If `true`, the legend is not rendered.
    */