@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

package/dist/docs/components/pieCharts.md

@@ -3,12 +3,10 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/pieCharts
-*Captured:* 2026-03-06T10:41:29.583Z
+*Captured:* 2026-04-20T12:55:34.996Z
 
 ## PieChart
 
-> Note: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.
-
 ### Example: Example 1
 
 Simple PieChart Basistarif
@@ -26,16 +24,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 +64,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 +77,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 +90,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 +103,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 +128,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 +138,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 +229,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 +291,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 +304,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 +317,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 +330,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 +355,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 +365,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
+    85.6913,61.2925
+  L 98.6074,74.1149
             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 81.9865,65.2251
     A 103.2,103.2,0,
     0,0,
-    78.502,198.6655
-  L 92.686,187.2613
+    63.0885,172.2715
+  L 79.9907,165.522
             A 85,85,0,
             0,1,
-            85.4707,91.2359 Z">
-                                            </path>
+            95.5559,77.354 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 65.2228,177.235
     A 103.2,103.2,0,
     0,0,
-    142.2419,235.8418
-  L 145.1849,217.8813
+    108.2563,223.9025
+  L 117.1929,208.0476
             A 85,85,0,
             0,1,
-            95.5642,190.6553 Z">
-                                            </path>
+            81.7486,169.6102 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 113.0309,226.4313
     A 103.2,103.2,0,
     0,0,
-    169.4739,236.6599
-  L 167.6144,218.5552
+    131.8751,233.5906
+  L 136.6463,216.0271
             A 85,85,0,
             0,1,
-            149.5937,218.4857 Z">
-                                            </path>
+            121.1255,210.1304 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 +456,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 +469,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 +482,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 +507,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 +517,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
+    86.8501,77.1215
   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 86.8501,77.1215
     A 103.2,103.2,0,
     0,0,
-    112.1685,217.3938
+    88.889,193.8511
   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 88.889,193.8511
     A 103.2,103.2,0,
     0,0,
-    183.8676,236.6221
+    144.9965,233.339
   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 +819,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 +836,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 +853,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 +870,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 +899,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 +909,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
+    126.2606,203.9863
+  L 145.9277,200.3524
             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
+    116.4271,205.8032
+  L 120.3605,205.0764
             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 127.4548,209.62
     A 110,110,0,
     0,0,
-    261.0845,290.7217
-  L 256.2382,271.3178
+    259.1833,291.1786
+  L 254.6826,271.6916
             A 90,90,0,
             0,1,
-            147.1647,206.0186 Z">
-                                        </path>
+            146.9048,204.9618 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 264.7587,289.7362
     A 110,110,0,
     0,0,
-    336.183,225.7883
-  L 317.6824,218.1904
+    335.2839,227.9138
+  L 316.9468,219.9295
             A 90,90,0,
             0,1,
-            260.7781,270.0567 Z">
-                                        </path>
+            259.2443,270.5115 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 337.444,222.5753
     A 110,110,0,
     0,0,
-    344.227,190.6745
-  L 324.2639,189.461
+    344.0538,193.0863
+  L 324.1221,191.4343
             A 90,90,0,
             0,1,
-            319.3577,213.7865 Z">
-                                        </path>
+            318.7141,215.5616 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 +1062,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 +1133,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 +1143,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 +1156,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 +1169,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 +1182,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 +1195,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 +1208,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>