@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/piecharts.json

@@ -0,0 +1,731 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:22.429Z",
+    "source": "https://uikit.developers.rio.cloud/#components/pieCharts",
+    "category": "Components",
+    "section": "Charts",
+    "slug": "components/piecharts",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "7cbe607ecfeb667f094076eab184020338a5097076bddbdd0651dac75c3e0a76"
+  },
+  "title": "PieChart",
+  "lead": null,
+  "content": [
+    {
+      "heading": "PieChart",
+      "body": "> 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.",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 468px; max-width: 876px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"876\" height=\"468\" viewBox=\"0 0 876 468\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts1-clip\"><rect x=\"5\" y=\"5\" height=\"438\" width=\"866\"></rect></clipPath></defs><g class=\"recharts-layer recharts-pie\" tabindex=\"0\"><g class=\"recharts-layer\"></g><g class=\"recharts-layer recharts-pie-labels\"><g class=\"recharts-layer\"><path stroke=\"#ef7186 \" fill=\"none\" cx=\"438\" cy=\"224\" name=\"Basistarif\" class=\"recharts-curve recharts-pie-label-line\" d=\"M410.554,50.963L407.421,31.21\"></path><text stroke=\"none\" cx=\"438\" cy=\"224\" name=\"Basistarif\" alignment-baseline=\"middle\" x=\"407.4212788652015\" y=\"31.210005929352718\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"end\" fill=\"#ef7186 \"><tspan x=\"407.4212788652015\" dy=\"0em\">46.8 €</tspan></text></g><g class=\"recharts-layer\"><path stroke=\"#e878b6 \" fill=\"none\" cx=\"438\" cy=\"224\" name=\"Diesel\" class=\"recharts-curve recharts-pie-label-line\" d=\"M362.767,382.225L354.179,400.287\"></path><text stroke=\"none\" cx=\"438\" cy=\"224\" name=\"Diesel\" alignment-baseline=\"middle\" x=\"354.17898256935666\" y=\"400.2869168057907\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"end\" fill=\"#e878b6 \"><tspan x=\"354.17898256935666\" dy=\"0em\">22 €</tspan></text></g><g class=\"recharts-layer\"><path stroke=\"#dc82e9 \" fill=\"none\" cx=\"438\" cy=\"224\" name=\"Maut\" class=\"recharts-curve recharts-pie-label-line\" d=\"M566.857,342.705L581.567,356.256\"></path><text stroke=\"none\" cx=\"438\" cy=\"224\" name=\"Maut\" alignment-baseline=\"middle\" x=\"581.5670508528539\" y=\"356.2555931120271\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"start\" fill=\"#dc82e9 \"><tspan x=\"581.5670508528539\" dy=\"0em\">12.4 €</tspan></text></g><g class=\"recharts-layer\"><path stroke=\"#c08eeb \" fill=\"none\" cx=\"438\" cy=\"224\" name=\"Zuschläge\" class=\"recharts-curve recharts-pie-label-line\" d=\"M611.405,249.015L631.2,251.871\"></path><text stroke=\"none\" cx=\"438\" cy=\"224\" name=\"Zuschläge\" alignment-baseline=\"middle\" x=\"631.2000687926479\" y=\"251.87065515046413\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"start\" fill=\"#c08eeb \"><tspan x=\"631.2000687926479\" dy=\"0em\">3.88 €</tspan></text></g></g></g></svg><div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 866px; height: auto; left: 5px; bottom: 5px;\"><ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\"><li class=\"recharts-legend-item legend-item-0\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" 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: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" 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: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" 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: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" 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 tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(10px, 10px);\"><div class=\"recharts-default-tooltip\" 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></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import PieChart from '@rio-cloud/rio-uikit/PieChart';\n\ntype CustomData = {\n    name: string;\n    costs: number;\n};\n\nexport default () => {\n    return (\n        <>\n            <label>Simple PieChart</label>\n            <div className='panel panel-default panel-body margin-bottom-0 width-100% height-500'>\n                <PieChart data={data} dataKey={(entry: CustomData) => entry.costs} dataUnit='€' filled />\n            </div>\n        </>\n    );\n};\n\nconst data: CustomData[] = [\n    {\n        name: 'Basistarif',\n        costs: 46.8,\n    },\n    {\n        name: 'Diesel',\n        costs: 22.0,\n    },\n    {\n        name: 'Maut',\n        costs: 12.4,\n    },\n    {\n        name: 'Zuschläge',\n        costs: 3.88,\n    },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>Simple PieChart</label>\n<div class=\"panel panel-default panel-body margin-bottom-0 width-100% height-500\">\n    <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\">\n        <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 468px; max-width: 876px;\">\n            <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"876\" height=\"468\" viewBox=\"0 0 876 468\" style=\"width: 100%; height: 100%;\">\n                <title>\n                </title>\n                <desc>\n                </desc>\n                <defs>\n                    <clipPath id=\"recharts1-clip\">\n                        <rect x=\"5\" y=\"5\" height=\"438\" width=\"866\">\n                        </rect>\n                    </clipPath>\n                </defs>\n                <g class=\"recharts-layer recharts-pie\" tabindex=\"0\">\n                    <g class=\"recharts-layer\">\n                    </g>\n                    <g class=\"recharts-layer recharts-pie-labels\">\n                        <g class=\"recharts-layer\">\n                            <path stroke=\"#ef7186 \" fill=\"none\" cx=\"438\" cy=\"224\" name=\"Basistarif\" class=\"recharts-curve recharts-pie-label-line\" d=\"M410.554,50.963L407.421,31.21\">\n                            </path>\n                            <text stroke=\"none\" cx=\"438\" cy=\"224\" name=\"Basistarif\" alignment-baseline=\"middle\" x=\"407.4212788652015\" y=\"31.210005929352718\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"end\" fill=\"#ef7186 \">\n                                <tspan x=\"407.4212788652015\" dy=\"0em\">46.8 €</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer\">\n                            <path stroke=\"#e878b6 \" fill=\"none\" cx=\"438\" cy=\"224\" name=\"Diesel\" class=\"recharts-curve recharts-pie-label-line\" d=\"M362.767,382.225L354.179,400.287\">\n                            </path>\n                            <text stroke=\"none\" cx=\"438\" cy=\"224\" name=\"Diesel\" alignment-baseline=\"middle\" x=\"354.17898256935666\" y=\"400.2869168057907\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"end\" fill=\"#e878b6 \">\n                                <tspan x=\"354.17898256935666\" dy=\"0em\">22 €</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer\">\n                            <path stroke=\"#dc82e9 \" fill=\"none\" cx=\"438\" cy=\"224\" name=\"Maut\" class=\"recharts-curve recharts-pie-label-line\" d=\"M566.857,342.705L581.567,356.256\">\n                            </path>\n                            <text stroke=\"none\" cx=\"438\" cy=\"224\" name=\"Maut\" alignment-baseline=\"middle\" x=\"581.5670508528539\" y=\"356.2555931120271\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"start\" fill=\"#dc82e9 \">\n                                <tspan x=\"581.5670508528539\" dy=\"0em\">12.4 €</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer\">\n                            <path stroke=\"#c08eeb \" fill=\"none\" cx=\"438\" cy=\"224\" name=\"Zuschläge\" class=\"recharts-curve recharts-pie-label-line\" d=\"M611.405,249.015L631.2,251.871\">\n                            </path>\n                            <text stroke=\"none\" cx=\"438\" cy=\"224\" name=\"Zuschläge\" alignment-baseline=\"middle\" x=\"631.2000687926479\" y=\"251.87065515046413\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"start\" fill=\"#c08eeb \">\n                                <tspan x=\"631.2000687926479\" dy=\"0em\">3.88 €</tspan>\n                            </text>\n                        </g>\n                    </g>\n                </g>\n            </svg>\n            <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 866px; height: auto; left: 5px; bottom: 5px;\">\n                <ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\">\n                    <li class=\"recharts-legend-item legend-item-0\" style=\"display: inline-block; margin-right: 10px;\">\n                        <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n                            <title>\n                            </title>\n                            <desc>\n                            </desc>\n                            <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\">\n                            </path>\n                        </svg>\n                        <span class=\"recharts-legend-item-text\" style=\"color: rgb(239, 113, 134);\">\n                            <span class=\"text-color-darker\">Basistarif</span>\n                        </span>\n                    </li>\n                    <li class=\"recharts-legend-item legend-item-1\" style=\"display: inline-block; margin-right: 10px;\">\n                        <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n                            <title>\n                            </title>\n                            <desc>\n                            </desc>\n                            <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\">\n                            </path>\n                        </svg>\n                        <span class=\"recharts-legend-item-text\" style=\"color: rgb(232, 120, 182);\">\n                            <span class=\"text-color-darker\">Diesel</span>\n                        </span>\n                    </li>\n                    <li class=\"recharts-legend-item legend-item-2\" style=\"display: inline-block; margin-right: 10px;\">\n                        <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n                            <title>\n                            </title>\n                            <desc>\n                            </desc>\n                            <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\">\n                            </path>\n                        </svg>\n                        <span class=\"recharts-legend-item-text\" style=\"color: rgb(220, 130, 233);\">\n                            <span class=\"text-color-darker\">Maut</span>\n                        </span>\n                    </li>\n                    <li class=\"recharts-legend-item legend-item-3\" style=\"display: inline-block; margin-right: 10px;\">\n                        <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n                            <title>\n                            </title>\n                            <desc>\n                            </desc>\n                            <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\">\n                            </path>\n                        </svg>\n                        <span class=\"recharts-legend-item-text\" style=\"color: rgb(192, 142, 235);\">\n                            <span class=\"text-color-darker\">Zuschläge</span>\n                        </span>\n                    </li>\n                </ul>\n            </div>\n            <div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(10px, 10px);\">\n                <div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\">\n                    <p class=\"recharts-tooltip-label\" style=\"margin: 0px;\">\n                    </p>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "PieChart",
+                  "rows": [
+                    {
+                      "name": "width",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The width of chart container."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The height of chart container."
+                    },
+                    {
+                      "name": "innerRadius",
+                      "type": "String | Number",
+                      "default": "60",
+                      "description": "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."
+                    },
+                    {
+                      "name": "outerRadius",
+                      "type": "String | Number",
+                      "default": "80",
+                      "description": "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."
+                    },
+                    {
+                      "name": "data",
+                      "type": "Array",
+                      "default": "",
+                      "description": "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\" }]"
+                    },
+                    {
+                      "name": "dataKey",
+                      "type": "string | number | ((obj: T) => any)",
+                      "default": "value",
+                      "description": "The key of data used for the PieChart."
+                    },
+                    {
+                      "name": "dataUnit",
+                      "type": "String | Number",
+                      "default": "",
+                      "description": "The unit of data displayed in the PieChart."
+                    },
+                    {
+                      "name": "nameKey",
+                      "type": "String",
+                      "default": "name",
+                      "description": "The key of each sector name."
+                    },
+                    {
+                      "name": "color",
+                      "type": "Function",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "filled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set to \"true\" if the chart should be filled. This will set the \"innerRadius\" and the \"paddingAngle\" to 0."
+                    },
+                    {
+                      "name": "labels",
+                      "type": "Function | Boolean",
+                      "default": "true",
+                      "description": "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."
+                    },
+                    {
+                      "name": "innerLabels",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "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."
+                    },
+                    {
+                      "name": "paddingAngle",
+                      "type": "Number",
+                      "default": "3",
+                      "description": "The angle between two sectors."
+                    },
+                    {
+                      "name": "pieOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie"
+                    },
+                    {
+                      "name": "containerOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer"
+                    },
+                    {
+                      "name": "tooltip",
+                      "type": "ChartTooltip | Boolean",
+                      "default": "",
+                      "description": "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"
+                    },
+                    {
+                      "name": "legend",
+                      "type": "Legend | Boolean",
+                      "default": "<Legend />",
+                      "description": "Shows the provided Legend component otherwise shows nothing."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Legend",
+                  "rows": [
+                    {
+                      "name": "iconType",
+                      "type": "String",
+                      "default": "square",
+                      "description": "Defines the type of the leading icon."
+                    },
+                    {
+                      "name": "iconSize",
+                      "type": "String",
+                      "default": "12",
+                      "description": "Defines the size of the leading icon."
+                    },
+                    {
+                      "name": "layout",
+                      "type": "String",
+                      "default": "vertical",
+                      "description": "Defines the layout of the legend."
+                    },
+                    {
+                      "name": "align",
+                      "type": "String",
+                      "default": "right",
+                      "description": "Defines the alignment of the legend relative to the chart."
+                    },
+                    {
+                      "name": "verticalAlign",
+                      "type": "String",
+                      "default": "top",
+                      "description": "Defines the vertical alignment of the legend relative to the chart."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 268px; max-width: 403px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"403\" height=\"268\" viewBox=\"0 0 403 268\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts3-clip\"><rect x=\"5\" y=\"5\" height=\"238\" width=\"393\"></rect></clipPath></defs><g class=\"recharts-layer recharts-pie\" tabindex=\"0\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g></g><g class=\"recharts-layer recharts-pie-labels\"><g class=\"recharts-layer\"><path stroke=\"#67abc5 \" fill=\"none\" cx=\"201.5\" cy=\"124\" name=\"Basistarif\" color=\"color-coldplay-fountain\" class=\"recharts-curve recharts-pie-label-line\" d=\"M192.024,29.273L190.034,9.372\"></path><text stroke=\"none\" cx=\"201.5\" cy=\"124\" name=\"Basistarif\" color=\"color-coldplay-fountain\" alignment-baseline=\"middle\" x=\"190.0338151654503\" y=\"9.372051377772863\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"end\" fill=\"#67abc5 \"><tspan x=\"190.0338151654503\" dy=\"0em\">46.8 %</tspan></text></g><g class=\"recharts-layer\"><path stroke=\"#4eccc1 \" fill=\"none\" cx=\"201.5\" cy=\"124\" name=\"Diesel\" color=\"color-coldplay-turquoise\" class=\"recharts-curve recharts-pie-label-line\" d=\"M153.064,205.957L142.889,223.175\"></path><text stroke=\"none\" cx=\"201.5\" cy=\"124\" name=\"Diesel\" color=\"color-coldplay-turquoise\" alignment-baseline=\"middle\" x=\"142.888699259342\" y=\"223.17537711291115\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"end\" fill=\"#4eccc1 \"><tspan x=\"142.888699259342\" dy=\"0em\">22 %</tspan></text></g><g class=\"recharts-layer\"><path stroke=\"#a1daa3 \" fill=\"none\" cx=\"201.5\" cy=\"124\" name=\"Maut\" color=\"color-coldplay-moos\" class=\"recharts-curve recharts-pie-label-line\" d=\"M266.146,193.885L279.728,208.567\"></path><text stroke=\"none\" cx=\"201.5\" cy=\"124\" name=\"Maut\" color=\"color-coldplay-moos\" alignment-baseline=\"middle\" x=\"279.72751570383554\" y=\"208.56651693670588\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"start\" fill=\"#a1daa3 \"><tspan x=\"279.72751570383554\" dy=\"0em\">12.4 %</tspan></text></g><g class=\"recharts-layer\"><path stroke=\"#ff8e3c \" fill=\"none\" cx=\"201.5\" cy=\"124\" name=\"Zuschläge\" color=\"brand-warning\" class=\"recharts-curve recharts-pie-label-line\" d=\"M294.971,142.059L314.608,145.853\"></path><text stroke=\"none\" cx=\"201.5\" cy=\"124\" name=\"Zuschläge\" color=\"brand-warning\" alignment-baseline=\"middle\" x=\"314.60826990848403\" y=\"145.8531297142886\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"start\" fill=\"#ff8e3c \"><tspan x=\"314.60826990848403\" dy=\"0em\">3.88 %</tspan></text></g></g></g></svg><div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 393px; height: auto; left: 5px; bottom: 5px;\"><ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\"><li class=\"recharts-legend-item legend-item-0\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" 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: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" 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: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" 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: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" 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 tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(10px, 10px);\"><div class=\"recharts-default-tooltip\" 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></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: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 268px; max-width: 426px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"426\" height=\"268\" viewBox=\"0 0 426 268\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts5-clip\"><rect x=\"5\" y=\"5\" height=\"238\" width=\"416\"></rect></clipPath></defs><g class=\"recharts-layer recharts-pie\" tabindex=\"0\"><g class=\"recharts-layer\"></g><g class=\"recharts-layer recharts-pie-labels\"><g class=\"recharts-layer\"><text x=\"201.69112060773637\" y=\"77.76290183314663\" fill=\"white\" text-anchor=\"end\" dominant-baseline=\"central\">46.8 %</text></g><g class=\"recharts-layer\"><text x=\"201.69112060773634\" y=\"170.23709816685337\" fill=\"white\" text-anchor=\"end\" dominant-baseline=\"central\">22 %</text></g><g class=\"recharts-layer\"><text x=\"255.22643894500987\" y=\"145.97015826122683\" fill=\"white\" text-anchor=\"start\" dominant-baseline=\"central\">12.4 %</text></g></g></g></svg><div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 416px; height: auto; left: 5px; bottom: 5px;\"><ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\"><li class=\"recharts-legend-item legend-item-0\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" 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: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" 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: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" 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 tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(10px, 10px);\"><div class=\"recharts-default-tooltip\" 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></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import PieChart from '@rio-cloud/rio-uikit/PieChart';\n\ntype CustomData = {\n    label: string;\n    color: string;\n    costs: number;\n};\n\nexport default () => {\n    return (\n        <div className='display-flex flex-column flex-row-lg flex-wrap gap-15'>\n            <div className='flex-1-1 max-width-500'>\n                <label>PieChart with custom color</label>\n                <div className='panel panel-default panel-body margin-bottom-0 height-300'>\n                    <PieChart\n                        data={data}\n                        dataKey={(entry: CustomData) => entry.costs}\n                        nameKey='label'\n                        dataUnit='%'\n                        innerRadius={85}\n                    />\n                </div>\n            </div>\n            <div className='flex-1-1 max-width-500'>\n                <label>Filled PieChart with inner labels</label>\n                <div className='panel panel-default panel-body margin-bottom-0 height-300'>\n                    <PieChart\n                        data={data.filter(entry => entry.costs > 10)}\n                        dataKey={(entry: CustomData) => entry.costs}\n                        dataUnit='%'\n                        nameKey='label'\n                        filled\n                        innerLabels\n                        color={entry => entry.color}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nconst data: CustomData[] = [\n    {\n        label: 'Basistarif',\n        color: 'color-coldplay-fountain',\n        costs: 46.8,\n    },\n    {\n        label: 'Diesel',\n        color: 'color-coldplay-turquoise',\n        costs: 22.0,\n    },\n    {\n        label: 'Maut',\n        color: 'color-coldplay-moos',\n        costs: 12.4,\n    },\n    {\n        label: 'Zuschläge',\n        color: 'brand-warning',\n        costs: 3.88,\n    },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column flex-row-lg flex-wrap gap-15\">\n    <div class=\"flex-1-1 max-width-500\">\n        <label>PieChart with custom color</label>\n        <div class=\"panel panel-default panel-body margin-bottom-0 height-300\">\n            <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\">\n                <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 268px; max-width: 403px;\">\n                    <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"403\" height=\"268\" viewBox=\"0 0 403 268\" style=\"width: 100%; height: 100%;\">\n                        <title>\n                        </title>\n                        <desc>\n                        </desc>\n                        <defs>\n                            <clipPath id=\"recharts3-clip\">\n                                <rect x=\"5\" y=\"5\" height=\"238\" width=\"393\">\n                                </rect>\n                            </clipPath>\n                        </defs>\n                        <g class=\"recharts-layer recharts-pie\" tabindex=\"0\">\n                            <g class=\"recharts-layer\">\n                                <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n                                    <path cx=\"201.5\" cy=\"124\" name=\"Basistarif\" stroke=\"#fff\" fill=\"#67abc5 \" color=\"color-coldplay-fountain\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 296.7,124\n    A 95.2,95.2,0,\n    0,0,\n    157.47399634157586,39.5917598698538\n  L 162.1910681621213,48.63549988379803\n            A 85,85,0,\n            0,1,\n            286.5,124 Z\" role=\"img\">\n                                    </path>\n                                </g>\n                                <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n                                    <path cx=\"201.5\" cy=\"124\" name=\"Diesel\" stroke=\"#fff\" fill=\"#4eccc1 \" color=\"color-coldplay-turquoise\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 153.1167464874895,42.01158143039872\n    A 95.2,95.2,0,\n    0,0,\n    106.55536718179299,117.03173629834181\n  L 116.72800641231517,117.77833598066233\n            A 85,85,0,\n            0,1,\n            158.30066650668704,50.79605484857028 Z\" role=\"img\">\n                                    </path>\n                                </g>\n                                <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n                                    <path cx=\"201.5\" cy=\"124\" name=\"Maut\" stroke=\"#fff\" fill=\"#a1daa3 \" color=\"color-coldplay-moos\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 106.32079475713081,122.01030421024193\n    A 95.2,95.2,0,\n    0,0,\n    119.0104221586301,171.52377875919146\n  L 127.84859121306259,166.43194532070666\n            A 85,85,0,\n            0,1,\n            116.51856674743823,122.22348590200173 Z\" role=\"img\">\n                                    </path>\n                                </g>\n                                <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n                                    <path cx=\"201.5\" cy=\"124\" name=\"Zuschläge\" stroke=\"#fff\" fill=\"#ff8e3c \" color=\"brand-warning\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 121.61067366381198,175.77582000847553\n    A 95.2,95.2,0,\n    0,0,\n    131.52745125232116,188.5513936468742\n  L 139.02451004671533,181.63517289899482\n            A 85,85,0,\n            0,1,\n            130.17024434268927,170.22841072185315 Z\" role=\"img\">\n                                    </path>\n                                </g>\n                            </g>\n                            <g class=\"recharts-layer recharts-pie-labels\">\n                                <g class=\"recharts-layer\">\n                                    <path stroke=\"#67abc5 \" fill=\"none\" cx=\"201.5\" cy=\"124\" name=\"Basistarif\" color=\"color-coldplay-fountain\" class=\"recharts-curve recharts-pie-label-line\" d=\"M192.024,29.273L190.034,9.372\">\n                                    </path>\n                                    <text stroke=\"none\" cx=\"201.5\" cy=\"124\" name=\"Basistarif\" color=\"color-coldplay-fountain\" alignment-baseline=\"middle\" x=\"190.0338151654503\" y=\"9.372051377772863\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"end\" fill=\"#67abc5 \">\n                                        <tspan x=\"190.0338151654503\" dy=\"0em\">46.8 %</tspan>\n                                    </text>\n                                </g>\n                                <g class=\"recharts-layer\">\n                                    <path stroke=\"#4eccc1 \" fill=\"none\" cx=\"201.5\" cy=\"124\" name=\"Diesel\" color=\"color-coldplay-turquoise\" class=\"recharts-curve recharts-pie-label-line\" d=\"M153.064,205.957L142.889,223.175\">\n                                    </path>\n                                    <text stroke=\"none\" cx=\"201.5\" cy=\"124\" name=\"Diesel\" color=\"color-coldplay-turquoise\" alignment-baseline=\"middle\" x=\"142.888699259342\" y=\"223.17537711291115\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"end\" fill=\"#4eccc1 \">\n                                        <tspan x=\"142.888699259342\" dy=\"0em\">22 %</tspan>\n                                    </text>\n                                </g>\n                                <g class=\"recharts-layer\">\n                                    <path stroke=\"#a1daa3 \" fill=\"none\" cx=\"201.5\" cy=\"124\" name=\"Maut\" color=\"color-coldplay-moos\" class=\"recharts-curve recharts-pie-label-line\" d=\"M266.146,193.885L279.728,208.567\">\n                                    </path>\n                                    <text stroke=\"none\" cx=\"201.5\" cy=\"124\" name=\"Maut\" color=\"color-coldplay-moos\" alignment-baseline=\"middle\" x=\"279.72751570383554\" y=\"208.56651693670588\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"start\" fill=\"#a1daa3 \">\n                                        <tspan x=\"279.72751570383554\" dy=\"0em\">12.4 %</tspan>\n                                    </text>\n                                </g>\n                                <g class=\"recharts-layer\">\n                                    <path stroke=\"#ff8e3c \" fill=\"none\" cx=\"201.5\" cy=\"124\" name=\"Zuschläge\" color=\"brand-warning\" class=\"recharts-curve recharts-pie-label-line\" d=\"M294.971,142.059L314.608,145.853\">\n                                    </path>\n                                    <text stroke=\"none\" cx=\"201.5\" cy=\"124\" name=\"Zuschläge\" color=\"brand-warning\" alignment-baseline=\"middle\" x=\"314.60826990848403\" y=\"145.8531297142886\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"start\" fill=\"#ff8e3c \">\n                                        <tspan x=\"314.60826990848403\" dy=\"0em\">3.88 %</tspan>\n                                    </text>\n                                </g>\n                            </g>\n                        </g>\n                    </svg>\n                    <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 393px; height: auto; left: 5px; bottom: 5px;\">\n                        <ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\">\n                            <li class=\"recharts-legend-item legend-item-0\" style=\"display: inline-block; margin-right: 10px;\">\n                                <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n                                    <title>\n                                    </title>\n                                    <desc>\n                                    </desc>\n                                    <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\">\n                                    </path>\n                                </svg>\n                                <span class=\"recharts-legend-item-text\" style=\"color: rgb(103, 171, 197);\">\n                                    <span class=\"text-color-darker\">Basistarif</span>\n                                </span>\n                            </li>\n                            <li class=\"recharts-legend-item legend-item-1\" style=\"display: inline-block; margin-right: 10px;\">\n                                <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n                                    <title>\n                                    </title>\n                                    <desc>\n                                    </desc>\n                                    <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\">\n                                    </path>\n                                </svg>\n                                <span class=\"recharts-legend-item-text\" style=\"color: rgb(78, 204, 193);\">\n                                    <span class=\"text-color-darker\">Diesel</span>\n                                </span>\n                            </li>\n                            <li class=\"recharts-legend-item legend-item-2\" style=\"display: inline-block; margin-right: 10px;\">\n                                <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n                                    <title>\n                                    </title>\n                                    <desc>\n                                    </desc>\n                                    <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\">\n                                    </path>\n                                </svg>\n                                <span class=\"recharts-legend-item-text\" style=\"color: rgb(161, 218, 163);\">\n                                    <span class=\"text-color-darker\">Maut</span>\n                                </span>\n                            </li>\n                            <li class=\"recharts-legend-item legend-item-3\" style=\"display: inline-block; margin-right: 10px;\">\n                                <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n                                    <title>\n                                    </title>\n                                    <desc>\n                                    </desc>\n                                    <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\">\n                                    </path>\n                                </svg>\n                                <span class=\"recharts-legend-item-text\" style=\"color: rgb(255, 142, 60);\">\n                                    <span class=\"text-color-darker\">Zuschläge</span>\n                                </span>\n                            </li>\n                        </ul>\n                    </div>\n                    <div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(10px, 10px);\">\n                        <div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\">\n                            <p class=\"recharts-tooltip-label\" style=\"margin: 0px;\">\n                            </p>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"flex-1-1 max-width-500\">\n        <label>Filled PieChart with inner labels</label>\n        <div class=\"panel panel-default panel-body margin-bottom-0 height-300\">\n            <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\">\n                <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 268px; max-width: 426px;\">\n                    <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"426\" height=\"268\" viewBox=\"0 0 426 268\" style=\"width: 100%; height: 100%;\">\n                        <title>\n                        </title>\n                        <desc>\n                        </desc>\n                        <defs>\n                            <clipPath id=\"recharts5-clip\">\n                                <rect x=\"5\" y=\"5\" height=\"238\" width=\"416\">\n                                </rect>\n                            </clipPath>\n                        </defs>\n                        <g class=\"recharts-layer recharts-pie\" tabindex=\"0\">\n                            <g class=\"recharts-layer\">\n                                <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n                                    <path cx=\"213\" cy=\"124\" name=\"Basistarif\" stroke=\"#fff\" fill=\"#67abc5 \" color=\"color-coldplay-fountain\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 308.2,124\n    A 95.2,95.2,0,\n    0,0,\n    155.16522844374782,48.38135680246488\n  L 213,124 Z\" role=\"img\">\n                                    </path>\n                                </g>\n                                <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n                                    <path cx=\"213\" cy=\"124\" name=\"Diesel\" stroke=\"#fff\" fill=\"#4eccc1 \" color=\"color-coldplay-turquoise\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 155.16522844374782,48.38135680246488\n    A 95.2,95.2,0,\n    0,0,\n    118.57226429424794,136.101352382467\n  L 213,124 Z\" role=\"img\">\n                                    </path>\n                                </g>\n                                <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n                                    <path cx=\"213\" cy=\"124\" name=\"Maut\" stroke=\"#fff\" fill=\"#a1daa3 \" color=\"color-coldplay-moos\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 118.57226429424794,136.101352382467\n    A 95.2,95.2,0,\n    0,0,\n    141.21817979511525,186.53327344761027\n  L 213,124 Z\" role=\"img\">\n                                    </path>\n                                </g>\n                            </g>\n                            <g class=\"recharts-layer recharts-pie-labels\">\n                                <g class=\"recharts-layer\">\n                                    <text x=\"201.69112060773637\" y=\"77.76290183314663\" fill=\"white\" text-anchor=\"end\" dominant-baseline=\"central\">46.8 %</text>\n                                </g>\n                                <g class=\"recharts-layer\">\n                                    <text x=\"201.69112060773634\" y=\"170.23709816685337\" fill=\"white\" text-anchor=\"end\" dominant-baseline=\"central\">22 %</text>\n                                </g>\n                                <g class=\"recharts-layer\">\n                                    <text x=\"255.22643894500987\" y=\"145.97015826122683\" fill=\"white\" text-anchor=\"start\" dominant-baseline=\"central\">12.4 %</text>\n                                </g>\n                            </g>\n                        </g>\n                    </svg>\n                    <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 416px; height: auto; left: 5px; bottom: 5px;\">\n                        <ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\">\n                            <li class=\"recharts-legend-item legend-item-0\" style=\"display: inline-block; margin-right: 10px;\">\n                                <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n                                    <title>\n                                    </title>\n                                    <desc>\n                                    </desc>\n                                    <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\">\n                                    </path>\n                                </svg>\n                                <span class=\"recharts-legend-item-text\" style=\"color: rgb(103, 171, 197);\">\n                                    <span class=\"text-color-darker\">Basistarif</span>\n                                </span>\n                            </li>\n                            <li class=\"recharts-legend-item legend-item-1\" style=\"display: inline-block; margin-right: 10px;\">\n                                <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n                                    <title>\n                                    </title>\n                                    <desc>\n                                    </desc>\n                                    <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\">\n                                    </path>\n                                </svg>\n                                <span class=\"recharts-legend-item-text\" style=\"color: rgb(78, 204, 193);\">\n                                    <span class=\"text-color-darker\">Diesel</span>\n                                </span>\n                            </li>\n                            <li class=\"recharts-legend-item legend-item-2\" style=\"display: inline-block; margin-right: 10px;\">\n                                <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n                                    <title>\n                                    </title>\n                                    <desc>\n                                    </desc>\n                                    <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\">\n                                    </path>\n                                </svg>\n                                <span class=\"recharts-legend-item-text\" style=\"color: rgb(161, 218, 163);\">\n                                    <span class=\"text-color-darker\">Maut</span>\n                                </span>\n                            </li>\n                        </ul>\n                    </div>\n                    <div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(10px, 10px);\">\n                        <div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\">\n                            <p class=\"recharts-tooltip-label\" style=\"margin: 0px;\">\n                            </p>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "PieChart",
+                  "rows": [
+                    {
+                      "name": "width",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The width of chart container."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The height of chart container."
+                    },
+                    {
+                      "name": "innerRadius",
+                      "type": "String | Number",
+                      "default": "60",
+                      "description": "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."
+                    },
+                    {
+                      "name": "outerRadius",
+                      "type": "String | Number",
+                      "default": "80",
+                      "description": "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."
+                    },
+                    {
+                      "name": "data",
+                      "type": "Array",
+                      "default": "",
+                      "description": "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\" }]"
+                    },
+                    {
+                      "name": "dataKey",
+                      "type": "string | number | ((obj: T) => any)",
+                      "default": "value",
+                      "description": "The key of data used for the PieChart."
+                    },
+                    {
+                      "name": "dataUnit",
+                      "type": "String | Number",
+                      "default": "",
+                      "description": "The unit of data displayed in the PieChart."
+                    },
+                    {
+                      "name": "nameKey",
+                      "type": "String",
+                      "default": "name",
+                      "description": "The key of each sector name."
+                    },
+                    {
+                      "name": "color",
+                      "type": "Function",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "filled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set to \"true\" if the chart should be filled. This will set the \"innerRadius\" and the \"paddingAngle\" to 0."
+                    },
+                    {
+                      "name": "labels",
+                      "type": "Function | Boolean",
+                      "default": "true",
+                      "description": "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."
+                    },
+                    {
+                      "name": "innerLabels",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "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."
+                    },
+                    {
+                      "name": "paddingAngle",
+                      "type": "Number",
+                      "default": "3",
+                      "description": "The angle between two sectors."
+                    },
+                    {
+                      "name": "pieOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie"
+                    },
+                    {
+                      "name": "containerOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer"
+                    },
+                    {
+                      "name": "tooltip",
+                      "type": "ChartTooltip | Boolean",
+                      "default": "",
+                      "description": "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"
+                    },
+                    {
+                      "name": "legend",
+                      "type": "Legend | Boolean",
+                      "default": "<Legend />",
+                      "description": "Shows the provided Legend component otherwise shows nothing."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Legend",
+                  "rows": [
+                    {
+                      "name": "iconType",
+                      "type": "String",
+                      "default": "square",
+                      "description": "Defines the type of the leading icon."
+                    },
+                    {
+                      "name": "iconSize",
+                      "type": "String",
+                      "default": "12",
+                      "description": "Defines the size of the leading icon."
+                    },
+                    {
+                      "name": "layout",
+                      "type": "String",
+                      "default": "vertical",
+                      "description": "Defines the layout of the legend."
+                    },
+                    {
+                      "name": "align",
+                      "type": "String",
+                      "default": "right",
+                      "description": "Defines the alignment of the legend relative to the chart."
+                    },
+                    {
+                      "name": "verticalAlign",
+                      "type": "String",
+                      "default": "top",
+                      "description": "Defines the vertical alignment of the legend relative to the chart."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Basistarif",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 368px; max-width: 568px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"568\" height=\"368\" viewBox=\"0 0 568 368\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts7-clip\"><rect x=\"5\" y=\"5\" height=\"358\" width=\"455\"></rect></clipPath></defs><g class=\"recharts-layer recharts-pie\" tabindex=\"0\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g></g></g></svg><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 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 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 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 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></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport PieChart from '@rio-cloud/rio-uikit/PieChart';\nimport Sector from '@rio-cloud/rio-uikit/Sector';\nimport Legend, { type LegendPayload } from '@rio-cloud/rio-uikit/Legend';\n\ntype CustomData = {\n    label: string;\n    color: string;\n    costs: number;\n};\n\nexport default () => {\n    const [activeItem, setActiveItem] = useState<LegendPayload | null>(null);\n    const [activeIndex, setActiveIndex] = useState<number>(0);\n\n    const handleMouseEnter = (payload: LegendPayload, index: number) => {\n        setActiveItem(payload);\n        setActiveIndex(index);\n    };\n\n    // biome-ignore lint/suspicious/noExplicitAny: <explanation>\n    const renderActiveShape = (props: any) => {\n        const {\n            cx,\n            cy,\n            midAngle,\n            innerRadius,\n            outerRadius,\n            startAngle,\n            endAngle,\n            fill,\n            payload,\n            percent,\n            value,\n            label,\n        } = props;\n\n        const RADIAN = Math.PI / 180;\n        const sin = Math.sin(-RADIAN * midAngle);\n        const cos = Math.cos(-RADIAN * midAngle);\n        const sx = cx + (outerRadius + 10) * cos;\n        const sy = cy + (outerRadius + 10) * sin;\n        const mx = cx + (outerRadius + 30) * cos;\n        const my = cy + (outerRadius + 30) * sin;\n        const ex = mx + (cos >= 0 ? 1 : -1) * 22;\n        const ey = my;\n        const textAnchor = cos >= 0 ? 'start' : 'end';\n\n        return (\n            <g>\n                <text x={cx} y={cy} dy={8} textAnchor='middle' fill={fill}>\n                    {payload.name}\n                </text>\n                <Sector\n                    cx={cx}\n                    cy={cy}\n                    innerRadius={innerRadius}\n                    outerRadius={outerRadius}\n                    startAngle={startAngle}\n                    endAngle={endAngle}\n                    fill={fill}\n                />\n                <Sector\n                    cx={cx}\n                    cy={cy}\n                    startAngle={startAngle}\n                    endAngle={endAngle}\n                    innerRadius={outerRadius + 6}\n                    outerRadius={outerRadius + 10}\n                    fill={fill}\n                />\n                <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill='none' />\n                <circle cx={ex} cy={ey} r={2} fill={fill} stroke='none' />\n                <text\n                    x={ex + (cos >= 0 ? 1 : -1) * 12}\n                    y={ey}\n                    textAnchor={textAnchor}\n                    fill='#333'\n                >{`${label}:${value} €`}</text>\n                <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill='#999'>\n                    {`(Rate ${(percent * 100).toFixed(2)}%)`}\n                </text>\n            </g>\n        );\n    };\n\n    return (\n        <div className='max-width-600'>\n            <label>PieChart with custom legend</label>\n            <div className='panel panel-default panel-body margin-bottom-0 height-400'>\n                <PieChart\n                    data={data}\n                    dataKey={(entry: CustomData) => entry.costs}\n                    nameKey='label'\n                    dataUnit='%'\n                    innerRadius={90}\n                    outerRadius={110}\n                    tooltip={false}\n                    pieOptions={{\n                        label: false,\n                        labelLine: false,\n                        activeIndex,\n                        activeShape: renderActiveShape,\n                        onMouseEnter: handleMouseEnter,\n                    }}\n                    legend={\n                        <Legend\n                            iconType='square'\n                            iconSize={0}\n                            onMouseEnter={handleMouseEnter}\n                            formatter={(value: string, entry: CustomData) => {\n                                const isActive = activeItem?.value === value;\n\n                                const legendWrapperClasses = classNames(\n                                    'display-inline-flex',\n                                    'align-items-center',\n                                    'gap-5',\n                                    'cursor-pointer',\n                                    'padding-y-3 padding-x-5',\n                                    'rounded',\n                                    isActive && 'bg-lightest'\n                                );\n\n                                return (\n                                    <span className={legendWrapperClasses}>\n                                        <span\n                                            className='rounded height-15 width-15'\n                                            style={{ backgroundColor: entry.color }}\n                                        />\n                                        <span className='text-color-dark'>{value}</span>\n                                    </span>\n                                );\n                            }}\n                        />\n                    }\n                />\n            </div>\n        </div>\n    );\n};\n\nconst data: CustomData[] = [\n    {\n        label: 'Basistarif',\n        color: 'color-coldplay-fountain',\n        costs: 46.8,\n    },\n    {\n        label: 'Diesel',\n        color: 'color-coldplay-turquoise',\n        costs: 22.0,\n    },\n    {\n        label: 'Maut',\n        color: 'color-coldplay-moos',\n        costs: 12.4,\n    },\n    {\n        label: 'Zuschläge',\n        color: 'brand-warning',\n        costs: 3.88,\n    },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-600\">\n    <label>PieChart with custom legend</label>\n    <div class=\"panel panel-default panel-body margin-bottom-0 height-400\">\n        <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\">\n            <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 368px; max-width: 568px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"568\" height=\"368\" viewBox=\"0 0 568 368\" style=\"width: 100%; height: 100%;\">\n                    <title>\n                    </title>\n                    <desc>\n                    </desc>\n                    <defs>\n                        <clipPath id=\"recharts7-clip\">\n                            <rect x=\"5\" y=\"5\" height=\"358\" width=\"455\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-pie\" tabindex=\"0\">\n                        <g class=\"recharts-layer\">\n                            <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n                                <g class=\"recharts-layer recharts-active-shape\">\n                                    <g>\n                                        <text x=\"232.5\" y=\"184\" dy=\"8\" text-anchor=\"middle\" fill=\"#67abc5 \">\n                                        </text>\n                                        <path cx=\"232.5\" cy=\"184\" fill=\"#67abc5 \" class=\"recharts-sector\" d=\"M 342.5,184\n    A 110,110,0,\n    1,0,\n    123.51661944363775,198.92054833131556\n  L 143.33177954479453,196.20772136198545\n            A 90,90,0,\n            1,1,\n            322.5,184 Z\" role=\"img\">\n                                        </path>\n                                        <path cx=\"232.5\" cy=\"184\" fill=\"#67abc5 \" class=\"recharts-sector\" d=\"M 352.5,184\n    A 120,120,0,\n    1,0,\n    113.60903939305936,200.2769618159806\n  L 117.57207141329071,199.7343964221146\n            A 116,116,0,\n            1,1,\n            348.5,184 Z\" role=\"img\">\n                                        </path>\n                                        <path d=\"M220.55605746401073,64.59588685184674L218.5654003746792,44.695201327154535L196.5654003746792,44.695201327154535\" stroke=\"#67abc5 \" fill=\"none\">\n                                        </path>\n                                        <circle cx=\"196.5654003746792\" cy=\"44.695201327154535\" r=\"2\" fill=\"#67abc5 \" stroke=\"none\">\n                                        </circle>\n                                        <text x=\"184.5654003746792\" y=\"44.695201327154535\" text-anchor=\"end\" fill=\"#333\">Basistarif:46.8 €</text>\n                                        <text x=\"184.5654003746792\" y=\"44.695201327154535\" dy=\"18\" text-anchor=\"end\" fill=\"#999\">(Rate 55.01%)</text>\n                                    </g>\n                                </g>\n                            </g>\n                            <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n                                <path cx=\"232.5\" cy=\"184\" name=\"Diesel\" stroke=\"#fff\" fill=\"#4eccc1 \" color=\"color-coldplay-turquoise\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 124.44685854360776,204.60384967439066\n    A 110,110,0,\n    0,0,\n    249.8513982228161,292.622875029679\n  L 246.69659854594045,272.8732613879191\n            A 90,90,0,\n            0,1,\n            144.0928842629518,200.8576951881378 Z\" role=\"img\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n                                <path cx=\"232.5\" cy=\"184\" name=\"Maut\" stroke=\"#fff\" fill=\"#a1daa3 \" color=\"color-coldplay-moos\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 255.51250076912817,291.56590913644936\n    A 110,110,0,\n    0,0,\n    329.4738262359847,235.92376166220095\n  L 311.84222146580566,226.48307772361898\n            A 90,90,0,\n            0,1,\n            251.32840972019576,272.00847111164035 Z\" role=\"img\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n                                <path cx=\"232.5\" cy=\"184\" name=\"Zuschläge\" stroke=\"#fff\" fill=\"#ff8e3c \" color=\"brand-warning\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 332.0584066957343,230.77738402483374\n    A 110,110,0,\n    0,0,\n    340.96051351603654,202.33894783889343\n  L 321.2404201494844,199.00459368636734\n            A 90,90,0,\n            0,1,\n            313.9568782056008,222.2724051112276 Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                </svg>\n                <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: auto; height: auto; right: 5px; top: 5px;\">\n                    <ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: left;\">\n                        <li class=\"recharts-legend-item legend-item-0\" style=\"display: block; margin-right: 10px;\">\n                            <svg class=\"recharts-surface\" width=\"0\" height=\"0\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n                                <title>\n                                </title>\n                                <desc>\n                                </desc>\n                                <path fill=\"#67abc5 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M-16,-16h32v32h-32Z\">\n                                </path>\n                            </svg>\n                            <span class=\"recharts-legend-item-text\" style=\"color: rgb(103, 171, 197);\">\n                                <span class=\"display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded\">\n                                    <span class=\"rounded height-15 width-15\" style=\"background-color: rgb(103, 171, 197);\">\n                                    </span>\n                                    <span class=\"text-color-dark\">Basistarif</span>\n                                </span>\n                            </span>\n                        </li>\n                        <li class=\"recharts-legend-item legend-item-1\" style=\"display: block; margin-right: 10px;\">\n                            <svg class=\"recharts-surface\" width=\"0\" height=\"0\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n                                <title>\n                                </title>\n                                <desc>\n                                </desc>\n                                <path fill=\"#4eccc1 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M-16,-16h32v32h-32Z\">\n                                </path>\n                            </svg>\n                            <span class=\"recharts-legend-item-text\" style=\"color: rgb(78, 204, 193);\">\n                                <span class=\"display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded\">\n                                    <span class=\"rounded height-15 width-15\" style=\"background-color: rgb(78, 204, 193);\">\n                                    </span>\n                                    <span class=\"text-color-dark\">Diesel</span>\n                                </span>\n                            </span>\n                        </li>\n                        <li class=\"recharts-legend-item legend-item-2\" style=\"display: block; margin-right: 10px;\">\n                            <svg class=\"recharts-surface\" width=\"0\" height=\"0\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n                                <title>\n                                </title>\n                                <desc>\n                                </desc>\n                                <path fill=\"#a1daa3 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M-16,-16h32v32h-32Z\">\n                                </path>\n                            </svg>\n                            <span class=\"recharts-legend-item-text\" style=\"color: rgb(161, 218, 163);\">\n                                <span class=\"display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded\">\n                                    <span class=\"rounded height-15 width-15\" style=\"background-color: rgb(161, 218, 163);\">\n                                    </span>\n                                    <span class=\"text-color-dark\">Maut</span>\n                                </span>\n                            </span>\n                        </li>\n                        <li class=\"recharts-legend-item legend-item-3\" style=\"display: block; margin-right: 10px;\">\n                            <svg class=\"recharts-surface\" width=\"0\" height=\"0\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n                                <title>\n                                </title>\n                                <desc>\n                                </desc>\n                                <path fill=\"#ff8e3c \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M-16,-16h32v32h-32Z\">\n                                </path>\n                            </svg>\n                            <span class=\"recharts-legend-item-text\" style=\"color: rgb(255, 142, 60);\">\n                                <span class=\"display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded\">\n                                    <span class=\"rounded height-15 width-15\" style=\"background-color: rgb(255, 142, 60);\">\n                                    </span>\n                                    <span class=\"text-color-dark\">Zuschläge</span>\n                                </span>\n                            </span>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "PieChart",
+                  "rows": [
+                    {
+                      "name": "width",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The width of chart container."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The height of chart container."
+                    },
+                    {
+                      "name": "innerRadius",
+                      "type": "String | Number",
+                      "default": "60",
+                      "description": "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."
+                    },
+                    {
+                      "name": "outerRadius",
+                      "type": "String | Number",
+                      "default": "80",
+                      "description": "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."
+                    },
+                    {
+                      "name": "data",
+                      "type": "Array",
+                      "default": "",
+                      "description": "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\" }]"
+                    },
+                    {
+                      "name": "dataKey",
+                      "type": "string | number | ((obj: T) => any)",
+                      "default": "value",
+                      "description": "The key of data used for the PieChart."
+                    },
+                    {
+                      "name": "dataUnit",
+                      "type": "String | Number",
+                      "default": "",
+                      "description": "The unit of data displayed in the PieChart."
+                    },
+                    {
+                      "name": "nameKey",
+                      "type": "String",
+                      "default": "name",
+                      "description": "The key of each sector name."
+                    },
+                    {
+                      "name": "color",
+                      "type": "Function",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "filled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set to \"true\" if the chart should be filled. This will set the \"innerRadius\" and the \"paddingAngle\" to 0."
+                    },
+                    {
+                      "name": "labels",
+                      "type": "Function | Boolean",
+                      "default": "true",
+                      "description": "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."
+                    },
+                    {
+                      "name": "innerLabels",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "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."
+                    },
+                    {
+                      "name": "paddingAngle",
+                      "type": "Number",
+                      "default": "3",
+                      "description": "The angle between two sectors."
+                    },
+                    {
+                      "name": "pieOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie"
+                    },
+                    {
+                      "name": "containerOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer"
+                    },
+                    {
+                      "name": "tooltip",
+                      "type": "ChartTooltip | Boolean",
+                      "default": "",
+                      "description": "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"
+                    },
+                    {
+                      "name": "legend",
+                      "type": "Legend | Boolean",
+                      "default": "<Legend />",
+                      "description": "Shows the provided Legend component otherwise shows nothing."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Legend",
+                  "rows": [
+                    {
+                      "name": "iconType",
+                      "type": "String",
+                      "default": "square",
+                      "description": "Defines the type of the leading icon."
+                    },
+                    {
+                      "name": "iconSize",
+                      "type": "String",
+                      "default": "12",
+                      "description": "Defines the size of the leading icon."
+                    },
+                    {
+                      "name": "layout",
+                      "type": "String",
+                      "default": "vertical",
+                      "description": "Defines the layout of the legend."
+                    },
+                    {
+                      "name": "align",
+                      "type": "String",
+                      "default": "right",
+                      "description": "Defines the alignment of the legend relative to the chart."
+                    },
+                    {
+                      "name": "verticalAlign",
+                      "type": "String",
+                      "default": "top",
+                      "description": "Defines the vertical alignment of the legend relative to the chart."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Customer Satisfaction",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 125px; max-width: 250px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"250\" height=\"125\" viewBox=\"0 0 250 125\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts9-clip\"><rect x=\"5\" y=\"5\" height=\"115\" width=\"240\"></rect></clipPath></defs><g class=\"recharts-layer recharts-pie\" tabindex=\"0\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g></g></g></svg></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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import PieChart from '@rio-cloud/rio-uikit/PieChart';\nimport ChartNeedle from '@rio-cloud/rio-uikit/ChartNeedle';\n\nexport default () => {\n    return (\n        <>\n            <label>PieChart with a needle</label>\n            <div className='panel panel-default panel-body margin-bottom-0 '>\n                <div className='display-flex flex-column position-relative width-250 height-250 max-width-500'>\n                    <PieChart\n                        data={data}\n                        dataKey='value'\n                        filled={false}\n                        paddingAngle={1}\n                        innerRadius={90}\n                        outerRadius={98}\n                        labels={false}\n                        legend={false}\n                        tooltip={false}\n                        containerOptions={{ height: '50%' }}\n                        pieOptions={{\n                            startAngle: 180,\n                            endAngle: 0,\n                            cy: 120,\n                        }}\n                    />\n                    <div className='position-absolute top-25pct left-50pct'>\n                        <ChartNeedle rotation={67} height='80px' y='-30%' />\n                    </div>\n                    <div className='margin-20 text-center'>\n                        <div className='text-color-dark text-size-16'>Customer Satisfaction</div>\n                    </div>\n                </div>\n            </div>\n        </>\n    );\n};\n\nconst data = [\n    {\n        color: 'color-rating-1',\n        value: 20,\n    },\n    {\n        color: 'color-rating-2',\n        value: 20,\n    },\n    {\n        color: 'color-rating-3',\n        value: 20,\n    },\n    {\n        color: 'color-rating-4',\n        value: 20,\n    },\n    {\n        color: 'color-rating-5',\n        value: 20,\n    },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>PieChart with a needle</label>\n<div class=\"panel panel-default panel-body margin-bottom-0 \">\n    <div class=\"display-flex flex-column position-relative width-250 height-250 max-width-500\">\n        <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 50%; min-width: 0px;\">\n            <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 125px; max-width: 250px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"250\" height=\"125\" viewBox=\"0 0 250 125\" style=\"width: 100%; height: 100%;\">\n                    <title>\n                    </title>\n                    <desc>\n                    </desc>\n                    <defs>\n                        <clipPath id=\"recharts9-clip\">\n                            <rect x=\"5\" y=\"5\" height=\"115\" width=\"240\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-pie\" tabindex=\"0\">\n                        <g class=\"recharts-layer\">\n                            <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n                                <path cx=\"125\" cy=\"125\" name=\"0\" stroke=\"#fff\" fill=\"#e22837 \" color=\"color-rating-1\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 27,124.99999999999999\n    A 98,98,0,\n    0,1,\n    44.91979996315739,68.5096330153603\n  L 51.45695914983841,73.12109154471864\n            A 90,90,0,\n            0,0,\n            35,124.99999999999999 Z\" role=\"img\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n                                <path cx=\"125\" cy=\"125\" name=\"1\" stroke=\"#fff\" fill=\"#ff8e3c \" color=\"color-rating-2\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 45.9178894099074,67.12064457324732\n    A 98,98,0,\n    0,1,\n    93.74198768878912,32.118695819060605\n  L 96.29366216317369,39.70084309913729\n            A 90,90,0,\n            0,0,\n            52.37357190705782,71.84548991420672 Z\" role=\"img\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n                                <path cx=\"125\" cy=\"125\" name=\"2\" stroke=\"#fff\" fill=\"#f8c575 \" color=\"color-rating-3\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 95.36775070645643,31.587314556291204\n    A 98,98,0,\n    0,1,\n    154.63224929354354,31.58731455629119\n  L 152.21329016753998,39.21283989863477\n            A 90,90,0,\n            0,0,\n            97.78670983245999,39.21283989863478 Z\" role=\"img\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n                                <path cx=\"125\" cy=\"125\" name=\"3\" stroke=\"#fff\" fill=\"#5cb85c \" color=\"color-rating-4\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 156.25801231121085,32.11869581906059\n    A 98,98,0,\n    0,1,\n    204.08211059009258,67.12064457324732\n  L 197.62642809294218,71.84548991420672\n            A 90,90,0,\n            0,0,\n            153.7063378368263,39.70084309913727 Z\" role=\"img\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n                                <path cx=\"125\" cy=\"125\" name=\"4\" stroke=\"#fff\" fill=\"#4b924c \" color=\"color-rating-5\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 205.0802000368426,68.50963301536027\n    A 98,98,0,\n    0,1,\n    223,125\n  L 215,125\n            A 90,90,0,\n            0,0,\n            198.54304085016156,73.12109154471861 Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                </svg>\n            </div>\n        </div>\n        <div class=\"position-absolute top-25pct left-50pct\">\n            <div class=\"position-relative\">\n                <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;\">\n                </div>\n            </div>\n        </div>\n        <div class=\"margin-20 text-center\">\n            <div class=\"text-color-dark text-size-16\">Customer Satisfaction</div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "PieChart",
+                  "rows": [
+                    {
+                      "name": "width",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The width of chart container."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The height of chart container."
+                    },
+                    {
+                      "name": "innerRadius",
+                      "type": "String | Number",
+                      "default": "60",
+                      "description": "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."
+                    },
+                    {
+                      "name": "outerRadius",
+                      "type": "String | Number",
+                      "default": "80",
+                      "description": "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."
+                    },
+                    {
+                      "name": "data",
+                      "type": "Array",
+                      "default": "",
+                      "description": "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\" }]"
+                    },
+                    {
+                      "name": "dataKey",
+                      "type": "string | number | ((obj: T) => any)",
+                      "default": "value",
+                      "description": "The key of data used for the PieChart."
+                    },
+                    {
+                      "name": "dataUnit",
+                      "type": "String | Number",
+                      "default": "",
+                      "description": "The unit of data displayed in the PieChart."
+                    },
+                    {
+                      "name": "nameKey",
+                      "type": "String",
+                      "default": "name",
+                      "description": "The key of each sector name."
+                    },
+                    {
+                      "name": "color",
+                      "type": "Function",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "filled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set to \"true\" if the chart should be filled. This will set the \"innerRadius\" and the \"paddingAngle\" to 0."
+                    },
+                    {
+                      "name": "labels",
+                      "type": "Function | Boolean",
+                      "default": "true",
+                      "description": "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."
+                    },
+                    {
+                      "name": "innerLabels",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "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."
+                    },
+                    {
+                      "name": "paddingAngle",
+                      "type": "Number",
+                      "default": "3",
+                      "description": "The angle between two sectors."
+                    },
+                    {
+                      "name": "pieOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie"
+                    },
+                    {
+                      "name": "containerOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer"
+                    },
+                    {
+                      "name": "tooltip",
+                      "type": "ChartTooltip | Boolean",
+                      "default": "",
+                      "description": "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"
+                    },
+                    {
+                      "name": "legend",
+                      "type": "Legend | Boolean",
+                      "default": "<Legend />",
+                      "description": "Shows the provided Legend component otherwise shows nothing."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Legend",
+                  "rows": [
+                    {
+                      "name": "iconType",
+                      "type": "String",
+                      "default": "square",
+                      "description": "Defines the type of the leading icon."
+                    },
+                    {
+                      "name": "iconSize",
+                      "type": "String",
+                      "default": "12",
+                      "description": "Defines the size of the leading icon."
+                    },
+                    {
+                      "name": "layout",
+                      "type": "String",
+                      "default": "vertical",
+                      "description": "Defines the layout of the legend."
+                    },
+                    {
+                      "name": "align",
+                      "type": "String",
+                      "default": "right",
+                      "description": "Defines the alignment of the legend relative to the chart."
+                    },
+                    {
+                      "name": "verticalAlign",
+                      "type": "String",
+                      "default": "top",
+                      "description": "Defines the vertical alignment of the legend relative to the chart."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}