@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

package/dist/docs/components/radialBarCharts.md

@@ -3,12 +3,10 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/radialBarCharts
-*Captured:* 2026-03-06T10:41:33.419Z
+*Captured:* 2026-04-20T12:55:42.487Z
 
 ## RadialBarChart
 
-> Note: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.
-
 ### Example: Example 1
 
 Multiple RadialBarChart bars Age 18-24
@@ -40,50 +38,48 @@ type CustomData2 = {
     color?: string;
 };
 
-export default () => {
-    return (
-        <>
-            <label>Multiple RadialBarChart bars</label>
-            <div className='display-flex flex-wrap gap-15'>
-                <div className='panel panel-default panel-body height-300 aspect-ratio-1'>
-                    <RadialBarChart
-                        cx={120}
-                        cy={180}
-                        data={data}
-                        dataKey='uv'
-                        cornerRadius={0}
-                        showBarLabel
-                        tooltip
-                        legend={<Legend layout='horizontal' verticalAlign='bottom' align='center' />}
-                    />
-                </div>
-                <div className='panel panel-default panel-body height-300 aspect-ratio-1'>
-                    <RadialBarChart
-                        data={data2}
-                        dataKey='value'
-                        startAngle={90}
-                        endAngle={-270}
-                        innerRadius='80%'
-                        range={[0, 100]}
-                        legend={
-                            <Legend
-                                layout='vertical'
-                                verticalAlign='middle'
-                                align='center'
-                                formatter={(label: string | number, entry: LegendPayload) => (
-                                    <span className='text-color-darker'>
-                                        <span className='text-medium margin-right-5'>{`${entry.payload?.value}%`}</span>
-                                        <span>{label}</span>
-                                    </span>
-                                )}
-                            />
-                        }
-                    />
-                </div>
+export default () => (
+    <>
+        <label>Multiple RadialBarChart bars</label>
+        <div className='display-flex flex-wrap gap-15'>
+            <div className='panel panel-default panel-body height-300 aspect-ratio-1'>
+                <RadialBarChart
+                    cx={120}
+                    cy={180}
+                    data={data}
+                    dataKey='uv'
+                    cornerRadius={0}
+                    showBarLabel
+                    tooltip
+                    legend={<Legend layout='horizontal' verticalAlign='bottom' align='center' />}
+                />
             </div>
-        </>
-    );
-};
+            <div className='panel panel-default panel-body height-300 aspect-ratio-1'>
+                <RadialBarChart
+                    data={data2}
+                    dataKey='value'
+                    startAngle={90}
+                    endAngle={-270}
+                    innerRadius='80%'
+                    range={[0, 100]}
+                    legend={
+                        <Legend
+                            layout='vertical'
+                            verticalAlign='middle'
+                            align='center'
+                            formatter={(label: string | number, entry: LegendPayload) => (
+                                <span className='text-color-darker'>
+                                    <span className='text-medium margin-right-5'>{`${entry.payload?.value}%`}</span>
+                                    <span>{label}</span>
+                                </span>
+                            )}
+                        />
+                    }
+                />
+            </div>
+        </div>
+    </>
+);
 
 const data: CustomData[] = [
     {
@@ -128,7 +124,7 @@ const data2: CustomData2[] = [
                         <div class="recharts-legend-wrapper" style="position: absolute; width: 258px; height: auto; left: 5px; bottom: 5px;">
                             <ul class="recharts-default-legend" style="padding: 0px; margin: 0px; text-align: center;">
                                 <li class="recharts-legend-item legend-item-0" style="display: inline-block; margin-right: 10px;">
-                                    <svg aria-label="[object Object] legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                                    <svg aria-label="Age 18-24 legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                         <title>
                                         </title>
                                         <desc>
@@ -141,7 +137,7 @@ const data2: CustomData2[] = [
                                     </span>
                                 </li>
                                 <li class="recharts-legend-item legend-item-1" style="display: inline-block; margin-right: 10px;">
-                                    <svg aria-label="[object Object] legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                                    <svg aria-label="Age 25-29 legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                         <title>
                                         </title>
                                         <desc>
@@ -154,7 +150,7 @@ const data2: CustomData2[] = [
                                     </span>
                                 </li>
                                 <li class="recharts-legend-item legend-item-2" style="display: inline-block; margin-right: 10px;">
-                                    <svg aria-label="[object Object] legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                                    <svg aria-label="Age 30-34 legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                         <title>
                                         </title>
                                         <desc>
@@ -167,7 +163,7 @@ const data2: CustomData2[] = [
                                     </span>
                                 </li>
                                 <li class="recharts-legend-item legend-item-3" style="display: inline-block; margin-right: 10px;">
-                                    <svg aria-label="[object Object] legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                                    <svg aria-label="Age 35-39 legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                         <title>
                                         </title>
                                         <desc>
@@ -192,10 +188,11 @@ const data2: CustomData2[] = [
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
-                                <path name="Age 18-24" cx="120" cy="180" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 70.3925,180
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                <g class="recharts-layer recharts-shape">
+                                    <path name="Age 18-24" cx="120" cy="180" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 70.3925,180
     A 49.6075,49.6075,0,
     0,1,
     169.6075,180
@@ -203,8 +200,10 @@ const data2: CustomData2[] = [
             A 34.6075,34.6075,0,
             0,0,
             85.3925,180 Z">
-                                </path>
-                                <path name="Age 25-29" cx="120" cy="180" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 51.3175,180
+                                    </path>
+                                </g>
+                                <g class="recharts-layer recharts-shape">
+                                    <path name="Age 25-29" cx="120" cy="180" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 51.3175,180
     A 68.6825,68.6825,0,
     0,1,
     188.6825,180
@@ -212,8 +211,10 @@ const data2: CustomData2[] = [
             A 53.6825,53.6825,0,
             0,0,
             66.3175,180 Z">
-                                </path>
-                                <path name="Age 30-34" cx="120" cy="180" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 32.2425,180
+                                    </path>
+                                </g>
+                                <g class="recharts-layer recharts-shape">
+                                    <path name="Age 30-34" cx="120" cy="180" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 32.2425,180
     A 87.7575,87.7575,0,
     0,1,
     207.7575,180
@@ -221,8 +222,10 @@ const data2: CustomData2[] = [
             A 72.7575,72.7575,0,
             0,0,
             47.2425,180 Z">
-                                </path>
-                                <path name="Age 35-39" color="color-warmup-corn" cx="120" cy="180" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 13.1675,180
+                                    </path>
+                                </g>
+                                <g class="recharts-layer recharts-shape">
+                                    <path name="Age 35-39" color="color-warmup-corn" cx="120" cy="180" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 13.1675,180
     A 106.8325,106.8325,0,
     0,1,
     226.8325,180
@@ -230,7 +233,8 @@ const data2: CustomData2[] = [
             A 91.8325,91.8325,0,
             0,0,
             28.1675,180 Z">
-                                </path>
+                                    </path>
+                                </g>
                             </g>
                             <defs>
                                 <clipPath id="recharts1-clip">
@@ -238,48 +242,54 @@ const data2: CustomData2[] = [
                                     </rect>
                                 </clipPath>
                             </defs>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                 <g class="recharts-layer recharts-area">
                                     <g class="recharts-layer recharts-radial-bar-background">
                                     </g>
                                     <g class="recharts-layer recharts-radial-bar-sectors">
-                                        <g class="recharts-layer">
+                                        <g class="recharts-layer recharts-shape">
                                             <path name="Age 18-24" cx="120" cy="180" fill="#ef7186 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 95.1104,137.0883
     A 49.6075,49.6075,0,
     0,1,
-    127.252,130.9254
-  L 125.0592,145.7643
+    124.6242,130.6085
+  L 123.2259,145.5432
             A 34.6075,34.6075,0,
             0,0,
             102.6364,150.0637 Z">
                                             </path>
+                                        </g>
+                                        <g class="recharts-layer recharts-shape">
                                             <path name="Age 25-29" cx="120" cy="180" fill="#e878b6 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 85.5399,120.588
     A 68.6825,68.6825,0,
     0,1,
-    123.0619,111.3858
-  L 122.3932,126.3709
+    119.9546,111.3175
+  L 119.9645,126.3175
             A 53.6825,53.6825,0,
             0,0,
             93.0659,133.5633 Z">
                                             </path>
+                                        </g>
+                                        <g class="recharts-layer recharts-shape">
                                             <path name="Age 30-34" cx="120" cy="180" fill="#dc82e9 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 75.9695,104.0876
     A 87.7575,87.7575,0,
     0,0,
-    53.4484,122.7964
-  L 64.8237,132.5739
+    54.9936,121.0463
+  L 66.1048,131.123
             A 72.7575,72.7575,0,
             0,1,
             83.4954,117.063 Z">
                                             </path>
+                                        </g>
+                                        <g class="recharts-layer recharts-shape">
                                             <path name="Age 35-39" color="color-warmup-corn" cx="120" cy="180" fill="#fde082 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 66.399,87.5873
     A 106.8325,106.8325,0,
     0,1,
-    83.3685,79.6441
-  L 88.5118,93.7347
+    81.9733,80.1644
+  L 87.3125,94.182
             A 91.8325,91.8325,0,
             0,0,
             73.9249,100.5626 Z">
@@ -288,19 +298,19 @@ const data2: CustomData2[] = [
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                             </g>
                         </svg>
                     </div>
@@ -316,7 +326,7 @@ const data2: CustomData2[] = [
                         <div class="recharts-legend-wrapper" style="position: absolute; width: auto; height: auto; left: 67.3672px; top: 114px;">
                             <ul class="recharts-default-legend" style="padding: 0px; margin: 0px; text-align: left;">
                                 <li class="recharts-legend-item legend-item-0" style="display: block; margin-right: 10px;">
-                                    <svg aria-label="[object Object] legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                                    <svg aria-label="Registrations legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                         <title>
                                         </title>
                                         <desc>
@@ -332,7 +342,7 @@ const data2: CustomData2[] = [
                                     </span>
                                 </li>
                                 <li class="recharts-legend-item legend-item-1" style="display: block; margin-right: 10px;">
-                                    <svg aria-label="[object Object] legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                                    <svg aria-label="Logins legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                         <title>
                                         </title>
                                         <desc>
@@ -354,10 +364,11 @@ const data2: CustomData2[] = [
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
-                                <path name="Registrations" color="color-coldplay-fountain" cx="134" cy="134" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 134,19.51
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                <g class="recharts-layer recharts-shape">
+                                    <path name="Registrations" color="color-coldplay-fountain" cx="134" cy="134" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 134,19.51
     A 114.49,114.49,0,
     1,1,
     133.998,19.51
@@ -365,8 +376,10 @@ const data2: CustomData2[] = [
             A 104.49,104.49,0,
             1,0,
             134,29.51 Z">
-                                </path>
-                                <path name="Logins" color="color-coldplay-moos" cx="134" cy="134" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 134,6.61
+                                    </path>
+                                </g>
+                                <g class="recharts-layer recharts-shape">
+                                    <path name="Logins" color="color-coldplay-moos" cx="134" cy="134" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 134,6.61
     A 127.39,127.39,0,
     1,1,
     133.9978,6.61
@@ -374,7 +387,8 @@ const data2: CustomData2[] = [
             A 117.39,117.39,0,
             1,0,
             134,16.61 Z">
-                                </path>
+                                    </path>
+                                </g>
                             </g>
                             <defs>
                                 <clipPath id="recharts2-clip">
@@ -382,31 +396,33 @@ const data2: CustomData2[] = [
                                     </rect>
                                 </clipPath>
                             </defs>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                 <g class="recharts-layer recharts-area">
                                     <g class="recharts-layer recharts-radial-bar-background">
                                     </g>
                                     <g class="recharts-layer recharts-radial-bar-sectors">
-                                        <g class="recharts-layer">
+                                        <g class="recharts-layer recharts-shape">
                                             <path name="Registrations" color="color-coldplay-fountain" cx="134" cy="134" fill="#67abc5 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 134,24.6242
     A5,5,0,0,1,139.2283,19.6294
-    A114.49,114.49,0,0,1,244.4506,103.8566
-    A5,5,0,0,1,240.7218,110.0517
-  L240.7218,110.0517
-      A5,5,0,0,1,234.8034,106.4895
+    A114.49,114.49,0,0,1,240.5933,92.2169
+    A5,5,0,0,1,237.5484,98.7753
+  L237.5484,98.7753
+      A5,5,0,0,1,231.283,95.8664
       A104.49,104.49,0,0,0,138.7717,29.619
       A5,5,0,0,1,134,24.6242Z">
                                             </path>
+                                        </g>
+                                        <g class="recharts-layer recharts-shape">
                                             <path name="Logins" color="color-coldplay-moos" cx="134" cy="134" fill="#a1daa3 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 134,11.7122
     A5,5,0,0,1,139.2043,6.7163
-    A127.39,127.39,0,0,1,246.8021,74.8063
-    A5,5,0,0,1,244.5152,81.6483
-  L244.5152,81.6483
-      A5,5,0,0,1,237.9473,79.453
+    A127.39,127.39,0,0,1,241.0556,64.9543
+    A5,5,0,0,1,239.3898,71.9734
+  L239.3898,71.9734
+      A5,5,0,0,1,232.6518,70.3743
       A117.39,117.39,0,0,0,138.7957,16.708
       A5,5,0,0,1,134,11.7122Z">
                                             </path>
@@ -414,9 +430,9 @@ const data2: CustomData2[] = [
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                 <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                     <path angle="0" cx="134" cy="134" orientation="outer" radius="129" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M134,5L209.8243,29.6368L256.6863,94.1368L256.6863,173.8632L209.8243,238.3632L134,263L58.1757,238.3632L11.3137,173.8632L11.3137,94.1368L58.1757,29.6368L134,5Z">
                                     </path>
@@ -464,15 +480,15 @@ const data2: CustomData2[] = [
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                             </g>
                         </svg>
                     </div>
@@ -605,10 +621,11 @@ const data = [
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
-                                <path name="Ranking" color="brand-success" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 84,7.22
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                <g class="recharts-layer recharts-shape">
+                                    <path name="Ranking" color="brand-success" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 84,7.22
     A 76.78,76.78,0,
     1,1,
     83.9987,7.22
@@ -616,7 +633,8 @@ const data = [
             A 64.78,64.78,0,
             1,0,
             84,19.22 Z">
-                                </path>
+                                    </path>
+                                </g>
                             </g>
                             <defs>
                                 <clipPath id="recharts3-clip">
@@ -625,22 +643,22 @@ const data = [
                                 </clipPath>
                             </defs>
                             <text x="84" y="88" text-anchor="middle" dominant-baseline="middle" class="radialbarchart-text" style="font-size: 250%; font-weight: normal; fill: rgb(92, 184, 92);">82%</text>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                 <g class="recharts-layer recharts-area">
                                     <g class="recharts-layer recharts-radial-bar-background">
                                     </g>
                                     <g class="recharts-layer recharts-radial-bar-sectors">
-                                        <g class="recharts-layer">
+                                        <g class="recharts-layer recharts-shape">
                                             <path name="Ranking" color="brand-success" cx="84" cy="84" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 84,13.4748
     A6,6,0,0,1,90.5086,7.4964
-    A76.78,76.78,0,1,1,7.5875,76.497
-    A6,6,0,0,1,14.6492,71.1833
-  L14.6492,71.1833
-      A6,6,0,0,1,19.53,77.6697
+    A76.78,76.78,0,1,1,7.7722,74.8078
+    A6,6,0,0,1,14.9498,69.6516
+  L14.9498,69.6516
+      A6,6,0,0,1,19.6859,76.2445
       A64.78,64.78,0,1,0,89.4914,19.4532
       A6,6,0,0,1,84,13.4748Z">
                                             </path>
@@ -648,9 +666,9 @@ const data = [
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                 <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                     <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M84,5L130.435,20.0877L159.1335,59.5877L159.1335,108.4123L130.435,147.9123L84,163L37.565,147.9123L8.8665,108.4123L8.8665,59.5877L37.565,20.0877L84,5Z">
                                     </path>
@@ -698,15 +716,15 @@ const data = [
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                             </g>
                         </svg>
                     </div>
@@ -724,10 +742,11 @@ const data = [
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
-                                <path name="Ranking" color="brand-success" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 19.1954,121.4149
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                <g class="recharts-layer recharts-shape">
+                                    <path name="Ranking" color="brand-success" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 19.1954,121.4149
     A3,3,0,0,1,15.0393,120.2116
     A77.89,77.89,0,0,1,149.8405,42.3841
     A3,3,0,0,1,148.8046,46.5851
@@ -735,7 +754,8 @@ const data = [
       A3,3,0,0,1,144.7687,45.5899
       A71.89,71.89,0,0,0,20.3515,117.4221
       A3,3,0,0,1,19.1954,121.4149Z">
-                                </path>
+                                    </path>
+                                </g>
                             </g>
                             <defs>
                                 <clipPath id="recharts4-clip">
@@ -744,22 +764,22 @@ const data = [
                                 </clipPath>
                             </defs>
                             <text x="84" y="88" text-anchor="middle" dominant-baseline="middle" class="radialbarchart-text" style="font-size: 400%; font-weight: 300; fill: rgb(92, 184, 92);">82</text>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                 <g class="recharts-layer recharts-area">
                                     <g class="recharts-layer recharts-radial-bar-background">
                                     </g>
                                     <g class="recharts-layer recharts-radial-bar-sectors">
-                                        <g class="recharts-layer">
+                                        <g class="recharts-layer recharts-shape">
                                             <path name="Ranking" color="brand-success" cx="84" cy="84" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 19.1954,121.4149
     A3,3,0,0,1,15.0393,120.2116
-    A77.89,77.89,0,0,1,107.9912,9.8969
-    A3,3,0,0,1,109.882,13.7887
-  L109.882,13.7887
-      A3,3,0,0,1,106.1431,15.6052
+    A77.89,77.89,0,0,1,108.8097,10.1669
+    A3,3,0,0,1,110.6573,14.0793
+  L110.6573,14.0793
+      A3,3,0,0,1,106.8986,15.8544
       A71.89,71.89,0,0,0,20.3515,117.4221
       A3,3,0,0,1,19.1954,121.4149Z">
                                             </path>
@@ -767,9 +787,9 @@ const data = [
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                 <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                     <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M15.584,123.5L6.7263,100.425L5.4328,75.7423L11.8299,51.8678L25.2916,31.1387L44.5,15.584L67.575,6.7263L92.2577,5.4328L116.1322,11.8299L136.8613,25.2916L152.416,44.5L15.584,123.5Z">
                                     </path>
@@ -821,15 +841,15 @@ const data = [
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                             </g>
                         </svg>
                     </div>
@@ -1031,10 +1051,11 @@ const loremIpsum2 = {
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
-                                <path name="Fuel level" color="color-coldplay-fountain" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 84,6.11
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                <g class="recharts-layer recharts-shape">
+                                    <path name="Fuel level" color="color-coldplay-fountain" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 84,6.11
     A 77.89,77.89,0,
     1,1,
     83.9986,6.11
@@ -1042,7 +1063,8 @@ const loremIpsum2 = {
             A 71.89,71.89,0,
             1,0,
             84,12.11 Z">
-                                </path>
+                                    </path>
+                                </g>
                             </g>
                             <defs>
                                 <clipPath id="recharts5-clip">
@@ -1050,16 +1072,16 @@ const loremIpsum2 = {
                                     </rect>
                                 </clipPath>
                             </defs>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                 <g class="recharts-layer recharts-area">
                                     <g class="recharts-layer recharts-radial-bar-background">
                                     </g>
                                     <g class="recharts-layer recharts-radial-bar-sectors">
-                                        <g class="recharts-layer">
+                                        <g class="recharts-layer recharts-shape">
                                             <path name="Fuel level" color="color-coldplay-fountain" cx="84" cy="84" fill="#67abc5 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 84,9.1701
     A3,3,0,0,1,87.1202,6.1725
     A77.89,77.89,0,0,1,161.478,75.9992
@@ -1073,9 +1095,9 @@ const loremIpsum2 = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                 <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                     <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M84,5L130.435,20.0877L159.1335,59.5877L159.1335,108.4123L130.435,147.9123L84,163L37.565,147.9123L8.8665,108.4123L8.8665,59.5877L37.565,20.0877L84,5Z">
                                     </path>
@@ -1123,15 +1145,15 @@ const loremIpsum2 = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                             </g>
                         </svg>
                     </div>
@@ -1153,10 +1175,11 @@ const loremIpsum2 = {
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
-                                <path name="Charge level" color="color-coldplay-fountain" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 84,6.11
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                <g class="recharts-layer recharts-shape">
+                                    <path name="Charge level" color="color-coldplay-fountain" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 84,6.11
     A 77.89,77.89,0,
     1,1,
     83.9986,6.11
@@ -1164,7 +1187,8 @@ const loremIpsum2 = {
             A 71.89,71.89,0,
             1,0,
             84,12.11 Z">
-                                </path>
+                                    </path>
+                                </g>
                             </g>
                             <defs>
                                 <clipPath id="recharts6-clip">
@@ -1172,16 +1196,16 @@ const loremIpsum2 = {
                                     </rect>
                                 </clipPath>
                             </defs>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                 <g class="recharts-layer recharts-area">
                                     <g class="recharts-layer recharts-radial-bar-background">
                                     </g>
                                     <g class="recharts-layer recharts-radial-bar-sectors">
-                                        <g class="recharts-layer">
+                                        <g class="recharts-layer recharts-shape">
                                             <path name="Charge level" color="color-coldplay-fountain" cx="84" cy="84" fill="#67abc5 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 84,9.1701
     A3,3,0,0,1,87.1202,6.1725
     A77.89,77.89,0,0,1,139.5511,138.5979
@@ -1195,9 +1219,9 @@ const loremIpsum2 = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                 <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                     <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M84,5L130.435,20.0877L159.1335,59.5877L159.1335,108.4123L130.435,147.9123L84,163L37.565,147.9123L8.8665,108.4123L8.8665,59.5877L37.565,20.0877L84,5Z">
                                     </path>
@@ -1245,15 +1269,15 @@ const loremIpsum2 = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                             </g>
                         </svg>
                     </div>
@@ -1278,10 +1302,11 @@ const loremIpsum2 = {
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
-                                <path name="Lorem ipsum" color="color-warmup-charm" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 19.1954,121.4149
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                <g class="recharts-layer recharts-shape">
+                                    <path name="Lorem ipsum" color="color-warmup-charm" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 19.1954,121.4149
     A3,3,0,0,1,15.0393,120.2116
     A77.89,77.89,0,1,1,152.9607,120.2116
     A3,3,0,0,1,148.8046,121.4149
@@ -1289,7 +1314,8 @@ const loremIpsum2 = {
       A3,3,0,0,1,147.6485,117.4221
       A71.89,71.89,0,1,0,20.3515,117.4221
       A3,3,0,0,1,19.1954,121.4149Z">
-                                </path>
+                                    </path>
+                                </g>
                             </g>
                             <defs>
                                 <clipPath id="recharts7-clip">
@@ -1297,16 +1323,16 @@ const loremIpsum2 = {
                                     </rect>
                                 </clipPath>
                             </defs>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                 <g class="recharts-layer recharts-area">
                                     <g class="recharts-layer recharts-radial-bar-background">
                                     </g>
                                     <g class="recharts-layer recharts-radial-bar-sectors">
-                                        <g class="recharts-layer">
+                                        <g class="recharts-layer recharts-shape">
                                             <path name="Lorem ipsum" color="color-warmup-charm" cx="84" cy="84" fill="#c9778d " class="recharts-sector recharts-radial-bar-sector undefined" d="M 19.1954,121.4149
     A3,3,0,0,1,15.0393,120.2116
     A77.89,77.89,0,1,1,157.0541,56.9825
@@ -1320,9 +1346,9 @@ const loremIpsum2 = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                 <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                     <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M15.584,123.5L5.4328,92.2577L8.8665,59.5877L25.2916,31.1387L51.8678,11.8299L84,5L116.1322,11.8299L142.7084,31.1387L159.1335,59.5877L162.5672,92.2577L152.416,123.5L15.584,123.5Z">
                                     </path>
@@ -1374,15 +1400,15 @@ const loremIpsum2 = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                             </g>
                         </svg>
                     </div>
@@ -1404,10 +1430,11 @@ const loremIpsum2 = {
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
-                                <path name="Lorem ipsum dolor sit amet" color="color-coldplay-moos" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 46.5851,148.8046
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                <g class="recharts-layer recharts-shape">
+                                    <path name="Lorem ipsum dolor sit amet" color="color-coldplay-moos" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 46.5851,148.8046
     A3,3,0,0,1,42.3841,149.8405
     A77.89,77.89,0,1,1,136.826,26.7614
     A3,3,0,0,1,136.9127,31.0873
@@ -1415,7 +1442,8 @@ const loremIpsum2 = {
       A3,3,0,0,1,132.7568,31.1706
       A71.89,71.89,0,1,0,45.5899,144.7687
       A3,3,0,0,1,46.5851,148.8046Z">
-                                </path>
+                                    </path>
+                                </g>
                             </g>
                             <defs>
                                 <clipPath id="recharts8-clip">
@@ -1423,16 +1451,16 @@ const loremIpsum2 = {
                                     </rect>
                                 </clipPath>
                             </defs>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                 <g class="recharts-layer recharts-area">
                                     <g class="recharts-layer recharts-radial-bar-background">
                                     </g>
                                     <g class="recharts-layer recharts-radial-bar-sectors">
-                                        <g class="recharts-layer">
+                                        <g class="recharts-layer recharts-shape">
                                             <path name="Lorem ipsum dolor sit amet" color="color-coldplay-moos" cx="84" cy="84" fill="#a1daa3 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 46.5851,148.8046
     A3,3,0,0,1,42.3841,149.8405
     A77.89,77.89,0,0,1,55.2689,11.6027
@@ -1446,9 +1474,9 @@ const loremIpsum2 = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                 <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                     <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M44.5,152.416L23.9279,135.3064L10.2471,112.3111L5.0271,86.068L8.8665,59.5877L21.3251,35.9078L40.9735,17.745L65.5578,7.1828L92.2577,5.4328L118.0104,12.6958L139.8614,28.1386L44.5,152.416Z">
                                     </path>
@@ -1500,15 +1528,15 @@ const loremIpsum2 = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                             </g>
                         </svg>
                     </div>
@@ -1583,42 +1611,38 @@ Server Connection
 ```tsx
 import RadialBarChart from '@rio-cloud/rio-uikit/RadialBarChart';
 
-export default () => {
-    return (
-        <>
-            <label>Example for error visualization</label>
-            <div className='panel panel-default panel-body shadow-default margin-bottom-0 height-auto'>
-                <div className='margin-bottom-15 text-color-darker text-medium text-size-16'>
-                    Most reported problems
-                </div>
+export default () => (
+    <>
+        <label>Example for error visualization</label>
+        <div className='panel panel-default panel-body shadow-default margin-bottom-0 height-auto'>
+            <div className='margin-bottom-15 text-color-darker text-medium text-size-16'>Most reported problems</div>
 
-                <div className='display-flex flex-wrap gap-25'>
-                    {data.map(item => (
-                        <div key={item.name} className='display-flex flex-column justify-content-center'>
-                            <div className='position-relative width-100 aspect-ratio-1'>
-                                <RadialBarChart
-                                    data={[item]}
-                                    dataKey='value'
-                                    startAngle={270}
-                                    endAngle={-90}
-                                    innerRadius='90%'
-                                    legend={false}
-                                    range={[0, 100]}
-                                />
-                                <div className='position-absolute top-50pct left-50pct translate-x-50pct-y-50pct'>
-                                    <div className='text-color-darker text-size-20 text-medium text-center'>
-                                        {`${item.value}%`}
-                                    </div>
+            <div className='display-flex flex-wrap gap-25'>
+                {data.map(item => (
+                    <div key={item.name} className='display-flex flex-column justify-content-center'>
+                        <div className='position-relative width-100 aspect-ratio-1'>
+                            <RadialBarChart
+                                data={[item]}
+                                dataKey='value'
+                                startAngle={270}
+                                endAngle={-90}
+                                innerRadius='90%'
+                                legend={false}
+                                range={[0, 100]}
+                            />
+                            <div className='position-absolute top-50pct left-50pct translate-x-50pct-y-50pct'>
+                                <div className='text-color-darker text-size-20 text-medium text-center'>
+                                    {`${item.value}%`}
                                 </div>
                             </div>
-                            <div className='text-center text-color-darker'>{item.name}</div>
                         </div>
-                    ))}
-                </div>
+                        <div className='text-center text-color-darker'>{item.name}</div>
+                    </div>
+                ))}
             </div>
-        </>
-    );
-};
+        </div>
+    </>
+);
 
 const data = [
     {
@@ -1657,10 +1681,11 @@ const data = [
                                     </title>
                                     <desc>
                                     </desc>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                                     </g>
-                                    <g tabindex="-1">
-                                        <path name="App" color="brand-danger" cx="50" cy="50" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 50,93.95
+                                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                        <g class="recharts-layer recharts-shape">
+                                            <path name="App" color="brand-danger" cx="50" cy="50" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 50,93.95
     A 43.95,43.95,0,
     1,1,
     50.0008,93.95
@@ -1668,7 +1693,8 @@ const data = [
             A 40.95,40.95,0,
             1,0,
             50,90.95 Z">
-                                        </path>
+                                            </path>
+                                        </g>
                                     </g>
                                     <defs>
                                         <clipPath id="recharts9-clip">
@@ -1676,16 +1702,16 @@ const data = [
                                             </rect>
                                         </clipPath>
                                     </defs>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                                         <g class="recharts-layer recharts-area">
                                             <g class="recharts-layer recharts-radial-bar-background">
                                             </g>
                                             <g class="recharts-layer recharts-radial-bar-sectors">
-                                                <g class="recharts-layer">
+                                                <g class="recharts-layer recharts-shape">
                                                     <path name="App" color="brand-danger" cx="50" cy="50" fill="#e22837 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 50,92.4235
     A1.5,1.5,0,0,1,48.447,93.9226
     A43.95,43.95,0,0,1,29.8935,10.9189
@@ -1699,9 +1725,9 @@ const data = [
                                             </g>
                                         </g>
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                                         <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                             <path angle="0" cx="50" cy="50" orientation="outer" radius="45" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M50,95L23.5497,86.4058L7.2025,63.9058L7.2025,36.0942L23.5497,13.5942L50,5L76.4503,13.5942L92.7975,36.0942L92.7975,63.9058L76.4503,86.4058L50,95Z">
                                             </path>
@@ -1749,15 +1775,15 @@ const data = [
                                             </g>
                                         </g>
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                                     </g>
                                 </svg>
                             </div>
@@ -1781,10 +1807,11 @@ const data = [
                                     </title>
                                     <desc>
                                     </desc>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                                     </g>
-                                    <g tabindex="-1">
-                                        <path name="Website" color="brand-danger" cx="50" cy="50" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 50,93.95
+                                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                        <g class="recharts-layer recharts-shape">
+                                            <path name="Website" color="brand-danger" cx="50" cy="50" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 50,93.95
     A 43.95,43.95,0,
     1,1,
     50.0008,93.95
@@ -1792,7 +1819,8 @@ const data = [
             A 40.95,40.95,0,
             1,0,
             50,90.95 Z">
-                                        </path>
+                                            </path>
+                                        </g>
                                     </g>
                                     <defs>
                                         <clipPath id="recharts10-clip">
@@ -1800,16 +1828,16 @@ const data = [
                                             </rect>
                                         </clipPath>
                                     </defs>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                                         <g class="recharts-layer recharts-area">
                                             <g class="recharts-layer recharts-radial-bar-background">
                                             </g>
                                             <g class="recharts-layer recharts-radial-bar-sectors">
-                                                <g class="recharts-layer">
+                                                <g class="recharts-layer recharts-shape">
                                                     <path name="Website" color="brand-danger" cx="50" cy="50" fill="#e22837 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 50,92.4235
     A1.5,1.5,0,0,1,48.447,93.9226
     A43.95,43.95,0,0,1,16.9187,21.065
@@ -1823,9 +1851,9 @@ const data = [
                                             </g>
                                         </g>
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                                         <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                             <path angle="0" cx="50" cy="50" orientation="outer" radius="45" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M50,95L23.5497,86.4058L7.2025,63.9058L7.2025,36.0942L23.5497,13.5942L50,5L76.4503,13.5942L92.7975,36.0942L92.7975,63.9058L76.4503,86.4058L50,95Z">
                                             </path>
@@ -1873,15 +1901,15 @@ const data = [
                                             </g>
                                         </g>
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                                     </g>
                                 </svg>
                             </div>
@@ -1905,10 +1933,11 @@ const data = [
                                     </title>
                                     <desc>
                                     </desc>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                                     </g>
-                                    <g tabindex="-1">
-                                        <path name="Server Connection" color="brand-danger" cx="50" cy="50" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 50,93.95
+                                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                        <g class="recharts-layer recharts-shape">
+                                            <path name="Server Connection" color="brand-danger" cx="50" cy="50" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 50,93.95
     A 43.95,43.95,0,
     1,1,
     50.0008,93.95
@@ -1916,7 +1945,8 @@ const data = [
             A 40.95,40.95,0,
             1,0,
             50,90.95 Z">
-                                        </path>
+                                            </path>
+                                        </g>
                                     </g>
                                     <defs>
                                         <clipPath id="recharts11-clip">
@@ -1924,16 +1954,16 @@ const data = [
                                             </rect>
                                         </clipPath>
                                     </defs>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                                         <g class="recharts-layer recharts-area">
                                             <g class="recharts-layer recharts-radial-bar-background">
                                             </g>
                                             <g class="recharts-layer recharts-radial-bar-sectors">
-                                                <g class="recharts-layer">
+                                                <g class="recharts-layer recharts-shape">
                                                     <path name="Server Connection" color="brand-danger" cx="50" cy="50" fill="#e22837 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 50,92.4235
     A1.5,1.5,0,0,1,48.447,93.9226
     A43.95,43.95,0,0,1,8.7071,65.0498
@@ -1947,9 +1977,9 @@ const data = [
                                             </g>
                                         </g>
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                                         <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                             <path angle="0" cx="50" cy="50" orientation="outer" radius="45" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M50,95L23.5497,86.4058L7.2025,63.9058L7.2025,36.0942L23.5497,13.5942L50,5L76.4503,13.5942L92.7975,36.0942L92.7975,63.9058L76.4503,86.4058L50,95Z">
                                             </path>
@@ -1997,15 +2027,15 @@ const data = [
                                             </g>
                                         </g>
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                                     </g>
-                                    <g tabindex="-1">
+                                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                                     </g>
                                 </svg>
                             </div>
@@ -2184,10 +2214,11 @@ const loremIpsum = {
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
-                                <path name="Fuel level" color="color-coldplay-fountain" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 19.1954,121.4149
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                <g class="recharts-layer recharts-shape">
+                                    <path name="Fuel level" color="color-coldplay-fountain" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 19.1954,121.4149
     A3,3,0,0,1,15.0393,120.2116
     A77.89,77.89,0,1,1,152.9607,120.2116
     A3,3,0,0,1,148.8046,121.4149
@@ -2195,7 +2226,8 @@ const loremIpsum = {
       A3,3,0,0,1,147.6485,117.4221
       A71.89,71.89,0,1,0,20.3515,117.4221
       A3,3,0,0,1,19.1954,121.4149Z">
-                                </path>
+                                    </path>
+                                </g>
                             </g>
                             <defs>
                                 <clipPath id="recharts12-clip">
@@ -2203,16 +2235,16 @@ const loremIpsum = {
                                     </rect>
                                 </clipPath>
                             </defs>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                 <g class="recharts-layer recharts-area">
                                     <g class="recharts-layer recharts-radial-bar-background">
                                     </g>
                                     <g class="recharts-layer recharts-radial-bar-sectors">
-                                        <g class="recharts-layer">
+                                        <g class="recharts-layer recharts-shape">
                                             <path name="Fuel level" color="color-coldplay-fountain" cx="84" cy="84" fill="#67abc5 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 19.1954,121.4149
     A3,3,0,0,1,15.0393,120.2116
     A77.89,77.89,0,0,1,13.5834,50.7079
@@ -2226,9 +2258,9 @@ const loremIpsum = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                 <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                     <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M15.584,123.5L5.4328,92.2577L8.8665,59.5877L25.2916,31.1387L51.8678,11.8299L84,5L116.1322,11.8299L142.7084,31.1387L159.1335,59.5877L162.5672,92.2577L152.416,123.5L15.584,123.5Z">
                                     </path>
@@ -2280,15 +2312,15 @@ const loremIpsum = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                             </g>
                         </svg>
                     </div>
@@ -2316,10 +2348,11 @@ const loremIpsum = {
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
-                                <path name="Charge level" color="color-coldplay-fountain" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 9.1701,84
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                <g class="recharts-layer recharts-shape">
+                                    <path name="Charge level" color="color-coldplay-fountain" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 9.1701,84
     A3,3,0,0,1,6.1725,80.8798
     A77.89,77.89,0,0,1,161.8275,80.8798
     A3,3,0,0,1,158.8299,84
@@ -2327,7 +2360,8 @@ const loremIpsum = {
       A3,3,0,0,1,155.8323,81.1202
       A71.89,71.89,0,0,0,12.1677,81.1202
       A3,3,0,0,1,9.1701,84Z">
-                                </path>
+                                    </path>
+                                </g>
                             </g>
                             <defs>
                                 <clipPath id="recharts13-clip">
@@ -2335,16 +2369,16 @@ const loremIpsum = {
                                     </rect>
                                 </clipPath>
                             </defs>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                 <g class="recharts-layer recharts-area">
                                     <g class="recharts-layer recharts-radial-bar-background">
                                     </g>
                                     <g class="recharts-layer recharts-radial-bar-sectors">
-                                        <g class="recharts-layer">
+                                        <g class="recharts-layer recharts-shape">
                                             <path name="Charge level" color="color-coldplay-fountain" cx="84" cy="84" fill="#67abc5 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 9.1701,84
     A3,3,0,0,1,6.1725,80.8798
     A77.89,77.89,0,0,1,52.4487,12.7865
@@ -2358,9 +2392,9 @@ const loremIpsum = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                 <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                     <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M5,84L8.8665,59.5877L20.0877,37.565L37.565,20.0877L59.5877,8.8665L84,5L108.4123,8.8665L130.435,20.0877L147.9123,37.565L159.1335,59.5877L163,84L5,84Z">
                                     </path>
@@ -2412,15 +2446,15 @@ const loremIpsum = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                             </g>
                         </svg>
                     </div>
@@ -2448,10 +2482,11 @@ const loremIpsum = {
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
-                                <path name="Lorem ipsum" color="color-warmup-charm" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 84,6.11
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                <g class="recharts-layer recharts-shape">
+                                    <path name="Lorem ipsum" color="color-warmup-charm" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 84,6.11
     A 77.89,77.89,0,
     1,1,
     83.9986,6.11
@@ -2459,7 +2494,8 @@ const loremIpsum = {
             A 71.89,71.89,0,
             1,0,
             84,12.11 Z">
-                                </path>
+                                    </path>
+                                </g>
                             </g>
                             <defs>
                                 <clipPath id="recharts14-clip">
@@ -2467,16 +2503,16 @@ const loremIpsum = {
                                     </rect>
                                 </clipPath>
                             </defs>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                 <g class="recharts-layer recharts-area">
                                     <g class="recharts-layer recharts-radial-bar-background">
                                     </g>
                                     <g class="recharts-layer recharts-radial-bar-sectors">
-                                        <g class="recharts-layer">
+                                        <g class="recharts-layer recharts-shape">
                                             <path name="Lorem ipsum" color="color-warmup-charm" cx="84" cy="84" fill="#c9778d " class="recharts-sector recharts-radial-bar-sector undefined" d="M 84,9.1701
     A3,3,0,0,1,87.1202,6.1725
     A77.89,77.89,0,1,1,9.0175,62.9175
@@ -2490,9 +2526,9 @@ const loremIpsum = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                 <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                     <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M84,5L130.435,20.0877L159.1335,59.5877L159.1335,108.4123L130.435,147.9123L84,163L37.565,147.9123L8.8665,108.4123L8.8665,59.5877L37.565,20.0877L84,5Z">
                                     </path>
@@ -2540,15 +2576,15 @@ const loremIpsum = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                             </g>
                         </svg>
                     </div>
@@ -2736,10 +2772,11 @@ const thirdStep = {
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
-                                <path color="brand-success" cx="30" cy="30" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 30,5.5
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                <g class="recharts-layer recharts-shape">
+                                    <path color="brand-success" cx="30" cy="30" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 30,5.5
     A 24.5,24.5,0,
     1,1,
     29.9996,5.5
@@ -2747,7 +2784,8 @@ const thirdStep = {
             A 20.5,20.5,0,
             1,0,
             30,9.5 Z">
-                                </path>
+                                    </path>
+                                </g>
                             </g>
                             <defs>
                                 <clipPath id="recharts15-clip">
@@ -2755,23 +2793,23 @@ const thirdStep = {
                                     </rect>
                                 </clipPath>
                             </defs>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                 <g class="recharts-layer recharts-area">
                                     <g class="recharts-layer recharts-radial-bar-background">
                                     </g>
                                     <g class="recharts-layer recharts-radial-bar-sectors">
-                                        <g class="recharts-layer">
+                                        <g class="recharts-layer recharts-shape">
                                         </g>
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                 <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                     <path angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M30,5L40.1684,7.1614L48.5786,13.2717L53.7764,22.2746L54.863,32.6132L51.6506,42.5L44.6946,50.2254L35.1978,54.4537L24.8022,54.4537L15.3054,50.2254L8.3494,42.5L5.137,32.6132L6.2236,22.2746L11.4214,13.2717L19.8316,7.1614L30,5Z">
                                     </path>
@@ -2839,15 +2877,15 @@ const thirdStep = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                             </g>
                         </svg>
                     </div>
@@ -2876,10 +2914,11 @@ const thirdStep = {
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
-                                <path color="brand-success" cx="30" cy="30" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 30,5.5
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                <g class="recharts-layer recharts-shape">
+                                    <path color="brand-success" cx="30" cy="30" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 30,5.5
     A 24.5,24.5,0,
     1,1,
     29.9996,5.5
@@ -2887,7 +2926,8 @@ const thirdStep = {
             A 20.5,20.5,0,
             1,0,
             30,9.5 Z">
-                                </path>
+                                    </path>
+                                </g>
                             </g>
                             <defs>
                                 <clipPath id="recharts16-clip">
@@ -2895,16 +2935,16 @@ const thirdStep = {
                                     </rect>
                                 </clipPath>
                             </defs>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                 <g class="recharts-layer recharts-area">
                                     <g class="recharts-layer recharts-radial-bar-background">
                                     </g>
                                     <g class="recharts-layer recharts-radial-bar-sectors">
-                                        <g class="recharts-layer">
+                                        <g class="recharts-layer recharts-shape">
                                             <path color="brand-success" cx="30" cy="30" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 30,7.5891
     A2,2,0,0,1,32.1778,5.597
     A24.5,24.5,0,0,1,52.2225,40.3155
@@ -2918,9 +2958,9 @@ const thirdStep = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                 <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                     <path angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M30,5L40.1684,7.1614L48.5786,13.2717L53.7764,22.2746L54.863,32.6132L51.6506,42.5L44.6946,50.2254L35.1978,54.4537L24.8022,54.4537L15.3054,50.2254L8.3494,42.5L5.137,32.6132L6.2236,22.2746L11.4214,13.2717L19.8316,7.1614L30,5Z">
                                     </path>
@@ -2988,15 +3028,15 @@ const thirdStep = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                             </g>
                         </svg>
                     </div>
@@ -3025,10 +3065,11 @@ const thirdStep = {
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
-                                <path color="brand-success" cx="30" cy="30" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 30,5.5
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                <g class="recharts-layer recharts-shape">
+                                    <path color="brand-success" cx="30" cy="30" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 30,5.5
     A 24.5,24.5,0,
     1,1,
     29.9996,5.5
@@ -3036,7 +3077,8 @@ const thirdStep = {
             A 20.5,20.5,0,
             1,0,
             30,9.5 Z">
-                                </path>
+                                    </path>
+                                </g>
                             </g>
                             <defs>
                                 <clipPath id="recharts17-clip">
@@ -3044,16 +3086,16 @@ const thirdStep = {
                                     </rect>
                                 </clipPath>
                             </defs>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                 <g class="recharts-layer recharts-area">
                                     <g class="recharts-layer recharts-radial-bar-background">
                                     </g>
                                     <g class="recharts-layer recharts-radial-bar-sectors">
-                                        <g class="recharts-layer">
+                                        <g class="recharts-layer recharts-shape">
                                             <path color="brand-success" cx="30" cy="30" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 30,7.5891
     A2,2,0,0,1,32.1778,5.597
     A24.5,24.5,0,1,1,9.9553,44.0875
@@ -3067,9 +3109,9 @@ const thirdStep = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                 <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                     <path angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M30,5L40.1684,7.1614L48.5786,13.2717L53.7764,22.2746L54.863,32.6132L51.6506,42.5L44.6946,50.2254L35.1978,54.4537L24.8022,54.4537L15.3054,50.2254L8.3494,42.5L5.137,32.6132L6.2236,22.2746L11.4214,13.2717L19.8316,7.1614L30,5Z">
                                     </path>
@@ -3137,15 +3179,15 @@ const thirdStep = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                             </g>
                         </svg>
                     </div>
@@ -3174,10 +3216,11 @@ const thirdStep = {
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
-                                <path color="brand-success" cx="30" cy="30" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 30,5.5
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                <g class="recharts-layer recharts-shape">
+                                    <path color="brand-success" cx="30" cy="30" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 30,5.5
     A 24.5,24.5,0,
     1,1,
     29.9996,5.5
@@ -3185,7 +3228,8 @@ const thirdStep = {
             A 20.5,20.5,0,
             1,0,
             30,9.5 Z">
-                                </path>
+                                    </path>
+                                </g>
                             </g>
                             <defs>
                                 <clipPath id="recharts18-clip">
@@ -3193,16 +3237,16 @@ const thirdStep = {
                                     </rect>
                                 </clipPath>
                             </defs>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                 <g class="recharts-layer recharts-area">
                                     <g class="recharts-layer recharts-radial-bar-background">
                                     </g>
                                     <g class="recharts-layer recharts-radial-bar-sectors">
-                                        <g class="recharts-layer">
+                                        <g class="recharts-layer recharts-shape">
                                             <path color="brand-success" cx="30" cy="30" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 30,5.5
     A 24.5,24.5,0,
     1,1,
@@ -3216,9 +3260,9 @@ const thirdStep = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                 <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                     <path angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M30,5L40.1684,7.1614L48.5786,13.2717L53.7764,22.2746L54.863,32.6132L51.6506,42.5L44.6946,50.2254L35.1978,54.4537L24.8022,54.4537L15.3054,50.2254L8.3494,42.5L5.137,32.6132L6.2236,22.2746L11.4214,13.2717L19.8316,7.1614L30,5Z">
                                     </path>
@@ -3286,15 +3330,15 @@ const thirdStep = {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                             </g>
                         </svg>
                     </div>
@@ -3468,10 +3512,11 @@ export default () => {
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
-                                <path color="brand-danger" cx="59" cy="59" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 59,6.29
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                <g class="recharts-layer recharts-shape">
+                                    <path color="brand-danger" cx="59" cy="59" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 59,6.29
     A 52.71,52.71,0,
     1,1,
     58.9991,6.29
@@ -3479,7 +3524,8 @@ export default () => {
             A 46.71,46.71,0,
             1,0,
             59,12.29 Z">
-                                </path>
+                                    </path>
+                                </g>
                             </g>
                             <defs>
                                 <clipPath id="recharts19-clip">
@@ -3488,16 +3534,16 @@ export default () => {
                                 </clipPath>
                             </defs>
                             <text x="60" y="62" text-anchor="middle" dominant-baseline="middle" class="radialbarchart-text" style="font-size: 180%; font-weight: normal; fill: rgb(226, 40, 55);">1%</text>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                 <g class="recharts-layer recharts-area">
                                     <g class="recharts-layer recharts-radial-bar-background">
                                     </g>
                                     <g class="recharts-layer recharts-radial-bar-sectors">
-                                        <g class="recharts-layer">
+                                        <g class="recharts-layer recharts-shape">
                                             <path color="brand-danger" cx="59" cy="59" fill="#e22837 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 59,6.29
     A 52.71,52.71,0,
     0,1,
@@ -3511,9 +3557,9 @@ export default () => {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                 <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                     <path angle="0" cx="59" cy="59" orientation="outer" radius="54" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M59,5L90.7404,15.3131L110.3571,42.3131L110.3571,75.6869L90.7404,102.6869L59,113L27.2596,102.6869L7.6429,75.6869L7.6429,42.3131L27.2596,15.3131L59,5Z">
                                     </path>
@@ -3561,15 +3607,15 @@ export default () => {
                                     </g>
                                 </g>
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                             </g>
                         </svg>
                     </div>