Update RadialChart.tsx

Author: MarcusNotheis

packages/charts/src/components/RadialChart/RadialChart.tsx

@@ -4,7 +4,7 @@ import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/next/ChartCo
 import { PieChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/PieChartPlaceholder';
 import { CommonProps } from '@ui5/webcomponents-react/interfaces/CommonProps';
 import React, { CSSProperties, FC, forwardRef, Ref, useCallback, useMemo } from 'react';
-import { PolarAngleAxis, RadialBar, RadialBarChart as RadialBarChartLib } from 'recharts';
+import { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';
 
 export interface RadialChartProps extends CommonProps {
   value?: number;
@@ -14,6 +14,10 @@ export interface RadialChartProps extends CommonProps {
   onDataPointClick?: (event: CustomEvent<{ value: unknown; payload: unknown; dataIndex: number }>) => void;
 }
 
+const radialChartMargin = { right: 30, left: 30, top: 30, bottom: 30 };
+const radialBarBackground = { fill: ThemingParameters.sapContent_ImagePlaceholderBackground };
+const radialBarLabelStyle = { fontSize: ThemingParameters.sapFontHeader3Size, fill: ThemingParameters.sapTextColor };
+
 /**
  * <code>import { RadialChart } from '@ui5/webcomponents-react-charts/lib/next/RadialChart';</code>
  * **This component is under active development. The API is not stable yet and might change without further notice.**
@@ -52,8 +56,8 @@ const RadialChart: FC<RadialChartProps> = forwardRef((props: RadialChartProps, r
       tooltip={tooltip}
       slot={slot}
     >
-      <RadialBarChartLib
-        margin={{ right: 30, left: 30, top: 30, bottom: 30 }}
+      <RadialBarChart
+        margin={radialChartMargin}
         innerRadius="90%"
         outerRadius="100%"
         barSize={10}
@@ -65,7 +69,7 @@ const RadialChart: FC<RadialChartProps> = forwardRef((props: RadialChartProps, r
       >
         <PolarAngleAxis type="number" domain={range} tick={false} />
         <RadialBar
-          background={{ fill: ThemingParameters.sapContent_ImagePlaceholderBackground }}
+          background={radialBarBackground}
           dataKey="value"
           cornerRadius="50%"
           fill={color ?? `var(--sapChart_OrderedColor_${(0 % 12) + 1})`}
@@ -77,11 +81,11 @@ const RadialChart: FC<RadialChartProps> = forwardRef((props: RadialChartProps, r
           textAnchor="middle"
           dominantBaseline="middle"
           className="progress-label"
-          style={{ fontSize: ThemingParameters.sapFontHeader3Size, fill: ThemingParameters.sapTextColor }}
+          style={radialBarLabelStyle}
         >
           {displayValue}
         </text>
-      </RadialBarChartLib>
+      </RadialBarChart>
     </ChartContainer>
   );
 });