@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

package/dist/docs/components/pieCharts.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/pieCharts
-*Captured:* 2026-03-06T10:41:29.583Z
+*Captured:* 2026-04-27T14:59:15.370Z
 
 ## PieChart
 
@@ -26,16 +26,14 @@ type CustomData = {
     costs: number;
 };
 
-export default () => {
-    return (
-        <>
-            <label>Simple PieChart</label>
-            <div className='panel panel-default panel-body margin-bottom-0 width-100% height-500'>
-                <PieChart data={data} dataKey='costs' dataUnit='€' filled />
-            </div>
-        </>
-    );
-};
+export default () => (
+    <>
+        <label>Simple PieChart</label>
+        <div className='panel panel-default panel-body margin-bottom-0 width-100% height-500'>
+            <PieChart data={data} dataKey='costs' dataUnit='€' filled />
+        </div>
+    </>
+);
 
 const data: CustomData[] = [
     {
@@ -68,7 +66,7 @@ const data: CustomData[] = [
                 <div class="recharts-legend-wrapper" style="position: absolute; width: auto; height: auto; right: 5px; top: 5px;">
                     <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="Basistarif 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>
@@ -81,7 +79,7 @@ const data: CustomData[] = [
                             </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="Diesel 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>
@@ -94,7 +92,7 @@ const data: CustomData[] = [
                             </span>
                         </li>
                         <li class="recharts-legend-item legend-item-2" 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="Maut 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>
@@ -107,7 +105,7 @@ const data: CustomData[] = [
                             </span>
                         </li>
                         <li class="recharts-legend-item legend-item-3" 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="Zuschläge 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>
@@ -132,9 +130,9 @@ const data: CustomData[] = [
                     </title>
                     <desc>
                     </desc>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                     </g>
                     <defs>
                         <clipPath id="recharts1-clip">
@@ -142,29 +140,29 @@ const data: CustomData[] = [
                             </rect>
                         </clipPath>
                     </defs>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                         <g class="recharts-layer recharts-pie" tabindex="0">
                             <g class="recharts-layer">
                             </g>
                         </g>
                     </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>
-                    <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>
@@ -233,32 +231,30 @@ type CustomData = {
     costs: number;
 };
 
-export default () => {
-    return (
-        <div className='display-flex flex-column flex-row-lg flex-wrap gap-15'>
-            <div className='flex-1-1 max-width-500'>
-                <label>PieChart with custom color</label>
-                <div className='panel panel-default panel-body margin-bottom-0 height-300'>
-                    <PieChart data={data} dataKey='costs' nameKey='label' dataUnit='%' innerRadius={85} />
-                </div>
+export default () => (
+    <div className='display-flex flex-column flex-row-lg flex-wrap gap-15'>
+        <div className='flex-1-1 max-width-500'>
+            <label>PieChart with custom color</label>
+            <div className='panel panel-default panel-body margin-bottom-0 height-300'>
+                <PieChart data={data} dataKey='costs' nameKey='label' dataUnit='%' innerRadius={85} />
             </div>
-            <div className='flex-1-1 max-width-500'>
-                <label>Filled PieChart with inner labels</label>
-                <div className='panel panel-default panel-body margin-bottom-0 height-300'>
-                    <PieChart
-                        data={data.filter(entry => entry.costs > 10)}
-                        dataKey='costs'
-                        dataUnit='%'
-                        nameKey='label'
-                        filled
-                        innerLabels
-                        color={entry => entry.color}
-                    />
-                </div>
+        </div>
+        <div className='flex-1-1 max-width-500'>
+            <label>Filled PieChart with inner labels</label>
+            <div className='panel panel-default panel-body margin-bottom-0 height-300'>
+                <PieChart
+                    data={data.filter(entry => entry.costs > 10)}
+                    dataKey='costs'
+                    dataUnit='%'
+                    nameKey='label'
+                    filled
+                    innerLabels
+                    color={entry => entry.color}
+                />
             </div>
         </div>
-    );
-};
+    </div>
+);
 
 const data: CustomData[] = [
     {
@@ -297,7 +293,7 @@ const data: CustomData[] = [
                         <div class="recharts-legend-wrapper" style="position: absolute; width: auto; height: auto; right: 5px; top: 5px;">
                             <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="Basistarif 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>
@@ -310,7 +306,7 @@ const data: CustomData[] = [
                                     </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="Diesel 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>
@@ -323,7 +319,7 @@ const data: CustomData[] = [
                                     </span>
                                 </li>
                                 <li class="recharts-legend-item legend-item-2" 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="Maut 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>
@@ -336,7 +332,7 @@ const data: CustomData[] = [
                                     </span>
                                 </li>
                                 <li class="recharts-legend-item legend-item-3" 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="Zuschläge 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>
@@ -361,9 +357,9 @@ const data: CustomData[] = [
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                             </g>
                             <defs>
                                 <clipPath id="recharts2-clip">
@@ -371,73 +367,81 @@ const data: CustomData[] = [
                                     </rect>
                                 </clipPath>
                             </defs>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                                 <g class="recharts-layer recharts-pie" tabindex="0">
                                     <g class="recharts-layer">
                                         <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                            <path cx="158.9296875" cy="134" fill="#67abc5 " stroke="#fff" name="Basistarif" color="color-coldplay-fountain" tabindex="-1" data-recharts-item-index="0" data-recharts-item-id="recharts-pie-:r1:" class="recharts-sector" d="M 262.1297,134
+                                            <g class="recharts-layer recharts-shape">
+                                                <path cx="158.9296875" cy="134" fill="#67abc5 " stroke="#fff" name="Basistarif" color="color-coldplay-fountain" tabindex="-1" data-recharts-item-index="0" data-recharts-item-id="recharts-pie-:r1:" class="recharts-sector" d="M 262.1297,134
     A 103.2,103.2,0,
     0,0,
-    72.5813,77.4827
-  L 87.8094,87.4499
+    98.4489,50.3799
+  L 109.1151,65.1269
             A 85,85,0,
             0,1,
             243.9297,134 Z">
-                                            </path>
+                                                </path>
+                                            </g>
                                         </g>
                                         <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                            <path cx="158.9296875" cy="134" fill="#4eccc1 " stroke="#fff" name="Diesel" color="color-coldplay-turquoise" tabindex="-1" data-recharts-item-index="1" data-recharts-item-id="recharts-pie-:r1:" class="recharts-sector" d="M 69.7418,82.0793
+                                            <g class="recharts-layer recharts-shape">
+                                                <path cx="158.9296875" cy="134" fill="#4eccc1 " stroke="#fff" name="Diesel" color="color-coldplay-turquoise" tabindex="-1" data-recharts-item-index="1" data-recharts-item-id="recharts-pie-:r1:" class="recharts-sector" d="M 94.1554,53.6599
     A 103.2,103.2,0,
     0,0,
-    78.502,198.6655
-  L 92.686,187.2613
+    56.7468,148.4531
+  L 74.7674,145.9042
             A 85,85,0,
             0,1,
-            85.4707,91.2359 Z">
-                                            </path>
+            105.5788,67.8284 Z">
+                                                </path>
+                                            </g>
                                         </g>
                                         <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                            <path cx="158.9296875" cy="134" fill="#a1daa3 " stroke="#fff" name="Maut" color="color-coldplay-moos" tabindex="-1" data-recharts-item-index="2" data-recharts-item-id="recharts-pie-:r1:" class="recharts-sector" d="M 81.9966,202.7862
+                                            <g class="recharts-layer recharts-shape">
+                                                <path cx="158.9296875" cy="134" fill="#a1daa3 " stroke="#fff" name="Maut" color="color-coldplay-moos" tabindex="-1" data-recharts-item-index="2" data-recharts-item-id="recharts-pie-:r1:" class="recharts-sector" d="M 57.6432,153.7811
     A 103.2,103.2,0,
     0,0,
-    142.2419,235.8418
-  L 145.1849,217.8813
+    85.1996,206.2089
+  L 98.2024,193.4744
             A 85,85,0,
             0,1,
-            95.5642,190.6553 Z">
-                                            </path>
+            75.5058,150.2926 Z">
+                                                </path>
+                                            </g>
                                         </g>
                                         <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                            <path cx="158.9296875" cy="134" fill="#ff8e3c " stroke="#fff" name="Zuschläge" color="brand-warning" tabindex="-1" data-recharts-item-index="3" data-recharts-item-id="recharts-pie-:r1:" class="recharts-sector" d="M 147.5947,236.5756
+                                            <g class="recharts-layer recharts-shape">
+                                                <path cx="158.9296875" cy="134" fill="#ff8e3c " stroke="#fff" name="Zuschläge" color="brand-warning" tabindex="-1" data-recharts-item-index="3" data-recharts-item-id="recharts-pie-:r1:" class="recharts-sector" d="M 89.0798,209.9686
     A 103.2,103.2,0,
     0,0,
-    169.4739,236.6599
-  L 167.6144,218.5552
+    103.996,221.3644
+  L 113.6839,205.9571
             A 85,85,0,
             0,1,
-            149.5937,218.4857 Z">
-                                            </path>
+            101.3983,196.5711 Z">
+                                                </path>
+                                            </g>
                                         </g>
                                     </g>
                                 </g>
                             </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>
-                            <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>
@@ -454,7 +458,7 @@ const data: CustomData[] = [
                         <div class="recharts-legend-wrapper" style="position: absolute; width: auto; height: auto; right: 5px; top: 5px;">
                             <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="Basistarif 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>
@@ -467,7 +471,7 @@ const data: CustomData[] = [
                                     </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="Diesel 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>
@@ -480,7 +484,7 @@ const data: CustomData[] = [
                                     </span>
                                 </li>
                                 <li class="recharts-legend-item legend-item-2" 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="Maut 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>
@@ -505,9 +509,9 @@ const data: CustomData[] = [
                             </title>
                             <desc>
                             </desc>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                             </g>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                             </g>
                             <defs>
                                 <clipPath id="recharts3-clip">
@@ -515,53 +519,59 @@ const data: CustomData[] = [
                                     </rect>
                                 </clipPath>
                             </defs>
-                            <g tabindex="-1">
+                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                                 <g class="recharts-layer recharts-pie" tabindex="0">
                                     <g class="recharts-layer">
                                         <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                            <path cx="172.9609375" cy="134" fill="#67abc5 " stroke="#fff" name="Basistarif" color="color-coldplay-fountain" tabindex="-1" data-recharts-item-index="0" data-recharts-item-id="recharts-pie-:r2:" class="recharts-sector" d="M 276.1609,134
+                                            <g class="recharts-layer recharts-shape">
+                                                <path cx="172.9609375" cy="134" fill="#67abc5 " stroke="#fff" name="Basistarif" color="color-coldplay-fountain" tabindex="-1" data-recharts-item-index="0" data-recharts-item-id="recharts-pie-:r2:" class="recharts-sector" d="M 276.1609,134
     A 103.2,103.2,0,
     0,0,
-    76.5431,97.2053
+    98.1764,62.8838
   L 172.9609,134 Z">
-                                            </path>
+                                                </path>
+                                            </g>
                                         </g>
                                         <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                            <path cx="172.9609375" cy="134" fill="#4eccc1 " stroke="#fff" name="Diesel" color="color-coldplay-turquoise" tabindex="-1" data-recharts-item-index="1" data-recharts-item-id="recharts-pie-:r2:" class="recharts-sector" d="M 76.5431,97.2053
+                                            <g class="recharts-layer recharts-shape">
+                                                <path cx="172.9609375" cy="134" fill="#4eccc1 " stroke="#fff" name="Diesel" color="color-coldplay-turquoise" tabindex="-1" data-recharts-item-index="1" data-recharts-item-id="recharts-pie-:r2:" class="recharts-sector" d="M 98.1764,62.8838
     A 103.2,103.2,0,
     0,0,
-    112.1685,217.3938
+    76.3462,170.2745
   L 172.9609,134 Z">
-                                            </path>
+                                                </path>
+                                            </g>
                                         </g>
                                         <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                            <path cx="172.9609375" cy="134" fill="#a1daa3 " stroke="#fff" name="Maut" color="color-coldplay-moos" tabindex="-1" data-recharts-item-index="2" data-recharts-item-id="recharts-pie-:r2:" class="recharts-sector" d="M 112.1685,217.3938
+                                            <g class="recharts-layer recharts-shape">
+                                                <path cx="172.9609375" cy="134" fill="#a1daa3 " stroke="#fff" name="Maut" color="color-coldplay-moos" tabindex="-1" data-recharts-item-index="2" data-recharts-item-id="recharts-pie-:r2:" class="recharts-sector" d="M 76.3462,170.2745
     A 103.2,103.2,0,
     0,0,
-    183.8676,236.6221
+    116.3465,220.2847
   L 172.9609,134 Z">
-                                            </path>
+                                                </path>
+                                            </g>
                                         </g>
                                     </g>
                                 </g>
                             </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>
-                            <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>
@@ -811,7 +821,7 @@ const data: CustomData[] = [
                     <div class="recharts-legend-wrapper" style="position: absolute; width: auto; height: auto; right: 5px; top: 5px;">
                         <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="0" height="0" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                                <svg aria-label="Basistarif legend icon" class="recharts-surface" width="0" height="0" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                     <title>
                                     </title>
                                     <desc>
@@ -828,7 +838,7 @@ const data: CustomData[] = [
                                 </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="0" height="0" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                                <svg aria-label="Diesel legend icon" class="recharts-surface" width="0" height="0" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                     <title>
                                     </title>
                                     <desc>
@@ -845,7 +855,7 @@ const data: CustomData[] = [
                                 </span>
                             </li>
                             <li class="recharts-legend-item legend-item-2" style="display: block; margin-right: 10px;">
-                                <svg aria-label="[object Object] legend icon" class="recharts-surface" width="0" height="0" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                                <svg aria-label="Maut legend icon" class="recharts-surface" width="0" height="0" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                     <title>
                                     </title>
                                     <desc>
@@ -862,7 +872,7 @@ const data: CustomData[] = [
                                 </span>
                             </li>
                             <li class="recharts-legend-item legend-item-3" style="display: block; margin-right: 10px;">
-                                <svg aria-label="[object Object] legend icon" class="recharts-surface" width="0" height="0" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                                <svg aria-label="Zuschläge legend icon" class="recharts-surface" width="0" height="0" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                     <title>
                                     </title>
                                     <desc>
@@ -891,9 +901,9 @@ const data: CustomData[] = [
                         </title>
                         <desc>
                         </desc>
-                        <g tabindex="-1">
+                        <g tabindex="-1" class="recharts-zIndex-layer_-100">
                         </g>
-                        <g tabindex="-1">
+                        <g tabindex="-1" class="recharts-zIndex-layer_-50">
                         </g>
                         <defs>
                             <clipPath id="recharts4-clip">
@@ -901,92 +911,100 @@ const data: CustomData[] = [
                                 </rect>
                             </clipPath>
                         </defs>
-                        <g tabindex="-1">
+                        <g tabindex="-1" class="recharts-zIndex-layer_100">
                             <g class="recharts-layer recharts-pie" tabindex="0">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <g>
-                                            <text x="234.4296875" y="184" dy="8" text-anchor="middle" fill="#67abc5 ">
-                                            </text>
-                                            <path cx="234.4296875" cy="184" fill="#67abc5 " class="recharts-sector" d="M 344.4297,184
+                                        <g class="recharts-layer recharts-shape">
+                                            <g>
+                                                <text x="234.4296875" y="184" dy="8" text-anchor="middle" fill="#67abc5 ">
+                                                </text>
+                                                <path cx="234.4296875" cy="184" fill="#67abc5 " class="recharts-sector" d="M 344.4297,184
     A 110,110,0,
     1,0,
-    126.5102,205.2927
-  L 146.1319,201.4213
+    125.6928,200.6218
+  L 145.4631,197.5997
             A 90,90,0,
             1,1,
             324.4297,184 Z">
-                                            </path>
-                                            <path cx="234.4296875" cy="184" fill="#67abc5 " class="recharts-sector" d="M 354.4297,184
+                                                </path>
+                                                <path cx="234.4296875" cy="184" fill="#67abc5 " class="recharts-sector" d="M 354.4297,184
     A 120,120,0,
     1,0,
-    116.6993,207.2284
-  L 120.6237,206.4541
+    115.8076,202.1329
+  L 119.7617,201.5284
             A 116,116,0,
             1,1,
             350.4297,184 Z">
-                                            </path>
-                                            <path d="M222.48574496401073,64.59588685184674L220.4950878746792,44.695201327154535L198.4950878746792,44.695201327154535" stroke="#67abc5 " fill="none">
-                                            </path>
-                                            <circle cx="198.4950878746792" cy="44.695201327154535" r="2" fill="#67abc5 " stroke="none">
-                                            </circle>
-                                            <text x="186.4950878746792" y="44.695201327154535" text-anchor="end" fill="#333">Basistarif:46.8 €</text>
-                                            <text x="186.4950878746792" y="44.695201327154535" dy="18" text-anchor="end" fill="#999">(Rate 55.01%)</text>
+                                                </path>
+                                                <path d="M222.48574496401073,64.59588685184674L220.4950878746792,44.695201327154535L198.4950878746792,44.695201327154535" stroke="#67abc5 " fill="none">
+                                                </path>
+                                                <circle cx="198.4950878746792" cy="44.695201327154535" r="2" fill="#67abc5 " stroke="none">
+                                                </circle>
+                                                <text x="186.4950878746792" y="44.695201327154535" text-anchor="end" fill="#333">Basistarif:46.8 €</text>
+                                                <text x="186.4950878746792" y="44.695201327154535" dy="18" text-anchor="end" fill="#999">(Rate 55.01%)</text>
+                                            </g>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <path cx="234.4296875" cy="184" fill="#4eccc1 " class="recharts-sector" d="M 127.7725,210.9116
+                                        <g class="recharts-layer recharts-shape">
+                                            <path cx="234.4296875" cy="184" fill="#4eccc1 " class="recharts-sector" d="M 126.7117,206.2899
     A 110,110,0,
     0,0,
-    261.0845,290.7217
-  L 256.2382,271.3178
+    254.2717,292.1956
+  L 250.6641,272.5237
             A 90,90,0,
             0,1,
-            147.1647,206.0186 Z">
-                                        </path>
+            146.2968,202.2372 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <path cx="234.4296875" cy="184" fill="#a1daa3 " class="recharts-sector" d="M 266.6334,289.1804
+                                        <g class="recharts-layer recharts-shape">
+                                            <path cx="234.4296875" cy="184" fill="#a1daa3 " class="recharts-sector" d="M 259.907,291.0089
     A 110,110,0,
     0,0,
-    336.183,225.7883
-  L 317.6824,218.1904
+    332.7756,233.2756
+  L 314.8945,224.3164
             A 90,90,0,
             0,1,
-            260.7781,270.0567 Z">
-                                        </path>
+            255.2748,271.5527 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <path cx="234.4296875" cy="184" fill="#ff8e3c " class="recharts-sector" d="M 338.2306,220.4057
+                                        <g class="recharts-layer recharts-shape">
+                                            <path cx="234.4296875" cy="184" fill="#ff8e3c " class="recharts-sector" d="M 335.2197,228.0611
     A 110,110,0,
     0,0,
-    344.227,190.6745
-  L 324.2639,189.461
+    343.3674,199.2507
+  L 323.5605,196.4778
             A 90,90,0,
             0,1,
-            319.3577,213.7865 Z">
-                                        </path>
+            316.8942,220.05 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                 </g>
                             </g>
                         </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>
-                        <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>
@@ -1046,40 +1064,38 @@ Customer Satisfaction
 import PieChart from '@rio-cloud/rio-uikit/PieChart';
 import ChartNeedle from '@rio-cloud/rio-uikit/ChartNeedle';
 
-export default () => {
-    return (
-        <>
-            <label>PieChart with a needle</label>
-            <div className='panel panel-default panel-body margin-bottom-0 '>
-                <div className='display-flex flex-column position-relative width-250 height-250 max-width-500'>
-                    <PieChart
-                        data={data}
-                        dataKey='value'
-                        filled={false}
-                        paddingAngle={1}
-                        innerRadius={90}
-                        outerRadius={98}
-                        labels={false}
-                        legend={false}
-                        tooltip={false}
-                        containerOptions={{ height: '50%' }}
-                        pieOptions={{
-                            startAngle: 180,
-                            endAngle: 0,
-                            cy: 120,
-                        }}
-                    />
-                    <div className='position-absolute top-25pct left-50pct'>
-                        <ChartNeedle rotation={67} height='80px' y='-30%' />
-                    </div>
-                    <div className='margin-20 text-center'>
-                        <div className='text-color-dark text-size-16'>Customer Satisfaction</div>
-                    </div>
+export default () => (
+    <>
+        <label>PieChart with a needle</label>
+        <div className='panel panel-default panel-body margin-bottom-0 '>
+            <div className='display-flex flex-column position-relative width-250 height-250 max-width-500'>
+                <PieChart
+                    data={data}
+                    dataKey='value'
+                    filled={false}
+                    paddingAngle={1}
+                    innerRadius={90}
+                    outerRadius={98}
+                    labels={false}
+                    legend={false}
+                    tooltip={false}
+                    containerOptions={{ height: '50%' }}
+                    pieOptions={{
+                        startAngle: 180,
+                        endAngle: 0,
+                        cy: 120,
+                    }}
+                />
+                <div className='position-absolute top-25pct left-50pct'>
+                    <ChartNeedle rotation={67} height='80px' y='-30%' />
+                </div>
+                <div className='margin-20 text-center'>
+                    <div className='text-color-dark text-size-16'>Customer Satisfaction</div>
                 </div>
             </div>
-        </>
-    );
-};
+        </div>
+    </>
+);
 
 const data = [
     {
@@ -1119,9 +1135,9 @@ const data = [
                         </title>
                         <desc>
                         </desc>
-                        <g tabindex="-1">
+                        <g tabindex="-1" class="recharts-zIndex-layer_-100">
                         </g>
-                        <g tabindex="-1">
+                        <g tabindex="-1" class="recharts-zIndex-layer_-50">
                         </g>
                         <defs>
                             <clipPath id="recharts5-clip">
@@ -1129,11 +1145,12 @@ const data = [
                                 </rect>
                             </clipPath>
                         </defs>
-                        <g tabindex="-1">
+                        <g tabindex="-1" class="recharts-zIndex-layer_100">
                             <g class="recharts-layer recharts-pie" tabindex="0">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <path cy="125" cx="125" fill="#e22837 " stroke="#fff" name="0" color="color-rating-1" tabindex="-1" data-recharts-item-index="0" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 27,125
+                                        <g class="recharts-layer recharts-shape">
+                                            <path cy="125" cx="125" fill="#e22837 " stroke="#fff" name="0" color="color-rating-1" tabindex="-1" data-recharts-item-index="0" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 27,125
     A 98,98,0,
     0,1,
     44.9198,68.5096
@@ -1141,10 +1158,12 @@ const data = [
             A 90,90,0,
             0,0,
             35,125 Z">
-                                        </path>
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <path cy="125" cx="125" fill="#ff8e3c " stroke="#fff" name="1" color="color-rating-2" tabindex="-1" data-recharts-item-index="1" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 45.9179,67.1206
+                                        <g class="recharts-layer recharts-shape">
+                                            <path cy="125" cx="125" fill="#ff8e3c " stroke="#fff" name="1" color="color-rating-2" tabindex="-1" data-recharts-item-index="1" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 45.9179,67.1206
     A 98,98,0,
     0,1,
     93.742,32.1187
@@ -1152,10 +1171,12 @@ const data = [
             A 90,90,0,
             0,0,
             52.3736,71.8455 Z">
-                                        </path>
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <path cy="125" cx="125" fill="#f8c575 " stroke="#fff" name="2" color="color-rating-3" tabindex="-1" data-recharts-item-index="2" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 95.3678,31.5873
+                                        <g class="recharts-layer recharts-shape">
+                                            <path cy="125" cx="125" fill="#f8c575 " stroke="#fff" name="2" color="color-rating-3" tabindex="-1" data-recharts-item-index="2" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 95.3678,31.5873
     A 98,98,0,
     0,1,
     154.6322,31.5873
@@ -1163,10 +1184,12 @@ const data = [
             A 90,90,0,
             0,0,
             97.7867,39.2128 Z">
-                                        </path>
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <path cy="125" cx="125" fill="#5cb85c " stroke="#fff" name="3" color="color-rating-4" tabindex="-1" data-recharts-item-index="3" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 156.258,32.1187
+                                        <g class="recharts-layer recharts-shape">
+                                            <path cy="125" cx="125" fill="#5cb85c " stroke="#fff" name="3" color="color-rating-4" tabindex="-1" data-recharts-item-index="3" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 156.258,32.1187
     A 98,98,0,
     0,1,
     204.0821,67.1206
@@ -1174,10 +1197,12 @@ const data = [
             A 90,90,0,
             0,0,
             153.7063,39.7008 Z">
-                                        </path>
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <path cy="125" cx="125" fill="#4b924c " stroke="#fff" name="4" color="color-rating-5" tabindex="-1" data-recharts-item-index="4" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 205.0802,68.5096
+                                        <g class="recharts-layer recharts-shape">
+                                            <path cy="125" cx="125" fill="#4b924c " stroke="#fff" name="4" color="color-rating-5" tabindex="-1" data-recharts-item-index="4" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 205.0802,68.5096
     A 98,98,0,
     0,1,
     223,125
@@ -1185,28 +1210,29 @@ const data = [
             A 90,90,0,
             0,0,
             198.543,73.1211 Z">
-                                        </path>
+                                            </path>
+                                        </g>
                                     </g>
                                 </g>
                             </g>
                         </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>
-                        <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>