@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

package/dist/docs/components/radialBarCharts.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/radialBarCharts
-*Captured:* 2026-03-06T10:41:33.419Z
+*Captured:* 2026-04-27T14:59:21.623Z
 
 ## RadialBarChart
 
@@ -40,50 +40,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 +126,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 +139,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 +152,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 +165,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 +190,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 +202,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 +213,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 +224,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 +235,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 +244,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
+    121.9991,130.4328
+  L 121.3947,145.4206
             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
+    116.8659,111.389
+  L 117.5504,126.3734
             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
+    56.5752,119.348
+  L 67.4161,129.7149
             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
+    80.5938,80.7008
+  L 86.1267,94.6431
             A 91.8325,91.8325,0,
             0,0,
             73.9249,100.5626 Z">
@@ -288,19 +300,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 +328,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 +344,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 +366,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 +378,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 +389,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 +398,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,235.5472,81.1216
+    A5,5,0,0,1,233.2168,87.9665
+  L233.2168,87.9665
+      A5,5,0,0,1,226.6777,85.7402
       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,234.4929,55.7096
+    A5,5,0,0,1,233.4578,62.849
+  L233.4578,62.849
+      A5,5,0,0,1,226.6043,61.8553
       A117.39,117.39,0,0,0,138.7957,16.708
       A5,5,0,0,1,134,11.7122Z">
                                             </path>
@@ -414,9 +432,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 +482,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 +623,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 +635,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 +645,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,8.4448,70.3406
+    A6,6,0,0,1,15.9132,65.6155
+  L15.9132,65.6155
+      A6,6,0,0,1,20.2534,72.4755
       A64.78,64.78,0,1,0,89.4914,19.4532
       A6,6,0,0,1,84,13.4748Z">
                                             </path>
@@ -648,9 +668,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 +718,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 +744,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 +756,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 +766,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,110.971,10.9287
+    A3,3,0,0,1,112.7027,14.8938
+  L112.7027,14.8938
+      A3,3,0,0,1,108.8934,16.5575
       A71.89,71.89,0,0,0,20.3515,117.4221
       A3,3,0,0,1,19.1954,121.4149Z">
                                             </path>
@@ -767,9 +789,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 +843,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 +1053,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 +1065,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 +1074,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 +1097,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 +1147,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 +1177,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 +1189,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 +1198,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 +1221,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 +1271,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 +1304,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 +1316,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 +1325,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 +1348,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 +1402,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 +1432,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 +1444,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 +1453,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 +1476,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 +1530,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 +1613,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 +1683,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 +1695,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 +1704,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 +1727,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 +1777,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 +1809,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 +1821,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 +1830,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 +1853,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 +1903,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 +1935,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 +1947,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 +1956,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 +1979,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 +2029,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 +2216,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 +2228,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 +2237,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 +2260,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 +2314,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 +2350,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 +2362,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 +2371,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 +2394,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 +2448,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 +2484,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 +2496,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 +2505,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 +2528,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 +2578,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 +2774,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 +2786,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 +2795,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 +2879,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 +2916,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 +2928,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 +2937,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 +2960,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 +3030,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 +3067,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 +3079,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 +3088,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 +3111,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 +3181,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 +3218,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 +3230,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 +3239,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 +3262,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 +3332,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 +3514,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 +3526,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 +3536,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 +3559,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 +3609,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>