@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/components/pieCharts.md

@@ -0,0 +1,1284 @@
+# PieChart
+
+*Category:* Components
+*Section:* Charts
+*Source:* https://uikit.developers.rio.cloud/#components/pieCharts
+*Captured:* 2025-12-12T14:21:27.599Z
+
+## 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 PieChartBasistarif
+Diesel
+Maut
+Zuschläge
+
+#### Summary
+
+Simple PieChartBasistarif
+Diesel
+Maut
+Zuschläge
+
+#### React (tsx)
+
+```tsx
+import PieChart from '@rio-cloud/rio-uikit/PieChart';
+
+type CustomData = {
+    name: string;
+    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>
+        </>
+    );
+};
+
+const data: CustomData[] = [
+    {
+        name: 'Basistarif',
+        costs: 46.8,
+    },
+    {
+        name: 'Diesel',
+        costs: 22.0,
+    },
+    {
+        name: 'Maut',
+        costs: 12.4,
+    },
+    {
+        name: 'Zuschläge',
+        costs: 3.88,
+    },
+];
+```
+
+#### HTML (html)
+
+```html
+<label>Simple PieChart</label>
+<div class="panel panel-default panel-body margin-bottom-0 width-100% height-500">
+    <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
+        <div style="width: 0px; height: 0px; overflow: visible;">
+            <div width="876" height="468" class="recharts-wrapper" style="position: relative; cursor: default; width: 876px; height: 468px;">
+                <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;">
+                                <title>
+                                </title>
+                                <desc>
+                                </desc>
+                                <path fill="#ef7186 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                </path>
+                            </svg>
+                            <span class="recharts-legend-item-text" style="color: rgb(239, 113, 134);">
+                                <span class="text-color-darker">Basistarif</span>
+                            </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;">
+                                <title>
+                                </title>
+                                <desc>
+                                </desc>
+                                <path fill="#e878b6 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                </path>
+                            </svg>
+                            <span class="recharts-legend-item-text" style="color: rgb(232, 120, 182);">
+                                <span class="text-color-darker">Diesel</span>
+                            </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;">
+                                <title>
+                                </title>
+                                <desc>
+                                </desc>
+                                <path fill="#dc82e9 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                </path>
+                            </svg>
+                            <span class="recharts-legend-item-text" style="color: rgb(220, 130, 233);">
+                                <span class="text-color-darker">Maut</span>
+                            </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;">
+                                <title>
+                                </title>
+                                <desc>
+                                </desc>
+                                <path fill="#c08eeb " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                </path>
+                            </svg>
+                            <span class="recharts-legend-item-text" style="color: rgb(192, 142, 235);">
+                                <span class="text-color-darker">Zuschläge</span>
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+                <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
+                    <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
+                        <p class="recharts-tooltip-label" style="margin: 0px;">
+                        </p>
+                    </div>
+                </div>
+                <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="876" height="468" viewBox="0 0 876 468" style="width: 100%; height: 100%; display: block;">
+                    <title>
+                    </title>
+                    <desc>
+                    </desc>
+                    <g tabindex="-1" id="recharts-zindex--100-:r1:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex--50-:r2:">
+                    </g>
+                    <defs>
+                        <clipPath id="recharts1-clip">
+                            <rect x="5" y="5" height="458" width="780.859375">
+                            </rect>
+                        </clipPath>
+                    </defs>
+                    <g tabindex="-1" id="recharts-zindex-100-:r4:">
+                        <g class="recharts-layer recharts-pie" tabindex="0">
+                            <g class="recharts-layer">
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-200-:r5:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-300-:r6:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-400-:r7:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-500-:r8:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-600-:r9:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1000-:ra:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1100-:rb:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1200-:rc:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-2000-:rd:">
+                    </g>
+                </svg>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: PieChart
+
+### PieChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| innerRadius | String \| Number | 60 | The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |
+| outerRadius | String \| Number | 80 | The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the PieChart. |
+| dataUnit | String \| Number | — | The unit of data displayed in the PieChart. |
+| nameKey | String | name | The key of each sector name. |
+| color | Function | — | Overwrite the way the color is taken from the data input array. Use this, if you had to rename the color prop in your data or if you want to provide the corresponding color in another way. Take the color name from the charts colors page. |
+| filled | Boolean | false | Set to "true" if the chart should be filled. This will set the "innerRadius" and the "paddingAngle" to 0. |
+| labels | Function \| Boolean | true | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If set a function, the function will be called to render customized label. |
+| innerLabels | Boolean | false | Set to "true" if the built in inner label shall be used. This makes only sense when labels are enabled, and the chart is filled or the inner radius is set to 0. |
+| paddingAngle | Number | 3 | The angle between two sectors. |
+| pieOptions | Object | — | Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie |
+| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | <Legend /> | Shows the provided Legend component otherwise shows nothing. |
+| ... |  | — | Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |
+
+### Example: Example 2
+
+PieChart with custom colorBasistarif
+Diesel
+Maut
+Zuschläge
+
+Filled PieChart with inner labelsBasistarif
+Diesel
+Maut
+
+#### Summary
+
+PieChart with custom colorBasistarif
+Diesel
+Maut
+Zuschläge
+
+Filled PieChart with inner labelsBasistarif
+Diesel
+Maut
+
+#### React (tsx)
+
+```tsx
+import PieChart from '@rio-cloud/rio-uikit/PieChart';
+
+type CustomData = {
+    label: string;
+    color: string;
+    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>
+            </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[] = [
+    {
+        label: 'Basistarif',
+        color: 'color-coldplay-fountain',
+        costs: 46.8,
+    },
+    {
+        label: 'Diesel',
+        color: 'color-coldplay-turquoise',
+        costs: 22.0,
+    },
+    {
+        label: 'Maut',
+        color: 'color-coldplay-moos',
+        costs: 12.4,
+    },
+    {
+        label: 'Zuschläge',
+        color: 'brand-warning',
+        costs: 3.88,
+    },
+];
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-column flex-row-lg flex-wrap gap-15">
+    <div class="flex-1-1 max-width-500">
+        <label>PieChart with custom color</label>
+        <div class="panel panel-default panel-body margin-bottom-0 height-300">
+            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
+                <div style="width: 0px; height: 0px; overflow: visible;">
+                    <div width="403" height="268" class="recharts-wrapper" style="position: relative; cursor: default; width: 403px; height: 268px;">
+                        <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;">
+                                        <title>
+                                        </title>
+                                        <desc>
+                                        </desc>
+                                        <path fill="#67abc5 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                        </path>
+                                    </svg>
+                                    <span class="recharts-legend-item-text" style="color: rgb(103, 171, 197);">
+                                        <span class="text-color-darker">Basistarif</span>
+                                    </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;">
+                                        <title>
+                                        </title>
+                                        <desc>
+                                        </desc>
+                                        <path fill="#4eccc1 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                        </path>
+                                    </svg>
+                                    <span class="recharts-legend-item-text" style="color: rgb(78, 204, 193);">
+                                        <span class="text-color-darker">Diesel</span>
+                                    </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;">
+                                        <title>
+                                        </title>
+                                        <desc>
+                                        </desc>
+                                        <path fill="#a1daa3 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                        </path>
+                                    </svg>
+                                    <span class="recharts-legend-item-text" style="color: rgb(161, 218, 163);">
+                                        <span class="text-color-darker">Maut</span>
+                                    </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;">
+                                        <title>
+                                        </title>
+                                        <desc>
+                                        </desc>
+                                        <path fill="#ff8e3c " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                        </path>
+                                    </svg>
+                                    <span class="recharts-legend-item-text" style="color: rgb(255, 142, 60);">
+                                        <span class="text-color-darker">Zuschläge</span>
+                                    </span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
+                            <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
+                                <p class="recharts-tooltip-label" style="margin: 0px;">
+                                </p>
+                            </div>
+                        </div>
+                        <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="403" height="268" viewBox="0 0 403 268" style="width: 100%; height: 100%; display: block;">
+                            <title>
+                            </title>
+                            <desc>
+                            </desc>
+                            <g tabindex="-1" id="recharts-zindex--100-:re:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex--50-:rf:">
+                            </g>
+                            <defs>
+                                <clipPath id="recharts2-clip">
+                                    <rect x="5" y="5" height="258" width="307.859375">
+                                    </rect>
+                                </clipPath>
+                            </defs>
+                            <g tabindex="-1" id="recharts-zindex-100-:rh:">
+                                <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-data-key="costs" class="recharts-sector" d="M 262.1296875,134
+    A 103.2,103.2,0,
+    0,0,
+    100.68578761471323,48.806760091233215
+  L 110.95748313711846,63.83114929994984
+            A 85,85,0,
+            0,1,
+            243.9296875,134 Z">
+                                            </path>
+                                        </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-data-key="costs" class="recharts-sector" d="M 96.30693917920428,51.971764661488194
+    A 103.2,103.2,0,
+    0,0,
+    56.26139106708253,144.46235669257095
+  L 74.3676216395544,142.61725115182685
+            A 85,85,0,
+            0,1,
+            107.3508734760888,66.43798445955908 Z">
+                                            </path>
+                                        </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-data-key="costs" class="recharts-sector" d="M 56.94965184121139,149.82126186598927
+    A 103.2,103.2,0,
+    0,0,
+    81.95872893429402,202.74381090306508
+  L 95.53306465033907,190.62038688721447
+            A 85,85,0,
+            0,1,
+            74.93450309111404,147.03107808729737 Z">
+                                            </path>
+                                        </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-data-key="costs" class="recharts-sector" d="M 85.66198803731146,206.67794861885653
+    A 103.2,103.2,0,
+    0,0,
+    99.85261619613395,218.61760836940456
+  L 110.27124698809482,203.69473557557546
+            A 85,85,0,
+            0,1,
+            98.58322960921971,193.86071349421323 Z">
+                                            </path>
+                                        </g>
+                                    </g>
+                                </g>
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-200-:ri:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-300-:rj:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-400-:rk:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-500-:rl:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-600-:rm:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-1000-:rn:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-1100-:ro:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-1200-:rp:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-2000-:rq:">
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="flex-1-1 max-width-500">
+        <label>Filled PieChart with inner labels</label>
+        <div class="panel panel-default panel-body margin-bottom-0 height-300">
+            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
+                <div style="width: 0px; height: 0px; overflow: visible;">
+                    <div width="426" height="268" class="recharts-wrapper" style="position: relative; cursor: default; width: 426px; height: 268px;">
+                        <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;">
+                                        <title>
+                                        </title>
+                                        <desc>
+                                        </desc>
+                                        <path fill="#67abc5 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                        </path>
+                                    </svg>
+                                    <span class="recharts-legend-item-text" style="color: rgb(103, 171, 197);">
+                                        <span class="text-color-darker">Basistarif</span>
+                                    </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;">
+                                        <title>
+                                        </title>
+                                        <desc>
+                                        </desc>
+                                        <path fill="#4eccc1 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                        </path>
+                                    </svg>
+                                    <span class="recharts-legend-item-text" style="color: rgb(78, 204, 193);">
+                                        <span class="text-color-darker">Diesel</span>
+                                    </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;">
+                                        <title>
+                                        </title>
+                                        <desc>
+                                        </desc>
+                                        <path fill="#a1daa3 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                        </path>
+                                    </svg>
+                                    <span class="recharts-legend-item-text" style="color: rgb(161, 218, 163);">
+                                        <span class="text-color-darker">Maut</span>
+                                    </span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
+                            <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
+                                <p class="recharts-tooltip-label" style="margin: 0px;">
+                                </p>
+                            </div>
+                        </div>
+                        <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="426" height="268" viewBox="0 0 426 268" style="width: 100%; height: 100%; display: block;">
+                            <title>
+                            </title>
+                            <desc>
+                            </desc>
+                            <g tabindex="-1" id="recharts-zindex--100-:rr:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex--50-:rs:">
+                            </g>
+                            <defs>
+                                <clipPath id="recharts3-clip">
+                                    <rect x="5" y="5" height="258" width="335.921875">
+                                    </rect>
+                                </clipPath>
+                            </defs>
+                            <g tabindex="-1" id="recharts-zindex-100-:ru:">
+                                <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-data-key="costs" class="recharts-sector" d="M 276.1609375,134
+    A 103.2,103.2,0,
+    0,0,
+    100.24957674182834,60.76545885516171
+  L 172.9609375,134 Z">
+                                            </path>
+                                        </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-data-key="costs" class="recharts-sector" d="M 100.24957674182834,60.76545885516171
+    A 103.2,103.2,0,
+    0,0,
+    74.90111652929943,166.16382301894714
+  L 172.9609375,134 Z">
+                                            </path>
+                                        </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-data-key="costs" class="recharts-sector" d="M 74.90111652929943,166.16382301894714
+    A 103.2,103.2,0,
+    0,0,
+    112.11863449623375,217.3573881860384
+  L 172.9609375,134 Z">
+                                            </path>
+                                        </g>
+                                    </g>
+                                </g>
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-200-:rv:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-300-:r10:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-400-:r11:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-500-:r12:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-600-:r13:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-1000-:r14:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-1100-:r15:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-1200-:r16:">
+                            </g>
+                            <g tabindex="-1" id="recharts-zindex-2000-:r17:">
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: PieChart
+
+### PieChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| innerRadius | String \| Number | 60 | The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |
+| outerRadius | String \| Number | 80 | The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the PieChart. |
+| dataUnit | String \| Number | — | The unit of data displayed in the PieChart. |
+| nameKey | String | name | The key of each sector name. |
+| color | Function | — | Overwrite the way the color is taken from the data input array. Use this, if you had to rename the color prop in your data or if you want to provide the corresponding color in another way. Take the color name from the charts colors page. |
+| filled | Boolean | false | Set to "true" if the chart should be filled. This will set the "innerRadius" and the "paddingAngle" to 0. |
+| labels | Function \| Boolean | true | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If set a function, the function will be called to render customized label. |
+| innerLabels | Boolean | false | Set to "true" if the built in inner label shall be used. This makes only sense when labels are enabled, and the chart is filled or the inner radius is set to 0. |
+| paddingAngle | Number | 3 | The angle between two sectors. |
+| pieOptions | Object | — | Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie |
+| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | <Legend /> | Shows the provided Legend component otherwise shows nothing. |
+| ... |  | — | Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |
+
+### Example: Basistarif
+
+PieChart with custom legendBasistarif
+Diesel
+Maut
+Zuschläge
+
+#### Summary
+
+PieChart with custom legendBasistarif
+Diesel
+Maut
+Zuschläge
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import classNames from 'classnames';
+
+import PieChart, { type PieSectorDataItem } from '@rio-cloud/rio-uikit/PieChart';
+import Sector from '@rio-cloud/rio-uikit/Sector';
+import Legend, { type LegendPayload } from '@rio-cloud/rio-uikit/Legend';
+import ChartTooltip from '@rio-cloud/rio-uikit/ChartTooltip';
+
+type CustomData = {
+    label: string;
+    color: string;
+    costs: number;
+};
+
+// Don't render the default chart tooltip as we render our own active shape
+const NoContent = (): null => null;
+
+export default () => {
+    const [activeItem, setActiveItem] = useState<LegendPayload | null>(null);
+    const [activeIndex, setActiveIndex] = useState<number>(0);
+
+    const handleMouseEnter = (payload: LegendPayload, index: number) => {
+        setActiveItem(payload);
+        setActiveIndex(index);
+    };
+
+    const renderActiveShape = (props: PieSectorDataItem) => {
+        const {
+            cx,
+            cy,
+            midAngle = 0,
+            innerRadius,
+            outerRadius,
+            startAngle,
+            endAngle,
+            fill,
+            payload,
+            percent = 0,
+            value,
+        } = props;
+
+        const RADIAN = Math.PI / 180;
+        const sin = Math.sin(-RADIAN * midAngle);
+        const cos = Math.cos(-RADIAN * midAngle);
+        const sx = cx + (outerRadius + 10) * cos;
+        const sy = cy + (outerRadius + 10) * sin;
+        const mx = cx + (outerRadius + 30) * cos;
+        const my = cy + (outerRadius + 30) * sin;
+        const ex = mx + (cos >= 0 ? 1 : -1) * 22;
+        const ey = my;
+        const textAnchor = cos >= 0 ? 'start' : 'end';
+
+        return (
+            <g>
+                <text x={cx} y={cy} dy={8} textAnchor='middle' fill={fill}>
+                    {payload?.name}
+                </text>
+                <Sector
+                    cx={cx}
+                    cy={cy}
+                    innerRadius={innerRadius}
+                    outerRadius={outerRadius}
+                    startAngle={startAngle}
+                    endAngle={endAngle}
+                    fill={fill}
+                />
+                <Sector
+                    cx={cx}
+                    cy={cy}
+                    startAngle={startAngle}
+                    endAngle={endAngle}
+                    innerRadius={outerRadius + 6}
+                    outerRadius={outerRadius + 10}
+                    fill={fill}
+                />
+                <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill='none' />
+                <circle cx={ex} cy={ey} r={2} fill={fill} stroke='none' />
+                <text
+                    x={ex + (cos >= 0 ? 1 : -1) * 12}
+                    y={ey}
+                    textAnchor={textAnchor}
+                    fill='#333'
+                >{`${payload?.label}:${value} €`}</text>
+                <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill='#999'>
+                    {`(Rate ${(percent * 100).toFixed(2)}%)`}
+                </text>
+            </g>
+        );
+    };
+
+    return (
+        <div className='max-width-600'>
+            <label>PieChart with custom legend</label>
+            <div className='panel panel-default panel-body margin-bottom-0 height-400'>
+                <PieChart
+                    data={data}
+                    dataKey='costs'
+                    nameKey='label'
+                    dataUnit='%'
+                    innerRadius={90}
+                    outerRadius={110}
+                    // We have to render a custom tooltip to pass in the active index from hovering the legend
+                    tooltip={<ChartTooltip defaultIndex={activeIndex} active content={NoContent} />}
+                    pieOptions={{
+                        label: false,
+                        labelLine: false,
+                        activeShape: renderActiveShape,
+                        onMouseEnter: handleMouseEnter,
+                    }}
+                    legend={
+                        <Legend
+                            iconType='square'
+                            iconSize={0}
+                            onMouseEnter={handleMouseEnter}
+                            formatter={(value: string | number, entry: LegendPayload) => {
+                                const isActive = activeItem?.value === value;
+
+                                const legendWrapperClasses = classNames(
+                                    'display-inline-flex',
+                                    'align-items-center',
+                                    'gap-5',
+                                    'cursor-pointer',
+                                    'padding-y-3 padding-x-5',
+                                    'rounded',
+                                    isActive && 'bg-lightest'
+                                );
+
+                                return (
+                                    <span className={legendWrapperClasses}>
+                                        <span
+                                            className='rounded height-15 width-15'
+                                            style={{ backgroundColor: entry.color }}
+                                        />
+                                        <span className='text-color-dark'>{value}</span>
+                                    </span>
+                                );
+                            }}
+                        />
+                    }
+                />
+            </div>
+        </div>
+    );
+};
+
+const data: CustomData[] = [
+    {
+        label: 'Basistarif',
+        color: 'color-coldplay-fountain',
+        costs: 46.8,
+    },
+    {
+        label: 'Diesel',
+        color: 'color-coldplay-turquoise',
+        costs: 22.0,
+    },
+    {
+        label: 'Maut',
+        color: 'color-coldplay-moos',
+        costs: 12.4,
+    },
+    {
+        label: 'Zuschläge',
+        color: 'brand-warning',
+        costs: 3.88,
+    },
+];
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-600">
+    <label>PieChart with custom legend</label>
+    <div class="panel panel-default panel-body margin-bottom-0 height-400">
+        <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="568" height="368" class="recharts-wrapper" style="position: relative; cursor: default; width: 568px; height: 368px;">
+                    <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;">
+                                    <title>
+                                    </title>
+                                    <desc>
+                                    </desc>
+                                    <path fill="#67abc5 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M-16,-16h32v32h-32Z">
+                                    </path>
+                                </svg>
+                                <span class="recharts-legend-item-text" style="color: rgb(103, 171, 197);">
+                                    <span class="display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded">
+                                        <span class="rounded height-15 width-15" style="background-color: rgb(103, 171, 197);">
+                                        </span>
+                                        <span class="text-color-dark">Basistarif</span>
+                                    </span>
+                                </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;">
+                                    <title>
+                                    </title>
+                                    <desc>
+                                    </desc>
+                                    <path fill="#4eccc1 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M-16,-16h32v32h-32Z">
+                                    </path>
+                                </svg>
+                                <span class="recharts-legend-item-text" style="color: rgb(78, 204, 193);">
+                                    <span class="display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded">
+                                        <span class="rounded height-15 width-15" style="background-color: rgb(78, 204, 193);">
+                                        </span>
+                                        <span class="text-color-dark">Diesel</span>
+                                    </span>
+                                </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;">
+                                    <title>
+                                    </title>
+                                    <desc>
+                                    </desc>
+                                    <path fill="#a1daa3 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M-16,-16h32v32h-32Z">
+                                    </path>
+                                </svg>
+                                <span class="recharts-legend-item-text" style="color: rgb(161, 218, 163);">
+                                    <span class="display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded">
+                                        <span class="rounded height-15 width-15" style="background-color: rgb(161, 218, 163);">
+                                        </span>
+                                        <span class="text-color-dark">Maut</span>
+                                    </span>
+                                </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;">
+                                    <title>
+                                    </title>
+                                    <desc>
+                                    </desc>
+                                    <path fill="#ff8e3c " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M-16,-16h32v32h-32Z">
+                                    </path>
+                                </svg>
+                                <span class="recharts-legend-item-text" style="color: rgb(255, 142, 60);">
+                                    <span class="display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded">
+                                        <span class="rounded height-15 width-15" style="background-color: rgb(255, 142, 60);">
+                                        </span>
+                                        <span class="text-color-dark">Zuschläge</span>
+                                    </span>
+                                </span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="transition: transform 400ms; visibility: visible; pointer-events: none; position: absolute; top: 0px; left: 0px;">
+                    </div>
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="568" height="368" viewBox="0 0 568 368" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:r18:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:r19:">
+                        </g>
+                        <defs>
+                            <clipPath id="recharts4-clip">
+                                <rect x="5" y="5" height="358" width="458.859375">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <g tabindex="-1" id="recharts-zindex-100-:r1b:">
+                            <g class="recharts-layer recharts-pie" tabindex="0">
+                                <g class="recharts-layer">
+                                    <g class="recharts-layer recharts-pie-sector" tabindex="-1">
+                                        <g class="recharts-layer recharts-active-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.4296875,184
+    A 110,110,0,
+    1,0,
+    126.02621365284715,202.67315875447025
+  L 145.7359361705113,199.2780389809302
+            A 90,90,0,
+            1,1,
+            324.4296875,184 Z">
+                                                </path>
+                                                <path cx="234.4296875" cy="184" fill="#67abc5 " class="recharts-sector" d="M 354.4296875,184
+    A 120,120,0,
+    1,0,
+    116.17135239401507,204.37071864124027
+  L 120.11329689754791,203.69169468653226
+            A 116,116,0,
+            1,1,
+            350.4296875,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>
+                                            </g>
+                                        </g>
+                                    </g>
+                                    <g class="recharts-layer recharts-pie-sector" tabindex="-1">
+                                        <path cx="234.4296875" cy="184" fill="#4eccc1 " stroke="#fff" name="Diesel" color="color-coldplay-turquoise" tabindex="-1" data-recharts-item-index="1" data-recharts-item-data-key="costs" class="recharts-sector" d="M 127.15205446572965,208.32096730322263
+    A 110,110,0,
+    0,0,
+    257.2689101523764,291.6028341106087
+  L 253.1163242155807,272.0386824541344
+            A 90,90,0,
+            0,1,
+            146.6570786537788,203.89897324809124 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-pie-sector" tabindex="-1">
+                                        <path cx="234.4296875" cy="184" fill="#a1daa3 " stroke="#fff" name="Maut" color="color-coldplay-moos" tabindex="-1" data-recharts-item-index="2" data-recharts-item-data-key="costs" class="recharts-sector" d="M 262.8691070091283,290.26005560879315
+    A 110,110,0,
+    0,0,
+    334.33778017393547,230.02578644908002
+  L 316.1726724150381,221.65746164015638
+            A 90,90,0,
+            0,1,
+            257.69830346201405,270.9400454981035 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-pie-sector" tabindex="-1">
+                                        <path cx="234.4296875" cy="184" fill="#ff8e3c " stroke="#fff" name="Zuschläge" color="brand-warning" tabindex="-1" data-recharts-item-index="3" data-recharts-item-data-key="costs" class="recharts-sector" d="M 336.60966315083516,224.73392414185915
+    A 110,110,0,
+    0,0,
+    343.82684131063615,195.50055381849145
+  L 323.9364497087023,193.4095440333112
+            A 90,90,0,
+            0,1,
+            318.0314857597742,217.32775611606658 Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:r1c:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r1d:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r1e:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r1f:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r1g:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:r1h:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:r1i:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:r1j:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:r1k:">
+                        </g>
+                    </svg>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: PieChart
+
+### PieChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| innerRadius | String \| Number | 60 | The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |
+| outerRadius | String \| Number | 80 | The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the PieChart. |
+| dataUnit | String \| Number | — | The unit of data displayed in the PieChart. |
+| nameKey | String | name | The key of each sector name. |
+| color | Function | — | Overwrite the way the color is taken from the data input array. Use this, if you had to rename the color prop in your data or if you want to provide the corresponding color in another way. Take the color name from the charts colors page. |
+| filled | Boolean | false | Set to "true" if the chart should be filled. This will set the "innerRadius" and the "paddingAngle" to 0. |
+| labels | Function \| Boolean | true | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If set a function, the function will be called to render customized label. |
+| innerLabels | Boolean | false | Set to "true" if the built in inner label shall be used. This makes only sense when labels are enabled, and the chart is filled or the inner radius is set to 0. |
+| paddingAngle | Number | 3 | The angle between two sectors. |
+| pieOptions | Object | — | Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie |
+| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | <Legend /> | Shows the provided Legend component otherwise shows nothing. |
+| ... |  | — | Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |
+
+### Example: Customer Satisfaction
+
+PieChart with a needle
+
+Customer Satisfaction
+
+#### Summary
+
+PieChart with a needle
+
+Customer Satisfaction
+
+#### React (tsx)
+
+```tsx
+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>
+                </div>
+            </div>
+        </>
+    );
+};
+
+const data = [
+    {
+        color: 'color-rating-1',
+        value: 20,
+    },
+    {
+        color: 'color-rating-2',
+        value: 20,
+    },
+    {
+        color: 'color-rating-3',
+        value: 20,
+    },
+    {
+        color: 'color-rating-4',
+        value: 20,
+    },
+    {
+        color: 'color-rating-5',
+        value: 20,
+    },
+];
+```
+
+#### HTML (html)
+
+```html
+<label>PieChart with a needle</label>
+<div class="panel panel-default panel-body margin-bottom-0 ">
+    <div class="display-flex flex-column position-relative width-250 height-250 max-width-500">
+        <div class="recharts-responsive-container" style="width: 100%; height: 50%; min-width: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="250" height="125" class="recharts-wrapper" style="position: relative; cursor: default; width: 250px; height: 125px;">
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="250" height="125" viewBox="0 0 250 125" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:r1l:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:r1m:">
+                        </g>
+                        <defs>
+                            <clipPath id="recharts5-clip">
+                                <rect x="5" y="5" height="115" width="240">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <g tabindex="-1" id="recharts-zindex-100-:r1o:">
+                            <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-data-key="value" class="recharts-sector" d="M 27,124.99999999999999
+    A 98,98,0,
+    0,1,
+    44.91979996315739,68.5096330153603
+  L 51.45695914983841,73.12109154471864
+            A 90,90,0,
+            0,0,
+            35,124.99999999999999 Z">
+                                        </path>
+                                    </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-data-key="value" class="recharts-sector" d="M 45.9178894099074,67.12064457324732
+    A 98,98,0,
+    0,1,
+    93.74198768878912,32.118695819060605
+  L 96.29366216317369,39.70084309913729
+            A 90,90,0,
+            0,0,
+            52.37357190705782,71.84548991420672 Z">
+                                        </path>
+                                    </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-data-key="value" class="recharts-sector" d="M 95.36775070645643,31.587314556291204
+    A 98,98,0,
+    0,1,
+    154.63224929354354,31.58731455629119
+  L 152.21329016753998,39.21283989863477
+            A 90,90,0,
+            0,0,
+            97.78670983245999,39.21283989863478 Z">
+                                        </path>
+                                    </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-data-key="value" class="recharts-sector" d="M 156.25801231121085,32.11869581906059
+    A 98,98,0,
+    0,1,
+    204.08211059009258,67.12064457324732
+  L 197.62642809294218,71.84548991420672
+            A 90,90,0,
+            0,0,
+            153.7063378368263,39.70084309913727 Z">
+                                        </path>
+                                    </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-data-key="value" class="recharts-sector" d="M 205.0802000368426,68.50963301536027
+    A 98,98,0,
+    0,1,
+    223,125
+  L 215,125
+            A 90,90,0,
+            0,0,
+            198.54304085016156,73.12109154471861 Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:r1p:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r1q:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r1r:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r1s:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r1t:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:r1u:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:r1v:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:r20:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:r21:">
+                        </g>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div class="position-absolute top-25pct left-50pct">
+            <div class="position-relative">
+                <div class="position-absolute bg-dark " style="width: 5px; height: 80px; transform-origin: center bottom; transform: translate(-50%, -30%) rotate(67deg); border-radius: 100% 100% 4px 4px; display: inline-block;">
+                </div>
+            </div>
+        </div>
+        <div class="margin-20 text-center">
+            <div class="text-color-dark text-size-16">Customer Satisfaction</div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: PieChart
+
+### PieChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| innerRadius | String \| Number | 60 | The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |
+| outerRadius | String \| Number | 80 | The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the PieChart. |
+| dataUnit | String \| Number | — | The unit of data displayed in the PieChart. |
+| nameKey | String | name | The key of each sector name. |
+| color | Function | — | Overwrite the way the color is taken from the data input array. Use this, if you had to rename the color prop in your data or if you want to provide the corresponding color in another way. Take the color name from the charts colors page. |
+| filled | Boolean | false | Set to "true" if the chart should be filled. This will set the "innerRadius" and the "paddingAngle" to 0. |
+| labels | Function \| Boolean | true | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If set a function, the function will be called to render customized label. |
+| innerLabels | Boolean | false | Set to "true" if the built in inner label shall be used. This makes only sense when labels are enabled, and the chart is filled or the inner radius is set to 0. |
+| paddingAngle | Number | 3 | The angle between two sectors. |
+| pieOptions | Object | — | Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie |
+| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | <Legend /> | Shows the provided Legend component otherwise shows nothing. |
+| ... |  | — | Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |