npm - @rio-cloud/uikit-mcp - Versions diffs - 1.0.0 - Mend

@rio-cloud/uikit-mcp 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (198) hide show

package/data/pages/Components/components/radialbarcharts.json ADDED Viewed

@@ -0,0 +1,1304 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:27.326Z",
+    "source": "https://uikit.developers.rio.cloud/#components/radialBarCharts",
+    "category": "Components",
+    "section": "Charts",
+    "slug": "components/radialbarcharts",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "8dff92b58b529f36d82ac5c33eab3b807e1f0efc117b9395c22289d3d600e482"
+  },
+  "title": "RadialBarChart",
+  "lead": null,
+  "content": [
+    {
+      "heading": "RadialBarChart",
+      "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>Multiple RadialBarChart bars</label><div class=\"display-flex flex-wrap gap-15\"><div class=\"panel panel-default panel-body height-300 aspect-ratio-1\"><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: 268px;\"><svg cx=\"120\" cy=\"180\" class=\"recharts-surface\" width=\"268\" height=\"268\" viewBox=\"0 0 268 268\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts1-clip\"><rect x=\"5\" y=\"5\" height=\"238\" width=\"258\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"120\" cy=\"180\" name=\"18-24\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 76.63,180\n    A 43.370000000000005,43.370000000000005,0,\n    0,1,\n    163.37,180\n  L 147.37,180\n            A 27.37,27.37,0,\n            0,0,\n            92.63,180 Z\" role=\"img\"></path><path cx=\"120\" cy=\"180\" name=\"25-29\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 55.80499999999999,180\n    A 64.19500000000001,64.19500000000001,0,\n    0,1,\n    184.195,180\n  L 168.195,180\n            A 48.19500000000001,48.19500000000001,0,\n            0,0,\n            71.80499999999999,180 Z\" role=\"img\"></path><path cx=\"120\" cy=\"180\" name=\"30-34\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 34.980000000000004,180\n    A 85.02,85.02,0,\n    0,1,\n    205.01999999999998,180\n  L 189.01999999999998,180\n            A 69.02,69.02,0,\n            0,0,\n            50.980000000000004,180 Z\" role=\"img\"></path><path cx=\"120\" cy=\"180\" name=\"35-39\" color=\"color-warmup-corn\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 14.155000000000001,180\n    A 105.845,105.845,0,\n    0,1,\n    225.845,180\n  L 209.845,180\n            A 89.845,89.845,0,\n            0,0,\n            30.155,180 Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g></svg><div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 258px; height: auto; left: 5px; bottom: 5px;\"><ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\"><li class=\"recharts-legend-item legend-item-0\" style=\"display: inline-block; margin-right: 10px;\"><svg 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\">18-24</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\">25-29</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\">30-34</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=\"#fde082 \" 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(253, 224, 130);\"><span class=\"text-color-darker\">35-39</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 class=\"panel panel-default panel-body height-300 aspect-ratio-1\"><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: 268px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"268\" height=\"268\" viewBox=\"0 0 268 268\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts3-clip\"><rect x=\"5\" y=\"5\" height=\"258\" width=\"258\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"134\" cy=\"134\" name=\"Registrations\" color=\"color-coldplay-fountain\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 134,25.959999999999994\n    A 108.04,108.04,0,\n    1,1,\n    133.99811434627625,25.960000016455425\n  L 133.99828887920145,35.96000001493235\n            A 98.04,98.04,0,\n            1,0,\n            134,35.959999999999994 Z\" role=\"img\"></path><path cx=\"134\" cy=\"134\" name=\"Logins\" color=\"color-coldplay-moos\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 134,13.060000000000002\n    A 120.94,120.94,0,\n    1,1,\n    133.99788919880277,13.060000018420226\n  L 133.99806373172794,23.060000016897135\n            A 110.94,110.94,0,\n            1,0,\n            134,23.060000000000002 Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M134,5L209.82429754572905,29.636807725631783L256.6862906020748,94.13680772563178L256.6862906020748,173.86319227436823L209.82429754572905,238.3631922743682L134,263L58.175702454270976,238.3631922743682L11.313709397925194,173.86319227436823L11.31370939792518,94.1368077256318L58.17570245427095,29.636807725631797L133.99999999999997,5L134,5Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"134\" y1=\"5\" x2=\"134\" y2=\"-3\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"209.82429754572905\" y1=\"29.636807725631783\" x2=\"214.5265795640688\" y2=\"23.164671770632197\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"256.6862906020748\" y1=\"94.13680772563178\" x2=\"264.294742732436\" y2=\"91.6646717706322\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"256.6862906020748\" y1=\"173.86319227436823\" x2=\"264.294742732436\" y2=\"176.3353282293678\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"209.82429754572905\" y1=\"238.3631922743682\" x2=\"214.5265795640688\" y2=\"244.8353282293678\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"134\" y1=\"263\" x2=\"134\" y2=\"271\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"58.175702454270976\" y1=\"238.3631922743682\" x2=\"53.47342043593119\" y2=\"244.8353282293678\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"11.313709397925194\" y1=\"173.86319227436823\" x2=\"3.7052572675639794\" y2=\"176.3353282293678\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"11.31370939792518\" y1=\"94.1368077256318\" x2=\"3.705257267563951\" y2=\"91.66467177063222\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"58.17570245427095\" y1=\"29.636807725631797\" x2=\"53.47342043593116\" y2=\"23.16467177063221\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"133.99999999999997\" y1=\"5\" x2=\"133.99999999999997\" y2=\"-3\"></line></g></g></g></svg><div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: auto; height: auto; left: 69px; top: 114px;\"><ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: left;\"><li class=\"recharts-legend-item legend-item-0\" style=\"display: block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"12\" height=\"12\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#67abc5 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(103, 171, 197);\"><span class=\"text-color-darker\">67% Registrations</span></span></li><li class=\"recharts-legend-item legend-item-1\" style=\"display: block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"12\" height=\"12\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#a1daa3 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(161, 218, 163);\"><span class=\"text-color-darker\">56% Logins</span></span></li></ul></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import RadialBarChart from '@rio-cloud/rio-uikit/RadialBarChart';\nimport Legend from '@rio-cloud/rio-uikit/Legend';\n\nexport default () => {\n    return (\n        <>\n            <label>Multiple RadialBarChart bars</label>\n            <div className='display-flex flex-wrap gap-15'>\n                <div className='panel panel-default panel-body height-300 aspect-ratio-1'>\n                    <RadialBarChart cx={120} cy={180} data={data} dataKey='uv' cornerRadius={0} showBarLabel tooltip />\n                </div>\n                <div className='panel panel-default panel-body height-300 aspect-ratio-1'>\n                    <RadialBarChart\n                        data={data2}\n                        dataKey='value'\n                        startAngle={90}\n                        endAngle={-270}\n                        innerRadius='80%'\n                        range={[0, 100]}\n                        legend={\n                            <Legend\n                                layout='vertical'\n                                verticalAlign='middle'\n                                align='center'\n                                // biome-ignore lint/suspicious/noExplicitAny: <explanation>\n                                formatter={(label: string, entry: any) => (\n                                    <span className='text-color-darker'>{`${entry.payload.value}% ${label}`}</span>\n                                )}\n                            />\n                        }\n                    />\n                </div>\n            </div>\n        </>\n    );\n};\n\nconst data = [\n    {\n        name: '18-24',\n        uv: 31.47,\n        pv: 2400,\n    },\n    {\n        name: '25-29',\n        uv: 26.69,\n        pv: 4567,\n    },\n    {\n        name: '30-34',\n        uv: -15.69,\n        pv: 1398,\n    },\n    {\n        name: '35-39',\n        uv: 8.22,\n        pv: 9800,\n        color: 'color-warmup-corn',\n    },\n];\n\nconst data2 = [\n    { name: 'Registrations', value: 67, color: 'color-coldplay-fountain' },\n    { name: 'Logins', value: 56, color: 'color-coldplay-moos' },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>Multiple RadialBarChart bars</label>\n<div class=\"display-flex flex-wrap gap-15\">\n    <div class=\"panel panel-default panel-body height-300 aspect-ratio-1\">\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: 268px;\">\n                <svg cx=\"120\" cy=\"180\" class=\"recharts-surface\" width=\"268\" height=\"268\" viewBox=\"0 0 268 268\" 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=\"238\" width=\"258\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-area\">\n                        <g class=\"recharts-layer recharts-radial-bar-background\">\n                            <path cx=\"120\" cy=\"180\" name=\"18-24\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 76.63,180\n    A 43.370000000000005,43.370000000000005,0,\n    0,1,\n    163.37,180\n  L 147.37,180\n            A 27.37,27.37,0,\n            0,0,\n            92.63,180 Z\" role=\"img\">\n                            </path>\n                            <path cx=\"120\" cy=\"180\" name=\"25-29\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 55.80499999999999,180\n    A 64.19500000000001,64.19500000000001,0,\n    0,1,\n    184.195,180\n  L 168.195,180\n            A 48.19500000000001,48.19500000000001,0,\n            0,0,\n            71.80499999999999,180 Z\" role=\"img\">\n                            </path>\n                            <path cx=\"120\" cy=\"180\" name=\"30-34\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 34.980000000000004,180\n    A 85.02,85.02,0,\n    0,1,\n    205.01999999999998,180\n  L 189.01999999999998,180\n            A 69.02,69.02,0,\n            0,0,\n            50.980000000000004,180 Z\" role=\"img\">\n                            </path>\n                            <path cx=\"120\" cy=\"180\" name=\"35-39\" color=\"color-warmup-corn\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 14.155000000000001,180\n    A 105.845,105.845,0,\n    0,1,\n    225.845,180\n  L 209.845,180\n            A 89.845,89.845,0,\n            0,0,\n            30.155,180 Z\" role=\"img\">\n                            </path>\n                        </g>\n                        <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                            <g class=\"recharts-layer\">\n                                <path cx=\"120\" cy=\"180\" name=\"18-24\" fill=\"#ef7186 \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 76.63,180\n    A 43.370000000000005,43.370000000000005,0,\n    0,1,\n    82.95611121002477,157.4454615805167\n  L 96.62229107259346,165.76625048325437\n            A 27.37,27.37,0,\n            0,0,\n            92.63,180 Z\" role=\"img\">\n                                </path>\n                                <path cx=\"120\" cy=\"180\" name=\"25-29\" fill=\"#e878b6 \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 55.80499999999999,180\n    A 64.19500000000001,64.19500000000001,0,\n    0,1,\n    63.403284626683096,149.70462355487632\n  L 77.50948364487876,157.25546120768385\n            A 48.19500000000001,48.19500000000001,0,\n            0,0,\n            71.80499999999999,180 Z\" role=\"img\">\n                                </path>\n                                <path cx=\"120\" cy=\"180\" name=\"35-39\" color=\"color-warmup-corn\" fill=\"#fde082 \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 14.155000000000001,180\n    A 105.845,105.845,0,\n    0,1,\n    18.197939051331872,151.02579748114437\n  L 33.58679043948143,155.40566653779976\n            A 89.845,89.845,0,\n            0,0,\n            30.155,180 Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                </svg>\n                <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 258px; 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\">18-24</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\">25-29</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\">30-34</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=\"#fde082 \" 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(253, 224, 130);\">\n                                <span class=\"text-color-darker\">35-39</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 class=\"panel panel-default panel-body height-300 aspect-ratio-1\">\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: 268px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"268\" height=\"268\" viewBox=\"0 0 268 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=\"258\" width=\"258\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-area\">\n                        <g class=\"recharts-layer recharts-radial-bar-background\">\n                            <path cx=\"134\" cy=\"134\" name=\"Registrations\" color=\"color-coldplay-fountain\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 134,25.959999999999994\n    A 108.04,108.04,0,\n    1,1,\n    133.99811434627625,25.960000016455425\n  L 133.99828887920145,35.96000001493235\n            A 98.04,98.04,0,\n            1,0,\n            134,35.959999999999994 Z\" role=\"img\">\n                            </path>\n                            <path cx=\"134\" cy=\"134\" name=\"Logins\" color=\"color-coldplay-moos\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 134,13.060000000000002\n    A 120.94,120.94,0,\n    1,1,\n    133.99788919880277,13.060000018420226\n  L 133.99806373172794,23.060000016897135\n            A 110.94,110.94,0,\n            1,0,\n            134,23.060000000000002 Z\" role=\"img\">\n                            </path>\n                        </g>\n                        <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                            <g class=\"recharts-layer\">\n                                <path cx=\"134\" cy=\"134\" name=\"Registrations\" color=\"color-coldplay-fountain\" fill=\"#67abc5 \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 134,31.081383608212064\n    A5,5,0,0,1,139.2426242236025,26.08727372895217\n    A108.04,108.04,0,0,1,202.2965560771828,50.284875751174894\n    A5,5,0,0,1,202.8521776041697,57.504122730934895\n  L202.8521776041697,57.504122730934895\n      A5,5,0,0,1,195.97514214926883,58.0334063184486\n      A98.04,98.04,0,0,0,138.7573757763975,36.07549348747196\n      A5,5,0,0,1,134,31.081383608212064Z\" role=\"img\">\n                                </path>\n                                <path cx=\"134\" cy=\"134\" name=\"Logins\" color=\"color-coldplay-moos\" fill=\"#a1daa3 \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 134,18.16786456254897\n    A5,5,0,0,1,139.21562877350354,13.172516303214351\n    A120.94,120.94,0,0,1,199.20185227755002,32.141264196061485\n    A5,5,0,0,1,200.59718220786016,39.22711926941827\n  L200.59718220786016,39.22711926941827\n      A5,5,0,0,1,193.81059609452123,40.563517859360516\n      A110.94,110.94,0,0,0,138.78437122649646,23.163212821883576\n      A5,5,0,0,1,134,18.16786456254897Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                        <path cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M134,5L209.82429754572905,29.636807725631783L256.6862906020748,94.13680772563178L256.6862906020748,173.86319227436823L209.82429754572905,238.3631922743682L134,263L58.175702454270976,238.3631922743682L11.313709397925194,173.86319227436823L11.31370939792518,94.1368077256318L58.17570245427095,29.636807725631797L133.99999999999997,5L134,5Z\">\n                        </path>\n                        <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"134\" y1=\"5\" x2=\"134\" y2=\"-3\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"209.82429754572905\" y1=\"29.636807725631783\" x2=\"214.5265795640688\" y2=\"23.164671770632197\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"256.6862906020748\" y1=\"94.13680772563178\" x2=\"264.294742732436\" y2=\"91.6646717706322\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"256.6862906020748\" y1=\"173.86319227436823\" x2=\"264.294742732436\" y2=\"176.3353282293678\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"209.82429754572905\" y1=\"238.3631922743682\" x2=\"214.5265795640688\" y2=\"244.8353282293678\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"134\" y1=\"263\" x2=\"134\" y2=\"271\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"58.175702454270976\" y1=\"238.3631922743682\" x2=\"53.47342043593119\" y2=\"244.8353282293678\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"11.313709397925194\" y1=\"173.86319227436823\" x2=\"3.7052572675639794\" y2=\"176.3353282293678\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"11.31370939792518\" y1=\"94.1368077256318\" x2=\"3.705257267563951\" y2=\"91.66467177063222\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"58.17570245427095\" y1=\"29.636807725631797\" x2=\"53.47342043593116\" y2=\"23.16467177063221\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"134\" cy=\"134\" orientation=\"outer\" radius=\"129\" fill=\"none\" x1=\"133.99999999999997\" y1=\"5\" x2=\"133.99999999999997\" y2=\"-3\">\n                                </line>\n                            </g>\n                        </g>\n                    </g>\n                </svg>\n                <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: auto; height: auto; left: 69px; top: 114px;\">\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=\"12\" height=\"12\" 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\">67% Registrations</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=\"12\" height=\"12\" 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\">56% Logins</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": "RadialBarChart",
+                  "rows": [
+                    {
+                      "name": "width",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The width of chart container."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The height of chart container."
+                    },
+                    {
+                      "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 RadialBar."
+                    },
+                    {
+                      "name": "startAngle",
+                      "type": "Number",
+                      "default": "180",
+                      "description": "The start angle of all the bars."
+                    },
+                    {
+                      "name": "endAngle",
+                      "type": "Number",
+                      "default": "180",
+                      "description": "The end angle of all the bars."
+                    },
+                    {
+                      "name": "innerRadius",
+                      "type": "String | Number",
+                      "default": "30%",
+                      "description": "The innerRadius of the radial bar which is most close to the center. 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": "100%",
+                      "description": "The outerRadius of the radial bar which is most far away from the center. 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": "clockWise",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Set to \"true\" if the bars should go clockwise."
+                    },
+                    {
+                      "name": "cornerRadius",
+                      "type": "Number",
+                      "default": "30",
+                      "description": "Set the corner radius for the individual bars."
+                    },
+                    {
+                      "name": "showBarLabel",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Renders a label on top of the bars."
+                    },
+                    {
+                      "name": "background",
+                      "type": "Boolean | Function",
+                      "default": "true",
+                      "description": "If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background."
+                    },
+                    {
+                      "name": "range",
+                      "type": "Array",
+                      "default": "",
+                      "description": "Defines the min and max value for the bar."
+                    },
+                    {
+                      "name": "radialBarOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar"
+                    },
+                    {
+                      "name": "textOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text"
+                    },
+                    {
+                      "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 RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart"
+                    }
+                  ]
+                },
+                {
+                  "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%;\"><label>Circle RadialBarChart with built-in text</label><div class=\"display-flex flex-wrap gap-25\"><div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\"><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: 168px; max-width: 168px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts5-clip\"><rect x=\"5\" y=\"5\" height=\"158\" width=\"158\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"84\" cy=\"84\" name=\"Ranking\" color=\"brand-success\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 84,15.120000000000005\n    A 68.88,68.88,0,\n    1,1,\n    83.9987978172113,15.120000010491026\n  L 83.99900725672153,27.120000008663318\n            A 56.88,56.88,0,\n            1,0,\n            84,27.119999999999997 Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M84,5L130.43503493110538,20.087657444379154L159.1334647873171,59.587657444379154L159.1334647873171,108.41234255562085L130.43503493110538,147.91234255562085L84,163L37.56496506889463,147.91234255562085L8.866535212682876,108.41234255562085L8.866535212682862,59.58765744437916L37.564965068894615,20.08765744437916L83.99999999999999,5L84,5Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"5\" x2=\"84\" y2=\"-3\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"20.087657444379154\" x2=\"135.13731694944516\" y2=\"13.615521489379574\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.1334647873171\" y1=\"59.587657444379154\" x2=\"166.74191691767834\" y2=\"57.115521489379574\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.1334647873171\" y1=\"108.41234255562085\" x2=\"166.74191691767834\" y2=\"110.88447851062043\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"147.91234255562085\" x2=\"135.13731694944516\" y2=\"154.38447851062043\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"163\" x2=\"84\" y2=\"171\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.56496506889463\" y1=\"147.91234255562085\" x2=\"32.86268305055485\" y2=\"154.38447851062043\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682876\" y1=\"108.41234255562085\" x2=\"1.2580830823216473\" y2=\"110.88447851062043\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682862\" y1=\"59.58765744437916\" x2=\"1.2580830823216331\" y2=\"57.11552148937959\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.564965068894615\" y1=\"20.08765744437916\" x2=\"32.86268305055483\" y2=\"13.615521489379574\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"83.99999999999999\" y1=\"5\" x2=\"83.99999999999999\" y2=\"-3\"></line></g></g></g><text x=\"84\" y=\"88\" text-anchor=\"middle\" dominant-baseline=\"middle\" class=\"radialbarchart-text\" style=\"font-size: 250%; font-weight: normal; fill: rgb(92, 184, 92);\">82%</text></svg></div></div></div><div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\"><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: 168px; max-width: 168px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts7-clip\"><rect x=\"5\" y=\"5\" height=\"158\" width=\"158\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"84\" cy=\"84\" name=\"Ranking\" color=\"brand-success\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 22.619117797151205,119.43826886291147\n    A3,3,0,0,1,18.45993191318523,118.22898004872019\n    A73.94,73.94,0,0,1,146.41320031122976,44.35512609541672\n    A3,3,0,0,1,145.3808822028488,48.56173113708854\n  L145.3808822028488,48.56173113708854\n      A3,3,0,0,1,141.3485640944678,47.57218375605372\n      A67.94,67.94,0,0,0,23.778303681117187,115.45140525439612\n      A3,3,0,0,1,22.619117797151205,119.43826886291147Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M15.58399310102935,123.5L6.726339542029365,100.425023574603L5.432770265906413,75.74225140185536L11.829908846234545,51.86780519701177L25.291558787285872,31.13868209765019L44.500000000000014,15.583993101029336L67.57497642539701,6.726339542029351L92.25774859814462,5.432770265906413L116.13219480298821,11.829908846234531L136.8613179023498,25.291558787285858L152.41600689897066,44.50000000000001L15.58399310102935,123.5Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"15.58399310102935\" y1=\"123.5\" x2=\"8.655789870753836\" y2=\"127.5\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"6.726339542029365\" y1=\"100.425023574603\" x2=\"-1.0988412638410807\" y2=\"102.08831710114508\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"5.432770265906413\" y1=\"75.74225140185536\" x2=\"-2.523404897039782\" y2=\"74.90602369571413\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"11.829908846234545\" y1=\"51.86780519701177\" x2=\"4.5215451850937285\" y2=\"48.61391205240536\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"25.291558787285872\" y1=\"31.13868209765019\" x2=\"19.346400183466727\" y2=\"25.785637246779324\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"44.500000000000014\" y1=\"15.583993101029336\" x2=\"40.50000000000002\" y2=\"8.655789870753836\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"67.57497642539701\" y1=\"6.726339542029351\" x2=\"65.91168289885493\" y2=\"-1.098841263841095\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"92.25774859814462\" y1=\"5.432770265906413\" x2=\"93.09397630428585\" y2=\"-2.523404897039782\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"116.13219480298821\" y1=\"11.829908846234531\" x2=\"119.38608794759462\" y2=\"4.5215451850937285\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"136.8613179023498\" y1=\"25.291558787285858\" x2=\"142.21436275322066\" y2=\"19.3464001834667\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"152.41600689897066\" y1=\"44.50000000000001\" x2=\"159.34421012924616\" y2=\"40.50000000000001\"></line></g></g></g><text x=\"84\" y=\"88\" text-anchor=\"middle\" dominant-baseline=\"middle\" class=\"radialbarchart-text\" style=\"font-size: 400%; font-weight: 300; fill: rgb(92, 184, 92);\">82</text></svg></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import RadialBarChart from '@rio-cloud/rio-uikit/RadialBarChart';\n\nexport default () => {\n    const panelClasses = 'panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative';\n    return (\n        <>\n            <label>Circle RadialBarChart with built-in text</label>\n            <div className='display-flex flex-wrap gap-25'>\n                <div className={panelClasses}>\n                    <RadialBarChart\n                        data={data}\n                        dataKey='value'\n                        startAngle={90}\n                        endAngle={-270}\n                        innerRadius='80%'\n                        legend={false}\n                        range={[0, 100]}\n                        textOptions={{\n                            x: 84,\n                            y: 88,\n                            text: '82%',\n                            size: '250%',\n                            color: 'brand-success',\n                        }}\n                    />\n                </div>\n                <div className={panelClasses}>\n                    <RadialBarChart\n                        data={data}\n                        dataKey='value'\n                        startAngle={210}\n                        endAngle={30}\n                        innerRadius='90%'\n                        legend={false}\n                        range={[0, 100]}\n                        textOptions={{\n                            x: 84,\n                            y: 88,\n                            text: '82',\n                            size: '400%',\n                            weight: '300',\n                            color: 'brand-success',\n                        }}\n                    />\n                </div>\n            </div>\n        </>\n    );\n};\n\nconst data = [\n    {\n        name: 'Ranking',\n        value: 82,\n        color: 'brand-success',\n    },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>Circle RadialBarChart with built-in text</label>\n<div class=\"display-flex flex-wrap gap-25\">\n    <div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\">\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: 168px; max-width: 168px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" 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=\"158\" width=\"158\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-area\">\n                        <g class=\"recharts-layer recharts-radial-bar-background\">\n                            <path cx=\"84\" cy=\"84\" name=\"Ranking\" color=\"brand-success\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 84,15.120000000000005\n    A 68.88,68.88,0,\n    1,1,\n    83.9987978172113,15.120000010491026\n  L 83.99900725672153,27.120000008663318\n            A 56.88,56.88,0,\n            1,0,\n            84,27.119999999999997 Z\" role=\"img\">\n                            </path>\n                        </g>\n                        <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                            <g class=\"recharts-layer\">\n                                <path cx=\"84\" cy=\"84\" name=\"Ranking\" color=\"brand-success\" fill=\"#5cb85c \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 84,21.406914119848672\n    A5.9999999999999964,5.9999999999999964,0,0,1,90.57251908396945,15.434291421360953\n    A68.88,68.88,0,1,1,16.146000433270558,95.84437177727378\n    A5.9999999999999964,5.9999999999999964,0,0,1,21.593586718835482,88.83052599418457\n  L21.593586718835482,88.83052599418457\n      A5.9999999999999964,5.9999999999999964,0,0,1,27.967254713188566,93.78089237356754\n      A56.88,56.88,0,1,0,89.42748091603053,27.37953681833639\n      A5.9999999999999964,5.9999999999999964,0,0,1,84,21.406914119848672Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                        <path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M84,5L130.43503493110538,20.087657444379154L159.1334647873171,59.587657444379154L159.1334647873171,108.41234255562085L130.43503493110538,147.91234255562085L84,163L37.56496506889463,147.91234255562085L8.866535212682876,108.41234255562085L8.866535212682862,59.58765744437916L37.564965068894615,20.08765744437916L83.99999999999999,5L84,5Z\">\n                        </path>\n                        <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"5\" x2=\"84\" y2=\"-3\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"20.087657444379154\" x2=\"135.13731694944516\" y2=\"13.615521489379574\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.1334647873171\" y1=\"59.587657444379154\" x2=\"166.74191691767834\" y2=\"57.115521489379574\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.1334647873171\" y1=\"108.41234255562085\" x2=\"166.74191691767834\" y2=\"110.88447851062043\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"147.91234255562085\" x2=\"135.13731694944516\" y2=\"154.38447851062043\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"163\" x2=\"84\" y2=\"171\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.56496506889463\" y1=\"147.91234255562085\" x2=\"32.86268305055485\" y2=\"154.38447851062043\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682876\" y1=\"108.41234255562085\" x2=\"1.2580830823216473\" y2=\"110.88447851062043\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682862\" y1=\"59.58765744437916\" x2=\"1.2580830823216331\" y2=\"57.11552148937959\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.564965068894615\" y1=\"20.08765744437916\" x2=\"32.86268305055483\" y2=\"13.615521489379574\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"83.99999999999999\" y1=\"5\" x2=\"83.99999999999999\" y2=\"-3\">\n                                </line>\n                            </g>\n                        </g>\n                    </g>\n                    <text x=\"84\" y=\"88\" text-anchor=\"middle\" dominant-baseline=\"middle\" class=\"radialbarchart-text\" style=\"font-size: 250%; font-weight: normal; fill: rgb(92, 184, 92);\">82%</text>\n                </svg>\n            </div>\n        </div>\n    </div>\n    <div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\">\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: 168px; max-width: 168px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" 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=\"158\" width=\"158\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-area\">\n                        <g class=\"recharts-layer recharts-radial-bar-background\">\n                            <path cx=\"84\" cy=\"84\" name=\"Ranking\" color=\"brand-success\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 22.619117797151205,119.43826886291147\n    A3,3,0,0,1,18.45993191318523,118.22898004872019\n    A73.94,73.94,0,0,1,146.41320031122976,44.35512609541672\n    A3,3,0,0,1,145.3808822028488,48.56173113708854\n  L145.3808822028488,48.56173113708854\n      A3,3,0,0,1,141.3485640944678,47.57218375605372\n      A67.94,67.94,0,0,0,23.778303681117187,115.45140525439612\n      A3,3,0,0,1,22.619117797151205,119.43826886291147Z\" role=\"img\">\n                            </path>\n                        </g>\n                        <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                            <g class=\"recharts-layer\">\n                                <path cx=\"84\" cy=\"84\" name=\"Ranking\" color=\"brand-success\" fill=\"#5cb85c \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 22.619117797151205,119.43826886291147\n    A3,3,0,0,1,18.45993191318523,118.22898004872019\n    A73.94,73.94,0,0,1,97.30090260917737,11.266173001957483\n    A3,3,0,0,1,99.68683872214955,14.881213184075122\n  L99.68683872214955,14.881213184075122\n      A3,3,0,0,1,96.2215759165203,17.168295831119707\n      A67.94,67.94,0,0,0,23.778303681117187,115.45140525439612\n      A3,3,0,0,1,22.619117797151205,119.43826886291147Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                        <path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M15.58399310102935,123.5L6.726339542029365,100.425023574603L5.432770265906413,75.74225140185536L11.829908846234545,51.86780519701177L25.291558787285872,31.13868209765019L44.500000000000014,15.583993101029336L67.57497642539701,6.726339542029351L92.25774859814462,5.432770265906413L116.13219480298821,11.829908846234531L136.8613179023498,25.291558787285858L152.41600689897066,44.50000000000001L15.58399310102935,123.5Z\">\n                        </path>\n                        <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"15.58399310102935\" y1=\"123.5\" x2=\"8.655789870753836\" y2=\"127.5\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"6.726339542029365\" y1=\"100.425023574603\" x2=\"-1.0988412638410807\" y2=\"102.08831710114508\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"5.432770265906413\" y1=\"75.74225140185536\" x2=\"-2.523404897039782\" y2=\"74.90602369571413\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"11.829908846234545\" y1=\"51.86780519701177\" x2=\"4.5215451850937285\" y2=\"48.61391205240536\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"25.291558787285872\" y1=\"31.13868209765019\" x2=\"19.346400183466727\" y2=\"25.785637246779324\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"44.500000000000014\" y1=\"15.583993101029336\" x2=\"40.50000000000002\" y2=\"8.655789870753836\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"67.57497642539701\" y1=\"6.726339542029351\" x2=\"65.91168289885493\" y2=\"-1.098841263841095\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"92.25774859814462\" y1=\"5.432770265906413\" x2=\"93.09397630428585\" y2=\"-2.523404897039782\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"116.13219480298821\" y1=\"11.829908846234531\" x2=\"119.38608794759462\" y2=\"4.5215451850937285\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"136.8613179023498\" y1=\"25.291558787285858\" x2=\"142.21436275322066\" y2=\"19.3464001834667\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"152.41600689897066\" y1=\"44.50000000000001\" x2=\"159.34421012924616\" y2=\"40.50000000000001\">\n                                </line>\n                            </g>\n                        </g>\n                    </g>\n                    <text x=\"84\" y=\"88\" text-anchor=\"middle\" dominant-baseline=\"middle\" class=\"radialbarchart-text\" style=\"font-size: 400%; font-weight: 300; fill: rgb(92, 184, 92);\">82</text>\n                </svg>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "RadialBarChart",
+                  "rows": [
+                    {
+                      "name": "width",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The width of chart container."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The height of chart container."
+                    },
+                    {
+                      "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 RadialBar."
+                    },
+                    {
+                      "name": "startAngle",
+                      "type": "Number",
+                      "default": "180",
+                      "description": "The start angle of all the bars."
+                    },
+                    {
+                      "name": "endAngle",
+                      "type": "Number",
+                      "default": "180",
+                      "description": "The end angle of all the bars."
+                    },
+                    {
+                      "name": "innerRadius",
+                      "type": "String | Number",
+                      "default": "30%",
+                      "description": "The innerRadius of the radial bar which is most close to the center. 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": "100%",
+                      "description": "The outerRadius of the radial bar which is most far away from the center. 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": "clockWise",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Set to \"true\" if the bars should go clockwise."
+                    },
+                    {
+                      "name": "cornerRadius",
+                      "type": "Number",
+                      "default": "30",
+                      "description": "Set the corner radius for the individual bars."
+                    },
+                    {
+                      "name": "showBarLabel",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Renders a label on top of the bars."
+                    },
+                    {
+                      "name": "background",
+                      "type": "Boolean | Function",
+                      "default": "true",
+                      "description": "If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background."
+                    },
+                    {
+                      "name": "range",
+                      "type": "Array",
+                      "default": "",
+                      "description": "Defines the min and max value for the bar."
+                    },
+                    {
+                      "name": "radialBarOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar"
+                    },
+                    {
+                      "name": "textOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text"
+                    },
+                    {
+                      "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 RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart"
+                    }
+                  ]
+                },
+                {
+                  "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 3",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Full circle RadialBarChart with custom text</label><div class=\"display-flex flex-wrap gap-25\"><div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\"><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: 168px; max-width: 168px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts9-clip\"><rect x=\"5\" y=\"5\" height=\"158\" width=\"158\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"84\" cy=\"84\" name=\"Fuel level\" color=\"color-coldplay-fountain\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 84,10.060000000000002\n    A 73.94,73.94,0,\n    1,1,\n    83.99870950355114,10.060000011261707\n  L 83.99881422330625,16.060000010347864\n            A 67.94,67.94,0,\n            1,0,\n            84,16.060000000000002 Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M84,5L130.43503493110538,20.087657444379154L159.1334647873171,59.587657444379154L159.1334647873171,108.41234255562085L130.43503493110538,147.91234255562085L84,163L37.56496506889463,147.91234255562085L8.866535212682876,108.41234255562085L8.866535212682862,59.58765744437916L37.564965068894615,20.08765744437916L83.99999999999999,5L84,5Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"5\" x2=\"84\" y2=\"-3\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"20.087657444379154\" x2=\"135.13731694944516\" y2=\"13.615521489379574\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.1334647873171\" y1=\"59.587657444379154\" x2=\"166.74191691767834\" y2=\"57.115521489379574\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.1334647873171\" y1=\"108.41234255562085\" x2=\"166.74191691767834\" y2=\"110.88447851062043\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"147.91234255562085\" x2=\"135.13731694944516\" y2=\"154.38447851062043\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"163\" x2=\"84\" y2=\"171\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.56496506889463\" y1=\"147.91234255562085\" x2=\"32.86268305055485\" y2=\"154.38447851062043\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682876\" y1=\"108.41234255562085\" x2=\"1.2580830823216473\" y2=\"110.88447851062043\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682862\" y1=\"59.58765744437916\" x2=\"1.2580830823216331\" y2=\"57.11552148937959\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.564965068894615\" y1=\"20.08765744437916\" x2=\"32.86268305055483\" y2=\"13.615521489379574\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"83.99999999999999\" y1=\"5\" x2=\"83.99999999999999\" y2=\"-3\"></line></g></g></g></svg></div></div><div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct text-size-16 line-height-125rel\"><div class=\"text-color-darker\">Fuel level</div><div class=\"text-color-darker text-size-200pct text-thin text-center\">24%</div></div></div><div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\"><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: 168px; max-width: 168px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts11-clip\"><rect x=\"5\" y=\"5\" height=\"158\" width=\"158\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"84\" cy=\"84\" name=\"Charge level\" color=\"color-coldplay-fountain\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 84,10.060000000000002\n    A 73.94,73.94,0,\n    1,1,\n    83.99870950355114,10.060000011261707\n  L 83.99881422330625,16.060000010347864\n            A 67.94,67.94,0,\n            1,0,\n            84,16.060000000000002 Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M84,5L130.43503493110538,20.087657444379154L159.1334647873171,59.587657444379154L159.1334647873171,108.41234255562085L130.43503493110538,147.91234255562085L84,163L37.56496506889463,147.91234255562085L8.866535212682876,108.41234255562085L8.866535212682862,59.58765744437916L37.564965068894615,20.08765744437916L83.99999999999999,5L84,5Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"5\" x2=\"84\" y2=\"-3\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"20.087657444379154\" x2=\"135.13731694944516\" y2=\"13.615521489379574\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.1334647873171\" y1=\"59.587657444379154\" x2=\"166.74191691767834\" y2=\"57.115521489379574\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.1334647873171\" y1=\"108.41234255562085\" x2=\"166.74191691767834\" y2=\"110.88447851062043\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"147.91234255562085\" x2=\"135.13731694944516\" y2=\"154.38447851062043\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"163\" x2=\"84\" y2=\"171\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.56496506889463\" y1=\"147.91234255562085\" x2=\"32.86268305055485\" y2=\"154.38447851062043\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682876\" y1=\"108.41234255562085\" x2=\"1.2580830823216473\" y2=\"110.88447851062043\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682862\" y1=\"59.58765744437916\" x2=\"1.2580830823216331\" y2=\"57.11552148937959\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.564965068894615\" y1=\"20.08765744437916\" x2=\"32.86268305055483\" y2=\"13.615521489379574\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"83.99999999999999\" y1=\"5\" x2=\"83.99999999999999\" y2=\"-3\"></line></g></g></g></svg></div></div><div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct text-size-16 line-height-125rel\"><div class=\"text-color-darker\">Charge level</div><div class=\"text-color-darker text-size-200pct text-thin text-center\">38%</div></div></div></div><label class=\"margin-top-15\">Open RadialBarChart with custom text</label><div class=\"display-flex flex-wrap gap-25\"><div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\"><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: 168px; max-width: 168px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts13-clip\"><rect x=\"5\" y=\"5\" height=\"158\" width=\"158\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"84\" cy=\"84\" name=\"Lorem ipsum\" color=\"color-warmup-charm\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 22.619117797151205,119.43826886291147\n    A3,3,0,0,1,18.45993191318523,118.22898004872019\n    A73.94,73.94,0,1,1,149.54006808681476,118.22898004872017\n    A3,3,0,0,1,145.3808822028488,119.43826886291146\n  L145.3808822028488,119.43826886291146\n      A3,3,0,0,1,144.22169631888283,115.45140525439612\n      A67.94,67.94,0,1,0,23.778303681117187,115.45140525439612\n      A3,3,0,0,1,22.619117797151205,119.43826886291147Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M15.58399310102935,123.5L5.432770265906413,92.25774859814463L8.866535212682876,59.58765744437915L25.291558787285872,31.13868209765019L51.867805197011776,11.829908846234531L84,5L116.13219480298821,11.829908846234531L142.70844121271415,31.13868209765019L159.13346478731714,59.58765744437916L162.5672297340936,92.25774859814463L152.41600689897066,123.5L15.58399310102935,123.5Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"15.58399310102935\" y1=\"123.5\" x2=\"8.655789870753836\" y2=\"127.5\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"5.432770265906413\" y1=\"92.25774859814463\" x2=\"-2.523404897039782\" y2=\"93.09397630428586\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682876\" y1=\"59.58765744437915\" x2=\"1.2580830823216473\" y2=\"57.11552148937957\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"25.291558787285872\" y1=\"31.13868209765019\" x2=\"19.346400183466727\" y2=\"25.785637246779324\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"51.867805197011776\" y1=\"11.829908846234531\" x2=\"48.613912052405375\" y2=\"4.5215451850937285\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"5\" x2=\"84\" y2=\"-3\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"116.13219480298821\" y1=\"11.829908846234531\" x2=\"119.38608794759462\" y2=\"4.5215451850937285\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"142.70844121271415\" y1=\"31.13868209765019\" x2=\"148.6535998165333\" y2=\"25.785637246779324\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.13346478731714\" y1=\"59.58765744437916\" x2=\"166.74191691767837\" y2=\"57.11552148937959\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"162.5672297340936\" y1=\"92.25774859814463\" x2=\"170.52340489703977\" y2=\"93.09397630428586\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"152.41600689897066\" y1=\"123.5\" x2=\"159.34421012924616\" y2=\"127.5\"></line></g></g></g></svg></div></div><div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct text-size-16 line-height-125rel\"><div class=\"text-color-darker\">Lorem ipsum</div><div class=\"text-color-darker text-size-200pct text-thin text-center\">80</div></div></div><div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\"><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: 168px; max-width: 168px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts15-clip\"><rect x=\"5\" y=\"5\" height=\"158\" width=\"158\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"84\" cy=\"84\" name=\"Lorem ipsum dolor sit amet\" color=\"color-coldplay-moos\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 48.56173113708851,145.3808822028488\n    A3,3,0,0,1,44.35512609541675,146.4132003112298\n    A73.94,73.94,0,1,1,134.02567367477565,29.552267509244636\n    A3,3,0,0,1,134.11728045295357,33.88271954704645\n  L134.11728045295357,33.88271954704645\n      A3,3,0,0,1,129.96624654401217,33.97053089772898\n      A67.94,67.94,0,1,0,47.57218375605375,141.34856409446783\n      A3,3,0,0,1,48.56173113708851,145.3808822028488Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M44.499999999999964,152.41600689897064L23.927928717597545,135.3063958180845L10.247146306721064,112.31106801407873L5.0270713269309795,86.06797891632198L8.866535212682876,59.58765744437915L21.32508611699243,35.90784710831105L40.97351623381286,17.74502513231151L65.55781625538346,7.182776288583554L92.25774859814464,5.432770265906413L118.01037664785532,12.695762536361016L139.86143571373725,28.13856428626275L44.499999999999964,152.41600689897064Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"44.499999999999964\" y1=\"152.41600689897064\" x2=\"40.499999999999964\" y2=\"159.34421012924614\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"23.927928717597545\" y1=\"135.3063958180845\" x2=\"17.844680992797294\" y2=\"140.50198020472595\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"10.247146306721064\" y1=\"112.31106801407873\" x2=\"2.778502894743454\" y2=\"115.17801161044113\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"5.0270713269309795\" y1=\"86.06797891632198\" x2=\"-2.9701872728734884\" y2=\"86.27739450278497\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682876\" y1=\"59.58765744437915\" x2=\"1.2580830823216473\" y2=\"57.11552148937957\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"21.32508611699243\" y1=\"35.90784710831105\" x2=\"14.978259394662544\" y2=\"31.037755676241282\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"40.97351623381286\" y1=\"17.74502513231151\" x2=\"36.61640395369265\" y2=\"11.035660588748115\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"65.55781625538346\" y1=\"7.182776288583554\" x2=\"63.69025334453622\" y2=\"-0.5961830745978602\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"92.25774859814464\" y1=\"5.432770265906413\" x2=\"93.09397630428587\" y2=\"-2.523404897039782\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"118.01037664785532\" y1=\"12.695762536361016\" x2=\"121.45446542232169\" y2=\"5.475080261562141\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"139.86143571373725\" y1=\"28.13856428626275\" x2=\"145.51828996322965\" y2=\"22.481710036770373\"></line></g></g></g></svg></div></div><div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct text-size-16 line-height-125rel\"><div class=\"text-color-darker\">Lorem ipsum dolor sit amet</div><div class=\"text-color-darker text-size-200pct text-thin text-center\">67</div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import RadialBarChart from '@rio-cloud/rio-uikit/RadialBarChart';\n\nexport default () => {\n    const panelClasses = 'panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative';\n\n    const infoBlockClasses =\n        'position-absolute top-50pct left-50pct translate-x-50pct-y-50pct text-size-16 line-height-125rel';\n\n    return (\n        <>\n            <label>Full circle RadialBarChart with custom text</label>\n            <div className='display-flex flex-wrap gap-25'>\n                <div className={panelClasses}>\n                    <RadialBarChart\n                        data={[fuelLevel]}\n                        dataKey='value'\n                        startAngle={90}\n                        endAngle={-270}\n                        innerRadius='90%'\n                        legend={false}\n                        range={[0, 100]}\n                    />\n                    <div className={infoBlockClasses}>\n                        <div className='text-color-darker'>{fuelLevel.name}</div>\n                        <div className='text-color-darker text-size-200pct text-thin text-center'>\n                            {`${fuelLevel.value}%`}\n                        </div>\n                    </div>\n                </div>\n\n                <div className={panelClasses}>\n                    <RadialBarChart\n                        data={[chargeLevel]}\n                        dataKey='value'\n                        startAngle={90}\n                        endAngle={-270}\n                        innerRadius='90%'\n                        legend={false}\n                        range={[0, 100]}\n                    />\n                    <div className={infoBlockClasses}>\n                        <div className='text-color-darker'>{chargeLevel.name}</div>\n                        <div className='text-color-darker text-size-200pct text-thin text-center'>\n                            {`${chargeLevel.value}%`}\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <label className='margin-top-15'>Open RadialBarChart with custom text</label>\n            <div className='display-flex flex-wrap gap-25'>\n                <div className={panelClasses}>\n                    <RadialBarChart\n                        data={[loremIpsum]}\n                        dataKey='value'\n                        startAngle={210}\n                        endAngle={-30}\n                        innerRadius='90%'\n                        legend={false}\n                        range={[0, 100]}\n                    />\n                    <div className={infoBlockClasses}>\n                        <div className='text-color-darker'>{loremIpsum.name}</div>\n                        <div className='text-color-darker text-size-200pct text-thin text-center'>\n                            {loremIpsum.value}\n                        </div>\n                    </div>\n                </div>\n\n                <div className={panelClasses}>\n                    <RadialBarChart\n                        data={[loremIpsum2]}\n                        dataKey='value'\n                        startAngle={240}\n                        endAngle={45}\n                        innerRadius='90%'\n                        legend={false}\n                        range={[0, 100]}\n                    />\n                    <div className={infoBlockClasses}>\n                        <div className='text-color-darker'>{loremIpsum2.name}</div>\n                        <div className='text-color-darker text-size-200pct text-thin text-center'>\n                            {loremIpsum2.value}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </>\n    );\n};\n\nconst fuelLevel = {\n    name: 'Fuel level',\n    value: 24,\n    color: 'color-coldplay-fountain',\n};\n\nconst chargeLevel = {\n    name: 'Charge level',\n    value: 38,\n    color: 'color-coldplay-fountain',\n};\n\nconst loremIpsum = {\n    name: 'Lorem ipsum',\n    value: 80,\n    color: 'color-warmup-charm',\n};\n\nconst loremIpsum2 = {\n    name: 'Lorem ipsum dolor sit amet',\n    value: 67,\n    color: 'color-coldplay-moos',\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>Full circle RadialBarChart with custom text</label>\n<div class=\"display-flex flex-wrap gap-25\">\n    <div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\">\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: 168px; max-width: 168px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" 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=\"158\" width=\"158\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-area\">\n                        <g class=\"recharts-layer recharts-radial-bar-background\">\n                            <path cx=\"84\" cy=\"84\" name=\"Fuel level\" color=\"color-coldplay-fountain\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 84,10.060000000000002\n    A 73.94,73.94,0,\n    1,1,\n    83.99870950355114,10.060000011261707\n  L 83.99881422330625,16.060000010347864\n            A 67.94,67.94,0,\n            1,0,\n            84,16.060000000000002 Z\" role=\"img\">\n                            </path>\n                        </g>\n                        <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                            <g class=\"recharts-layer\">\n                                <path cx=\"84\" cy=\"84\" name=\"Fuel level\" color=\"color-coldplay-fountain\" fill=\"#67abc5 \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 84,13.123462274177072\n    A3,3,0,0,1,87.12686777558501,10.126146046696547\n    A73.94,73.94,0,0,1,157.53174312527494,76.24072471434457\n    A3,3,0,0,1,154.73667906882602,79.54962537375658\n  L154.73667906882602,79.54962537375658\n      A3,3,0,0,1,151.56487189520124,76.87036566259899\n      A67.94,67.94,0,0,0,86.873132224415,16.12077850165761\n      A3,3,0,0,1,84,13.123462274177072Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                        <path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M84,5L130.43503493110538,20.087657444379154L159.1334647873171,59.587657444379154L159.1334647873171,108.41234255562085L130.43503493110538,147.91234255562085L84,163L37.56496506889463,147.91234255562085L8.866535212682876,108.41234255562085L8.866535212682862,59.58765744437916L37.564965068894615,20.08765744437916L83.99999999999999,5L84,5Z\">\n                        </path>\n                        <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"5\" x2=\"84\" y2=\"-3\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"20.087657444379154\" x2=\"135.13731694944516\" y2=\"13.615521489379574\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.1334647873171\" y1=\"59.587657444379154\" x2=\"166.74191691767834\" y2=\"57.115521489379574\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.1334647873171\" y1=\"108.41234255562085\" x2=\"166.74191691767834\" y2=\"110.88447851062043\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"147.91234255562085\" x2=\"135.13731694944516\" y2=\"154.38447851062043\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"163\" x2=\"84\" y2=\"171\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.56496506889463\" y1=\"147.91234255562085\" x2=\"32.86268305055485\" y2=\"154.38447851062043\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682876\" y1=\"108.41234255562085\" x2=\"1.2580830823216473\" y2=\"110.88447851062043\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682862\" y1=\"59.58765744437916\" x2=\"1.2580830823216331\" y2=\"57.11552148937959\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.564965068894615\" y1=\"20.08765744437916\" x2=\"32.86268305055483\" y2=\"13.615521489379574\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"83.99999999999999\" y1=\"5\" x2=\"83.99999999999999\" y2=\"-3\">\n                                </line>\n                            </g>\n                        </g>\n                    </g>\n                </svg>\n            </div>\n        </div>\n        <div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct text-size-16 line-height-125rel\">\n            <div class=\"text-color-darker\">Fuel level</div>\n            <div class=\"text-color-darker text-size-200pct text-thin text-center\">24%</div>\n        </div>\n    </div>\n    <div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\">\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: 168px; max-width: 168px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" style=\"width: 100%; height: 100%;\">\n                    <title>\n                    </title>\n                    <desc>\n                    </desc>\n                    <defs>\n                        <clipPath id=\"recharts11-clip\">\n                            <rect x=\"5\" y=\"5\" height=\"158\" width=\"158\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-area\">\n                        <g class=\"recharts-layer recharts-radial-bar-background\">\n                            <path cx=\"84\" cy=\"84\" name=\"Charge level\" color=\"color-coldplay-fountain\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 84,10.060000000000002\n    A 73.94,73.94,0,\n    1,1,\n    83.99870950355114,10.060000011261707\n  L 83.99881422330625,16.060000010347864\n            A 67.94,67.94,0,\n            1,0,\n            84,16.060000000000002 Z\" role=\"img\">\n                            </path>\n                        </g>\n                        <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                            <g class=\"recharts-layer\">\n                                <path cx=\"84\" cy=\"84\" name=\"Charge level\" color=\"color-coldplay-fountain\" fill=\"#67abc5 \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 84,13.123462274177072\n    A3,3,0,0,1,87.12686777558501,10.126146046696547\n    A73.94,73.94,0,0,1,136.84952143802892,135.71123363227105\n    A3,3,0,0,1,132.5183287784576,135.66677242237503\n  L132.5183287784576,135.66677242237503\n      A3,3,0,0,1,132.56094788341474,131.5150285769069\n      A67.94,67.94,0,0,0,86.873132224415,16.12077850165761\n      A3,3,0,0,1,84,13.123462274177072Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                        <path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M84,5L130.43503493110538,20.087657444379154L159.1334647873171,59.587657444379154L159.1334647873171,108.41234255562085L130.43503493110538,147.91234255562085L84,163L37.56496506889463,147.91234255562085L8.866535212682876,108.41234255562085L8.866535212682862,59.58765744437916L37.564965068894615,20.08765744437916L83.99999999999999,5L84,5Z\">\n                        </path>\n                        <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"5\" x2=\"84\" y2=\"-3\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"20.087657444379154\" x2=\"135.13731694944516\" y2=\"13.615521489379574\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.1334647873171\" y1=\"59.587657444379154\" x2=\"166.74191691767834\" y2=\"57.115521489379574\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.1334647873171\" y1=\"108.41234255562085\" x2=\"166.74191691767834\" y2=\"110.88447851062043\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"147.91234255562085\" x2=\"135.13731694944516\" y2=\"154.38447851062043\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"163\" x2=\"84\" y2=\"171\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.56496506889463\" y1=\"147.91234255562085\" x2=\"32.86268305055485\" y2=\"154.38447851062043\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682876\" y1=\"108.41234255562085\" x2=\"1.2580830823216473\" y2=\"110.88447851062043\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682862\" y1=\"59.58765744437916\" x2=\"1.2580830823216331\" y2=\"57.11552148937959\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.564965068894615\" y1=\"20.08765744437916\" x2=\"32.86268305055483\" y2=\"13.615521489379574\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"83.99999999999999\" y1=\"5\" x2=\"83.99999999999999\" y2=\"-3\">\n                                </line>\n                            </g>\n                        </g>\n                    </g>\n                </svg>\n            </div>\n        </div>\n        <div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct text-size-16 line-height-125rel\">\n            <div class=\"text-color-darker\">Charge level</div>\n            <div class=\"text-color-darker text-size-200pct text-thin text-center\">38%</div>\n        </div>\n    </div>\n</div>\n<label class=\"margin-top-15\">Open RadialBarChart with custom text</label>\n<div class=\"display-flex flex-wrap gap-25\">\n    <div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\">\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: 168px; max-width: 168px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" style=\"width: 100%; height: 100%;\">\n                    <title>\n                    </title>\n                    <desc>\n                    </desc>\n                    <defs>\n                        <clipPath id=\"recharts13-clip\">\n                            <rect x=\"5\" y=\"5\" height=\"158\" width=\"158\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-area\">\n                        <g class=\"recharts-layer recharts-radial-bar-background\">\n                            <path cx=\"84\" cy=\"84\" name=\"Lorem ipsum\" color=\"color-warmup-charm\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 22.619117797151205,119.43826886291147\n    A3,3,0,0,1,18.45993191318523,118.22898004872019\n    A73.94,73.94,0,1,1,149.54006808681476,118.22898004872017\n    A3,3,0,0,1,145.3808822028488,119.43826886291146\n  L145.3808822028488,119.43826886291146\n      A3,3,0,0,1,144.22169631888283,115.45140525439612\n      A67.94,67.94,0,1,0,23.778303681117187,115.45140525439612\n      A3,3,0,0,1,22.619117797151205,119.43826886291147Z\" role=\"img\">\n                            </path>\n                        </g>\n                        <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                            <g class=\"recharts-layer\">\n                                <path cx=\"84\" cy=\"84\" name=\"Lorem ipsum\" color=\"color-warmup-charm\" fill=\"#c9778d \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 22.619117797151205,119.43826886291147\n    A3,3,0,0,1,18.45993191318523,118.22898004872019\n    A73.94,73.94,0,1,1,153.29195490430658,58.197895714892894\n    A3,3,0,0,1,151.40759305658318,62.09794534026363\n  L151.40759305658318,62.09794534026363\n      A3,3,0,0,1,147.66912924261007,60.29165586786344\n      A67.94,67.94,0,1,0,23.778303681117187,115.45140525439612\n      A3,3,0,0,1,22.619117797151205,119.43826886291147Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                        <path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M15.58399310102935,123.5L5.432770265906413,92.25774859814463L8.866535212682876,59.58765744437915L25.291558787285872,31.13868209765019L51.867805197011776,11.829908846234531L84,5L116.13219480298821,11.829908846234531L142.70844121271415,31.13868209765019L159.13346478731714,59.58765744437916L162.5672297340936,92.25774859814463L152.41600689897066,123.5L15.58399310102935,123.5Z\">\n                        </path>\n                        <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"15.58399310102935\" y1=\"123.5\" x2=\"8.655789870753836\" y2=\"127.5\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"5.432770265906413\" y1=\"92.25774859814463\" x2=\"-2.523404897039782\" y2=\"93.09397630428586\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682876\" y1=\"59.58765744437915\" x2=\"1.2580830823216473\" y2=\"57.11552148937957\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"25.291558787285872\" y1=\"31.13868209765019\" x2=\"19.346400183466727\" y2=\"25.785637246779324\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"51.867805197011776\" y1=\"11.829908846234531\" x2=\"48.613912052405375\" y2=\"4.5215451850937285\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"5\" x2=\"84\" y2=\"-3\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"116.13219480298821\" y1=\"11.829908846234531\" x2=\"119.38608794759462\" y2=\"4.5215451850937285\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"142.70844121271415\" y1=\"31.13868209765019\" x2=\"148.6535998165333\" y2=\"25.785637246779324\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.13346478731714\" y1=\"59.58765744437916\" x2=\"166.74191691767837\" y2=\"57.11552148937959\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"162.5672297340936\" y1=\"92.25774859814463\" x2=\"170.52340489703977\" y2=\"93.09397630428586\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"152.41600689897066\" y1=\"123.5\" x2=\"159.34421012924616\" y2=\"127.5\">\n                                </line>\n                            </g>\n                        </g>\n                    </g>\n                </svg>\n            </div>\n        </div>\n        <div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct text-size-16 line-height-125rel\">\n            <div class=\"text-color-darker\">Lorem ipsum</div>\n            <div class=\"text-color-darker text-size-200pct text-thin text-center\">80</div>\n        </div>\n    </div>\n    <div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\">\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: 168px; max-width: 168px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" style=\"width: 100%; height: 100%;\">\n                    <title>\n                    </title>\n                    <desc>\n                    </desc>\n                    <defs>\n                        <clipPath id=\"recharts15-clip\">\n                            <rect x=\"5\" y=\"5\" height=\"158\" width=\"158\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-area\">\n                        <g class=\"recharts-layer recharts-radial-bar-background\">\n                            <path cx=\"84\" cy=\"84\" name=\"Lorem ipsum dolor sit amet\" color=\"color-coldplay-moos\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 48.56173113708851,145.3808822028488\n    A3,3,0,0,1,44.35512609541675,146.4132003112298\n    A73.94,73.94,0,1,1,134.02567367477565,29.552267509244636\n    A3,3,0,0,1,134.11728045295357,33.88271954704645\n  L134.11728045295357,33.88271954704645\n      A3,3,0,0,1,129.96624654401217,33.97053089772898\n      A67.94,67.94,0,1,0,47.57218375605375,141.34856409446783\n      A3,3,0,0,1,48.56173113708851,145.3808822028488Z\" role=\"img\">\n                            </path>\n                        </g>\n                        <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                            <g class=\"recharts-layer\">\n                                <path cx=\"84\" cy=\"84\" name=\"Lorem ipsum dolor sit amet\" color=\"color-coldplay-moos\" fill=\"#a1daa3 \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 48.56173113708851,145.3808822028488\n    A3,3,0,0,1,44.35512609541675,146.4132003112298\n    A73.94,73.94,0,0,1,56.572555436947866,15.335169957679923\n    A3,3,0,0,1,60.5159176483881,17.127124511482904\n  L60.5159176483881,17.127124511482904\n      A3,3,0,0,1,58.798206875659154,20.907106396061323\n      A67.94,67.94,0,0,0,47.57218375605375,141.34856409446783\n      A3,3,0,0,1,48.56173113708851,145.3808822028488Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                        <path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M44.499999999999964,152.41600689897064L23.927928717597545,135.3063958180845L10.247146306721064,112.31106801407873L5.0270713269309795,86.06797891632198L8.866535212682876,59.58765744437915L21.32508611699243,35.90784710831105L40.97351623381286,17.74502513231151L65.55781625538346,7.182776288583554L92.25774859814464,5.432770265906413L118.01037664785532,12.695762536361016L139.86143571373725,28.13856428626275L44.499999999999964,152.41600689897064Z\">\n                        </path>\n                        <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"44.499999999999964\" y1=\"152.41600689897064\" x2=\"40.499999999999964\" y2=\"159.34421012924614\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"23.927928717597545\" y1=\"135.3063958180845\" x2=\"17.844680992797294\" y2=\"140.50198020472595\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"10.247146306721064\" y1=\"112.31106801407873\" x2=\"2.778502894743454\" y2=\"115.17801161044113\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"5.0270713269309795\" y1=\"86.06797891632198\" x2=\"-2.9701872728734884\" y2=\"86.27739450278497\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682876\" y1=\"59.58765744437915\" x2=\"1.2580830823216473\" y2=\"57.11552148937957\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"21.32508611699243\" y1=\"35.90784710831105\" x2=\"14.978259394662544\" y2=\"31.037755676241282\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"40.97351623381286\" y1=\"17.74502513231151\" x2=\"36.61640395369265\" y2=\"11.035660588748115\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"65.55781625538346\" y1=\"7.182776288583554\" x2=\"63.69025334453622\" y2=\"-0.5961830745978602\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"92.25774859814464\" y1=\"5.432770265906413\" x2=\"93.09397630428587\" y2=\"-2.523404897039782\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"118.01037664785532\" y1=\"12.695762536361016\" x2=\"121.45446542232169\" y2=\"5.475080261562141\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"139.86143571373725\" y1=\"28.13856428626275\" x2=\"145.51828996322965\" y2=\"22.481710036770373\">\n                                </line>\n                            </g>\n                        </g>\n                    </g>\n                </svg>\n            </div>\n        </div>\n        <div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct text-size-16 line-height-125rel\">\n            <div class=\"text-color-darker\">Lorem ipsum dolor sit amet</div>\n            <div class=\"text-color-darker text-size-200pct text-thin text-center\">67</div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "RadialBarChart",
+                  "rows": [
+                    {
+                      "name": "width",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The width of chart container."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The height of chart container."
+                    },
+                    {
+                      "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 RadialBar."
+                    },
+                    {
+                      "name": "startAngle",
+                      "type": "Number",
+                      "default": "180",
+                      "description": "The start angle of all the bars."
+                    },
+                    {
+                      "name": "endAngle",
+                      "type": "Number",
+                      "default": "180",
+                      "description": "The end angle of all the bars."
+                    },
+                    {
+                      "name": "innerRadius",
+                      "type": "String | Number",
+                      "default": "30%",
+                      "description": "The innerRadius of the radial bar which is most close to the center. 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": "100%",
+                      "description": "The outerRadius of the radial bar which is most far away from the center. 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": "clockWise",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Set to \"true\" if the bars should go clockwise."
+                    },
+                    {
+                      "name": "cornerRadius",
+                      "type": "Number",
+                      "default": "30",
+                      "description": "Set the corner radius for the individual bars."
+                    },
+                    {
+                      "name": "showBarLabel",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Renders a label on top of the bars."
+                    },
+                    {
+                      "name": "background",
+                      "type": "Boolean | Function",
+                      "default": "true",
+                      "description": "If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background."
+                    },
+                    {
+                      "name": "range",
+                      "type": "Array",
+                      "default": "",
+                      "description": "Defines the min and max value for the bar."
+                    },
+                    {
+                      "name": "radialBarOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar"
+                    },
+                    {
+                      "name": "textOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text"
+                    },
+                    {
+                      "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 RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart"
+                    }
+                  ]
+                },
+                {
+                  "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 4",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Example for error visualization</label><div class=\"panel panel-default panel-body shadow-default margin-bottom-0 height-auto\"><div class=\"margin-bottom-15 text-color-darker text-medium text-size-16\">Most reported problems</div><div class=\"display-flex flex-wrap gap-25\"><div class=\"display-flex flex-column justify-content-center\"><div class=\"position-relative width-100 aspect-ratio-1\"><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: 100px; max-width: 100px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts17-clip\"><rect x=\"5\" y=\"5\" height=\"90\" width=\"90\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"50\" cy=\"50\" name=\"App\" color=\"brand-danger\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 49.99999999999999,91.7\n    A 41.7,41.7,0,\n    1,1,\n    50.00072780229803,91.69999999364873\n  L 50.00067544242047,88.69999999410565\n            A 38.7,38.7,0,\n            1,0,\n            49.99999999999999,88.7 Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M49.99999999999999,95L23.549663646838702,86.40576474687262L7.202456766718086,63.90576474687263L7.202456766718093,36.094235253127366L23.549663646838713,13.594235253127366L50,5L76.45033635316129,13.594235253127366L92.79754323328191,36.09423525312735L92.79754323328191,63.90576474687265L76.45033635316129,86.40576474687263L50,95L49.99999999999999,95Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"49.99999999999999\" y1=\"95\" x2=\"49.99999999999999\" y2=\"103\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"23.549663646838702\" y1=\"86.40576474687262\" x2=\"18.84738162849892\" y2=\"92.8779007018722\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"7.202456766718086\" y1=\"63.90576474687263\" x2=\"-0.40599536364314304\" y2=\"66.3779007018722\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"7.202456766718093\" y1=\"36.094235253127366\" x2=\"-0.40599536364313593\" y2=\"33.62209929812778\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"23.549663646838713\" y1=\"13.594235253127366\" x2=\"18.84738162849893\" y2=\"7.122099298127786\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"50\" y1=\"5\" x2=\"50\" y2=\"-3\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"76.45033635316129\" y1=\"13.594235253127366\" x2=\"81.15261837150108\" y2=\"7.122099298127786\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"92.79754323328191\" y1=\"36.09423525312735\" x2=\"100.40599536364313\" y2=\"33.622099298127765\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"92.79754323328191\" y1=\"63.90576474687265\" x2=\"100.40599536364314\" y2=\"66.37790070187222\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"76.45033635316129\" y1=\"86.40576474687263\" x2=\"81.15261837150106\" y2=\"92.87790070187222\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"50\" y1=\"95\" x2=\"50\" y2=\"103\"></line></g></g></g></svg></div></div><div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct\"><div class=\"text-color-darker text-size-20 text-medium text-center\">43%</div></div></div><div class=\"text-center text-color-darker\">App</div></div><div class=\"display-flex flex-column justify-content-center\"><div class=\"position-relative width-100 aspect-ratio-1\"><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: 100px; max-width: 100px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts19-clip\"><rect x=\"5\" y=\"5\" height=\"90\" width=\"90\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"50\" cy=\"50\" name=\"Website\" color=\"brand-danger\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 49.99999999999999,91.7\n    A 41.7,41.7,0,\n    1,1,\n    50.00072780229803,91.69999999364873\n  L 50.00067544242047,88.69999999410565\n            A 38.7,38.7,0,\n            1,0,\n            49.99999999999999,88.7 Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M49.99999999999999,95L23.549663646838702,86.40576474687262L7.202456766718086,63.90576474687263L7.202456766718093,36.094235253127366L23.549663646838713,13.594235253127366L50,5L76.45033635316129,13.594235253127366L92.79754323328191,36.09423525312735L92.79754323328191,63.90576474687265L76.45033635316129,86.40576474687263L50,95L49.99999999999999,95Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"49.99999999999999\" y1=\"95\" x2=\"49.99999999999999\" y2=\"103\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"23.549663646838702\" y1=\"86.40576474687262\" x2=\"18.84738162849892\" y2=\"92.8779007018722\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"7.202456766718086\" y1=\"63.90576474687263\" x2=\"-0.40599536364314304\" y2=\"66.3779007018722\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"7.202456766718093\" y1=\"36.094235253127366\" x2=\"-0.40599536364313593\" y2=\"33.62209929812778\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"23.549663646838713\" y1=\"13.594235253127366\" x2=\"18.84738162849893\" y2=\"7.122099298127786\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"50\" y1=\"5\" x2=\"50\" y2=\"-3\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"76.45033635316129\" y1=\"13.594235253127366\" x2=\"81.15261837150108\" y2=\"7.122099298127786\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"92.79754323328191\" y1=\"36.09423525312735\" x2=\"100.40599536364313\" y2=\"33.622099298127765\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"92.79754323328191\" y1=\"63.90576474687265\" x2=\"100.40599536364314\" y2=\"66.37790070187222\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"76.45033635316129\" y1=\"86.40576474687263\" x2=\"81.15261837150106\" y2=\"92.87790070187222\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"50\" y1=\"95\" x2=\"50\" y2=\"103\"></line></g></g></g></svg></div></div><div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct\"><div class=\"text-color-darker text-size-20 text-medium text-center\">37%</div></div></div><div class=\"text-center text-color-darker\">Website</div></div><div class=\"display-flex flex-column justify-content-center\"><div class=\"position-relative width-100 aspect-ratio-1\"><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: 100px; max-width: 100px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts21-clip\"><rect x=\"5\" y=\"5\" height=\"90\" width=\"90\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"50\" cy=\"50\" name=\"Server Connection\" color=\"brand-danger\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 49.99999999999999,91.7\n    A 41.7,41.7,0,\n    1,1,\n    50.00072780229803,91.69999999364873\n  L 50.00067544242047,88.69999999410565\n            A 38.7,38.7,0,\n            1,0,\n            49.99999999999999,88.7 Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M49.99999999999999,95L23.549663646838702,86.40576474687262L7.202456766718086,63.90576474687263L7.202456766718093,36.094235253127366L23.549663646838713,13.594235253127366L50,5L76.45033635316129,13.594235253127366L92.79754323328191,36.09423525312735L92.79754323328191,63.90576474687265L76.45033635316129,86.40576474687263L50,95L49.99999999999999,95Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"49.99999999999999\" y1=\"95\" x2=\"49.99999999999999\" y2=\"103\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"23.549663646838702\" y1=\"86.40576474687262\" x2=\"18.84738162849892\" y2=\"92.8779007018722\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"7.202456766718086\" y1=\"63.90576474687263\" x2=\"-0.40599536364314304\" y2=\"66.3779007018722\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"7.202456766718093\" y1=\"36.094235253127366\" x2=\"-0.40599536364313593\" y2=\"33.62209929812778\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"23.549663646838713\" y1=\"13.594235253127366\" x2=\"18.84738162849893\" y2=\"7.122099298127786\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"50\" y1=\"5\" x2=\"50\" y2=\"-3\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"76.45033635316129\" y1=\"13.594235253127366\" x2=\"81.15261837150108\" y2=\"7.122099298127786\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"92.79754323328191\" y1=\"36.09423525312735\" x2=\"100.40599536364313\" y2=\"33.622099298127765\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"92.79754323328191\" y1=\"63.90576474687265\" x2=\"100.40599536364314\" y2=\"66.37790070187222\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"76.45033635316129\" y1=\"86.40576474687263\" x2=\"81.15261837150106\" y2=\"92.87790070187222\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"50\" y1=\"95\" x2=\"50\" y2=\"103\"></line></g></g></g></svg></div></div><div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct\"><div class=\"text-color-darker text-size-20 text-medium text-center\">20%</div></div></div><div class=\"text-center text-color-darker\">Server Connection</div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import RadialBarChart from '@rio-cloud/rio-uikit/RadialBarChart';\n\nexport default () => {\n    return (\n        <>\n            <label>Example for error visualization</label>\n            <div className='panel panel-default panel-body shadow-default margin-bottom-0 height-auto'>\n                <div className='margin-bottom-15 text-color-darker text-medium text-size-16'>\n                    Most reported problems\n                </div>\n\n                <div className='display-flex flex-wrap gap-25'>\n                    {data.map(item => (\n                        <div key={item.name} className='display-flex flex-column justify-content-center'>\n                            <div className='position-relative width-100 aspect-ratio-1'>\n                                <RadialBarChart\n                                    data={[item]}\n                                    dataKey='value'\n                                    startAngle={270}\n                                    endAngle={-90}\n                                    innerRadius='90%'\n                                    legend={false}\n                                    range={[0, 100]}\n                                />\n                                <div className='position-absolute top-50pct left-50pct translate-x-50pct-y-50pct'>\n                                    <div className='text-color-darker text-size-20 text-medium text-center'>\n                                        {`${item.value}%`}\n                                    </div>\n                                </div>\n                            </div>\n                            <div className='text-center text-color-darker'>{item.name}</div>\n                        </div>\n                    ))}\n                </div>\n            </div>\n        </>\n    );\n};\n\nconst data = [\n    {\n        name: 'App',\n        value: 43,\n        color: 'brand-danger',\n    },\n    {\n        name: 'Website',\n        value: 37,\n        color: 'brand-danger',\n    },\n    {\n        name: 'Server Connection',\n        value: 20,\n        color: 'brand-danger',\n    },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>Example for error visualization</label>\n<div class=\"panel panel-default panel-body shadow-default margin-bottom-0 height-auto\">\n    <div class=\"margin-bottom-15 text-color-darker text-medium text-size-16\">Most reported problems</div>\n    <div class=\"display-flex flex-wrap gap-25\">\n        <div class=\"display-flex flex-column justify-content-center\">\n            <div class=\"position-relative width-100 aspect-ratio-1\">\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: 100px; max-width: 100px;\">\n                        <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" style=\"width: 100%; height: 100%;\">\n                            <title>\n                            </title>\n                            <desc>\n                            </desc>\n                            <defs>\n                                <clipPath id=\"recharts17-clip\">\n                                    <rect x=\"5\" y=\"5\" height=\"90\" width=\"90\">\n                                    </rect>\n                                </clipPath>\n                            </defs>\n                            <g class=\"recharts-layer recharts-area\">\n                                <g class=\"recharts-layer recharts-radial-bar-background\">\n                                    <path cx=\"50\" cy=\"50\" name=\"App\" color=\"brand-danger\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 49.99999999999999,91.7\n    A 41.7,41.7,0,\n    1,1,\n    50.00072780229803,91.69999999364873\n  L 50.00067544242047,88.69999999410565\n            A 38.7,38.7,0,\n            1,0,\n            49.99999999999999,88.7 Z\" role=\"img\">\n                                    </path>\n                                </g>\n                                <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                                    <g class=\"recharts-layer\">\n                                        <path cx=\"50\" cy=\"50\" name=\"App\" color=\"brand-danger\" fill=\"#e22837 \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 49.99999999999999,90.1720051777354\n    A1.5,1.5,0,0,1,48.444029850746276,91.67096059481509\n    A41.7,41.7,0,0,1,30.849484035229217,12.957487419411471\n    A1.5,1.5,0,0,1,32.8955920946754,13.651282963379991\n  L32.8955920946754,13.651282963379991\n      A1.5,1.5,0,0,1,32.22721899672352,15.622416382043738\n      A38.7,38.7,0,0,0,48.55597014925374,88.67304976065573\n      A1.5,1.5,0,0,1,49.99999999999999,90.1720051777354Z\" role=\"img\">\n                                        </path>\n                                    </g>\n                                </g>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                                <path cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M49.99999999999999,95L23.549663646838702,86.40576474687262L7.202456766718086,63.90576474687263L7.202456766718093,36.094235253127366L23.549663646838713,13.594235253127366L50,5L76.45033635316129,13.594235253127366L92.79754323328191,36.09423525312735L92.79754323328191,63.90576474687265L76.45033635316129,86.40576474687263L50,95L49.99999999999999,95Z\">\n                                </path>\n                                <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"49.99999999999999\" y1=\"95\" x2=\"49.99999999999999\" y2=\"103\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"23.549663646838702\" y1=\"86.40576474687262\" x2=\"18.84738162849892\" y2=\"92.8779007018722\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"7.202456766718086\" y1=\"63.90576474687263\" x2=\"-0.40599536364314304\" y2=\"66.3779007018722\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"7.202456766718093\" y1=\"36.094235253127366\" x2=\"-0.40599536364313593\" y2=\"33.62209929812778\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"23.549663646838713\" y1=\"13.594235253127366\" x2=\"18.84738162849893\" y2=\"7.122099298127786\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"50\" y1=\"5\" x2=\"50\" y2=\"-3\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"76.45033635316129\" y1=\"13.594235253127366\" x2=\"81.15261837150108\" y2=\"7.122099298127786\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"92.79754323328191\" y1=\"36.09423525312735\" x2=\"100.40599536364313\" y2=\"33.622099298127765\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"92.79754323328191\" y1=\"63.90576474687265\" x2=\"100.40599536364314\" y2=\"66.37790070187222\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"76.45033635316129\" y1=\"86.40576474687263\" x2=\"81.15261837150106\" y2=\"92.87790070187222\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"50\" y1=\"95\" x2=\"50\" y2=\"103\">\n                                        </line>\n                                    </g>\n                                </g>\n                            </g>\n                        </svg>\n                    </div>\n                </div>\n                <div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct\">\n                    <div class=\"text-color-darker text-size-20 text-medium text-center\">43%</div>\n                </div>\n            </div>\n            <div class=\"text-center text-color-darker\">App</div>\n        </div>\n        <div class=\"display-flex flex-column justify-content-center\">\n            <div class=\"position-relative width-100 aspect-ratio-1\">\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: 100px; max-width: 100px;\">\n                        <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" style=\"width: 100%; height: 100%;\">\n                            <title>\n                            </title>\n                            <desc>\n                            </desc>\n                            <defs>\n                                <clipPath id=\"recharts19-clip\">\n                                    <rect x=\"5\" y=\"5\" height=\"90\" width=\"90\">\n                                    </rect>\n                                </clipPath>\n                            </defs>\n                            <g class=\"recharts-layer recharts-area\">\n                                <g class=\"recharts-layer recharts-radial-bar-background\">\n                                    <path cx=\"50\" cy=\"50\" name=\"Website\" color=\"brand-danger\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 49.99999999999999,91.7\n    A 41.7,41.7,0,\n    1,1,\n    50.00072780229803,91.69999999364873\n  L 50.00067544242047,88.69999999410565\n            A 38.7,38.7,0,\n            1,0,\n            49.99999999999999,88.7 Z\" role=\"img\">\n                                    </path>\n                                </g>\n                                <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                                    <g class=\"recharts-layer\">\n                                        <path cx=\"50\" cy=\"50\" name=\"Website\" color=\"brand-danger\" fill=\"#e22837 \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 49.99999999999999,90.1720051777354\n    A1.5,1.5,0,0,1,48.444029850746276,91.67096059481509\n    A41.7,41.7,0,0,1,18.55804218928285,22.608517947561086\n    A1.5,1.5,0,0,1,20.715868524820376,22.500370116228936\n  L20.715868524820376,22.500370116228936\n      A1.5,1.5,0,0,1,20.820053542571856,24.579128167161006\n      A38.7,38.7,0,0,0,48.55597014925374,88.67304976065573\n      A1.5,1.5,0,0,1,49.99999999999999,90.1720051777354Z\" role=\"img\">\n                                        </path>\n                                    </g>\n                                </g>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                                <path cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M49.99999999999999,95L23.549663646838702,86.40576474687262L7.202456766718086,63.90576474687263L7.202456766718093,36.094235253127366L23.549663646838713,13.594235253127366L50,5L76.45033635316129,13.594235253127366L92.79754323328191,36.09423525312735L92.79754323328191,63.90576474687265L76.45033635316129,86.40576474687263L50,95L49.99999999999999,95Z\">\n                                </path>\n                                <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"49.99999999999999\" y1=\"95\" x2=\"49.99999999999999\" y2=\"103\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"23.549663646838702\" y1=\"86.40576474687262\" x2=\"18.84738162849892\" y2=\"92.8779007018722\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"7.202456766718086\" y1=\"63.90576474687263\" x2=\"-0.40599536364314304\" y2=\"66.3779007018722\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"7.202456766718093\" y1=\"36.094235253127366\" x2=\"-0.40599536364313593\" y2=\"33.62209929812778\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"23.549663646838713\" y1=\"13.594235253127366\" x2=\"18.84738162849893\" y2=\"7.122099298127786\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"50\" y1=\"5\" x2=\"50\" y2=\"-3\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"76.45033635316129\" y1=\"13.594235253127366\" x2=\"81.15261837150108\" y2=\"7.122099298127786\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"92.79754323328191\" y1=\"36.09423525312735\" x2=\"100.40599536364313\" y2=\"33.622099298127765\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"92.79754323328191\" y1=\"63.90576474687265\" x2=\"100.40599536364314\" y2=\"66.37790070187222\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"76.45033635316129\" y1=\"86.40576474687263\" x2=\"81.15261837150106\" y2=\"92.87790070187222\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"50\" y1=\"95\" x2=\"50\" y2=\"103\">\n                                        </line>\n                                    </g>\n                                </g>\n                            </g>\n                        </svg>\n                    </div>\n                </div>\n                <div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct\">\n                    <div class=\"text-color-darker text-size-20 text-medium text-center\">37%</div>\n                </div>\n            </div>\n            <div class=\"text-center text-color-darker\">Website</div>\n        </div>\n        <div class=\"display-flex flex-column justify-content-center\">\n            <div class=\"position-relative width-100 aspect-ratio-1\">\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: 100px; max-width: 100px;\">\n                        <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" style=\"width: 100%; height: 100%;\">\n                            <title>\n                            </title>\n                            <desc>\n                            </desc>\n                            <defs>\n                                <clipPath id=\"recharts21-clip\">\n                                    <rect x=\"5\" y=\"5\" height=\"90\" width=\"90\">\n                                    </rect>\n                                </clipPath>\n                            </defs>\n                            <g class=\"recharts-layer recharts-area\">\n                                <g class=\"recharts-layer recharts-radial-bar-background\">\n                                    <path cx=\"50\" cy=\"50\" name=\"Server Connection\" color=\"brand-danger\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 49.99999999999999,91.7\n    A 41.7,41.7,0,\n    1,1,\n    50.00072780229803,91.69999999364873\n  L 50.00067544242047,88.69999999410565\n            A 38.7,38.7,0,\n            1,0,\n            49.99999999999999,88.7 Z\" role=\"img\">\n                                    </path>\n                                </g>\n                                <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                                    <g class=\"recharts-layer\">\n                                        <path cx=\"50\" cy=\"50\" name=\"Server Connection\" color=\"brand-danger\" fill=\"#e22837 \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 49.99999999999999,90.1720051777354\n    A1.5,1.5,0,0,1,48.444029850746276,91.67096059481509\n    A41.7,41.7,0,0,1,10.849382604882067,64.35685054533513\n    A1.5,1.5,0,0,1,11.794152703072086,62.41383229803861\n  L11.794152703072086,62.41383229803861\n      A1.5,1.5,0,0,1,13.665973784386956,63.32398359962757\n      A38.7,38.7,0,0,0,48.55597014925374,88.67304976065573\n      A1.5,1.5,0,0,1,49.99999999999999,90.1720051777354Z\" role=\"img\">\n                                        </path>\n                                    </g>\n                                </g>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                                <path cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M49.99999999999999,95L23.549663646838702,86.40576474687262L7.202456766718086,63.90576474687263L7.202456766718093,36.094235253127366L23.549663646838713,13.594235253127366L50,5L76.45033635316129,13.594235253127366L92.79754323328191,36.09423525312735L92.79754323328191,63.90576474687265L76.45033635316129,86.40576474687263L50,95L49.99999999999999,95Z\">\n                                </path>\n                                <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"49.99999999999999\" y1=\"95\" x2=\"49.99999999999999\" y2=\"103\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"23.549663646838702\" y1=\"86.40576474687262\" x2=\"18.84738162849892\" y2=\"92.8779007018722\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"7.202456766718086\" y1=\"63.90576474687263\" x2=\"-0.40599536364314304\" y2=\"66.3779007018722\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"7.202456766718093\" y1=\"36.094235253127366\" x2=\"-0.40599536364313593\" y2=\"33.62209929812778\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"23.549663646838713\" y1=\"13.594235253127366\" x2=\"18.84738162849893\" y2=\"7.122099298127786\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"50\" y1=\"5\" x2=\"50\" y2=\"-3\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"76.45033635316129\" y1=\"13.594235253127366\" x2=\"81.15261837150108\" y2=\"7.122099298127786\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"92.79754323328191\" y1=\"36.09423525312735\" x2=\"100.40599536364313\" y2=\"33.622099298127765\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"92.79754323328191\" y1=\"63.90576474687265\" x2=\"100.40599536364314\" y2=\"66.37790070187222\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"76.45033635316129\" y1=\"86.40576474687263\" x2=\"81.15261837150106\" y2=\"92.87790070187222\">\n                                        </line>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                        <line class=\"angleAxis\" cx=\"50\" cy=\"50\" orientation=\"outer\" radius=\"45\" fill=\"none\" x1=\"50\" y1=\"95\" x2=\"50\" y2=\"103\">\n                                        </line>\n                                    </g>\n                                </g>\n                            </g>\n                        </svg>\n                    </div>\n                </div>\n                <div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct\">\n                    <div class=\"text-color-darker text-size-20 text-medium text-center\">20%</div>\n                </div>\n            </div>\n            <div class=\"text-center text-color-darker\">Server Connection</div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "RadialBarChart",
+                  "rows": [
+                    {
+                      "name": "width",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The width of chart container."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The height of chart container."
+                    },
+                    {
+                      "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 RadialBar."
+                    },
+                    {
+                      "name": "startAngle",
+                      "type": "Number",
+                      "default": "180",
+                      "description": "The start angle of all the bars."
+                    },
+                    {
+                      "name": "endAngle",
+                      "type": "Number",
+                      "default": "180",
+                      "description": "The end angle of all the bars."
+                    },
+                    {
+                      "name": "innerRadius",
+                      "type": "String | Number",
+                      "default": "30%",
+                      "description": "The innerRadius of the radial bar which is most close to the center. 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": "100%",
+                      "description": "The outerRadius of the radial bar which is most far away from the center. 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": "clockWise",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Set to \"true\" if the bars should go clockwise."
+                    },
+                    {
+                      "name": "cornerRadius",
+                      "type": "Number",
+                      "default": "30",
+                      "description": "Set the corner radius for the individual bars."
+                    },
+                    {
+                      "name": "showBarLabel",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Renders a label on top of the bars."
+                    },
+                    {
+                      "name": "background",
+                      "type": "Boolean | Function",
+                      "default": "true",
+                      "description": "If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background."
+                    },
+                    {
+                      "name": "range",
+                      "type": "Array",
+                      "default": "",
+                      "description": "Defines the min and max value for the bar."
+                    },
+                    {
+                      "name": "radialBarOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar"
+                    },
+                    {
+                      "name": "textOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text"
+                    },
+                    {
+                      "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 RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart"
+                    }
+                  ]
+                },
+                {
+                  "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": "Fuel level",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>RadialBarChart with a needle</label><div class=\"display-flex flex-wrap gap-25\"><div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\"><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: 168px; max-width: 168px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts23-clip\"><rect x=\"5\" y=\"5\" height=\"158\" width=\"158\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"84\" cy=\"84\" name=\"Fuel level\" color=\"color-coldplay-fountain\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 22.619117797151205,119.43826886291147\n    A3,3,0,0,1,18.45993191318523,118.22898004872019\n    A73.94,73.94,0,1,1,149.54006808681476,118.22898004872017\n    A3,3,0,0,1,145.3808822028488,119.43826886291146\n  L145.3808822028488,119.43826886291146\n      A3,3,0,0,1,144.22169631888283,115.45140525439612\n      A67.94,67.94,0,1,0,23.778303681117187,115.45140525439612\n      A3,3,0,0,1,22.619117797151205,119.43826886291147Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M15.58399310102935,123.5L5.432770265906413,92.25774859814463L8.866535212682876,59.58765744437915L25.291558787285872,31.13868209765019L51.867805197011776,11.829908846234531L84,5L116.13219480298821,11.829908846234531L142.70844121271415,31.13868209765019L159.13346478731714,59.58765744437916L162.5672297340936,92.25774859814463L152.41600689897066,123.5L15.58399310102935,123.5Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"15.58399310102935\" y1=\"123.5\" x2=\"8.655789870753836\" y2=\"127.5\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"5.432770265906413\" y1=\"92.25774859814463\" x2=\"-2.523404897039782\" y2=\"93.09397630428586\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682876\" y1=\"59.58765744437915\" x2=\"1.2580830823216473\" y2=\"57.11552148937957\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"25.291558787285872\" y1=\"31.13868209765019\" x2=\"19.346400183466727\" y2=\"25.785637246779324\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"51.867805197011776\" y1=\"11.829908846234531\" x2=\"48.613912052405375\" y2=\"4.5215451850937285\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"5\" x2=\"84\" y2=\"-3\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"116.13219480298821\" y1=\"11.829908846234531\" x2=\"119.38608794759462\" y2=\"4.5215451850937285\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"142.70844121271415\" y1=\"31.13868209765019\" x2=\"148.6535998165333\" y2=\"25.785637246779324\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.13346478731714\" y1=\"59.58765744437916\" x2=\"166.74191691767837\" y2=\"57.11552148937959\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"162.5672297340936\" y1=\"92.25774859814463\" x2=\"170.52340489703977\" y2=\"93.09397630428586\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"152.41600689897066\" y1=\"123.5\" x2=\"159.34421012924616\" y2=\"127.5\"></line></g></g></g></svg></div></div><div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct\"><div class=\"position-relative\"><div class=\"position-absolute bg-dark \" style=\"width: 5px; height: 65px; transform-origin: center bottom; transform: translate(-50%, -100%) rotate(-62deg); border-radius: 100% 100% 4px 4px; display: inline-block;\"></div></div></div><div class=\"position-absolute bottom-5 left-50pct translate-x-50pct-y-50pct line-height-125rel\"><div class=\"text-color-dark\">Fuel level</div><div class=\"text-color-darker text-size-18 text-medium text-center\">24%</div></div></div><div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\"><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: 168px; max-width: 168px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts25-clip\"><rect x=\"5\" y=\"5\" height=\"158\" width=\"158\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"84\" cy=\"84\" name=\"Charge level\" color=\"color-coldplay-fountain\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 13.123462274177072,83.99999999999999\n    A3,3,0,0,1,10.126146046696547,80.87313222441502\n    A73.94,73.94,0,0,1,157.87385395330347,80.873132224415\n    A3,3,0,0,1,154.8765377258229,84\n  L154.8765377258229,84\n      A3,3,0,0,1,151.8792214983424,81.126867775585\n      A67.94,67.94,0,0,0,16.12077850165761,81.12686777558503\n      A3,3,0,0,1,13.123462274177072,83.99999999999999Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M5,83.99999999999999L8.866535212682876,59.58765744437915L20.08765744437916,37.564965068894615L37.56496506889463,20.087657444379154L59.58765744437916,8.866535212682862L84,5L108.41234255562085,8.866535212682876L130.43503493110538,20.087657444379154L147.91234255562085,37.56496506889463L159.13346478731714,59.58765744437916L163,84L5,83.99999999999999Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"5\" y1=\"83.99999999999999\" x2=\"-3\" y2=\"83.99999999999999\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682876\" y1=\"59.58765744437915\" x2=\"1.2580830823216473\" y2=\"57.11552148937957\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"20.08765744437916\" y1=\"37.564965068894615\" x2=\"13.615521489379574\" y2=\"32.86268305055483\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.56496506889463\" y1=\"20.087657444379154\" x2=\"32.86268305055485\" y2=\"13.615521489379574\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"59.58765744437916\" y1=\"8.866535212682862\" x2=\"57.11552148937958\" y2=\"1.2580830823216331\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"5\" x2=\"84\" y2=\"-3\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"108.41234255562085\" y1=\"8.866535212682876\" x2=\"110.88447851062043\" y2=\"1.2580830823216473\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"20.087657444379154\" x2=\"135.13731694944516\" y2=\"13.615521489379574\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"147.91234255562085\" y1=\"37.56496506889463\" x2=\"154.38447851062043\" y2=\"32.86268305055485\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.13346478731714\" y1=\"59.58765744437916\" x2=\"166.74191691767837\" y2=\"57.11552148937958\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"163\" y1=\"84\" x2=\"171\" y2=\"84\"></line></g></g></g></svg></div></div><div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct\"><div class=\"position-relative\"><div class=\"position-absolute bg-dark \" style=\"width: 5px; height: 65px; transform-origin: center bottom; transform: translate(-50%, -100%) rotate(-22deg); border-radius: 100% 100% 4px 4px; display: inline-block;\"></div></div></div><div class=\"position-absolute bottom-25 left-50pct translate-x-50pct-y-50pct  line-height-125rel\"><div class=\"text-color-dark\">Charge level</div><div class=\"text-color-darker text-size-18 text-medium text-center\">38%</div></div></div><div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\"><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: 168px; max-width: 168px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts27-clip\"><rect x=\"5\" y=\"5\" height=\"158\" width=\"158\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"84\" cy=\"84\" name=\"Lorem ipsum\" color=\"color-warmup-charm\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 84,10.060000000000002\n    A 73.94,73.94,0,\n    1,1,\n    83.99870950355114,10.060000011261707\n  L 83.99881422330625,16.060000010347864\n            A 67.94,67.94,0,\n            1,0,\n            84,16.060000000000002 Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M84,5L130.43503493110538,20.087657444379154L159.1334647873171,59.587657444379154L159.1334647873171,108.41234255562085L130.43503493110538,147.91234255562085L84,163L37.56496506889463,147.91234255562085L8.866535212682876,108.41234255562085L8.866535212682862,59.58765744437916L37.564965068894615,20.08765744437916L83.99999999999999,5L84,5Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"5\" x2=\"84\" y2=\"-3\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"20.087657444379154\" x2=\"135.13731694944516\" y2=\"13.615521489379574\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.1334647873171\" y1=\"59.587657444379154\" x2=\"166.74191691767834\" y2=\"57.115521489379574\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.1334647873171\" y1=\"108.41234255562085\" x2=\"166.74191691767834\" y2=\"110.88447851062043\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"147.91234255562085\" x2=\"135.13731694944516\" y2=\"154.38447851062043\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"163\" x2=\"84\" y2=\"171\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.56496506889463\" y1=\"147.91234255562085\" x2=\"32.86268305055485\" y2=\"154.38447851062043\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682876\" y1=\"108.41234255562085\" x2=\"1.2580830823216473\" y2=\"110.88447851062043\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682862\" y1=\"59.58765744437916\" x2=\"1.2580830823216331\" y2=\"57.11552148937959\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.564965068894615\" y1=\"20.08765744437916\" x2=\"32.86268305055483\" y2=\"13.615521489379574\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"83.99999999999999\" y1=\"5\" x2=\"83.99999999999999\" y2=\"-3\"></line></g></g></g></svg></div></div><div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct\"><div class=\"position-relative\"><div class=\"position-absolute bg-dark \" style=\"width: 5px; height: 65px; transform-origin: center bottom; transform: translate(-50%, -100%) rotate(-73deg); border-radius: 100% 100% 4px 4px; display: inline-block;\"></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import RadialBarChart from '@rio-cloud/rio-uikit/RadialBarChart';\nimport ChartNeedle from '@rio-cloud/rio-uikit/ChartNeedle';\n\nexport default () => {\n    const panelClasses = 'panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative';\n\n    return (\n        <>\n            <label>RadialBarChart with a needle</label>\n\n            <div className='display-flex flex-wrap gap-25'>\n                <div className={panelClasses}>\n                    <RadialBarChart\n                        data={[fuelLevel]}\n                        dataKey='value'\n                        startAngle={210}\n                        endAngle={-30}\n                        innerRadius='90%'\n                        legend={false}\n                        range={[0, 100]}\n                    />\n                    <div className='position-absolute top-50pct left-50pct translate-x-50pct-y-50pct'>\n                        <ChartNeedle rotation={-62} />\n                    </div>\n                    <div className='position-absolute bottom-5 left-50pct translate-x-50pct-y-50pct line-height-125rel'>\n                        <div className='text-color-dark'>{fuelLevel.name}</div>\n                        <div className='text-color-darker text-size-18 text-medium text-center'>\n                            {`${fuelLevel.value}%`}\n                        </div>\n                    </div>\n                </div>\n\n                <div className={panelClasses}>\n                    <RadialBarChart\n                        data={[chargeLevel]}\n                        dataKey='value'\n                        startAngle={180}\n                        endAngle={0}\n                        innerRadius='90%'\n                        legend={false}\n                        range={[0, 100]}\n                    />\n                    <div className='position-absolute top-50pct left-50pct translate-x-50pct-y-50pct'>\n                        <ChartNeedle rotation={-22} />\n                    </div>\n                    <div\n                        className={\n                            'position-absolute bottom-25 left-50pct translate-x-50pct-y-50pct ' + ' line-height-125rel'\n                        }\n                    >\n                        <div className='text-color-dark'>{chargeLevel.name}</div>\n                        <div className='text-color-darker text-size-18 text-medium text-center'>\n                            {`${chargeLevel.value}%`}\n                        </div>\n                    </div>\n                </div>\n\n                <div className={panelClasses}>\n                    <RadialBarChart\n                        data={[loremIpsum]}\n                        dataKey='value'\n                        startAngle={90}\n                        endAngle={-270}\n                        innerRadius='90%'\n                        legend={false}\n                        range={[0, 100]}\n                    />\n                    <div className='position-absolute top-50pct left-50pct translate-x-50pct-y-50pct'>\n                        <ChartNeedle rotation={-73} />\n                    </div>\n                </div>\n            </div>\n        </>\n    );\n};\n\nconst fuelLevel = {\n    name: 'Fuel level',\n    value: 24,\n    color: 'color-coldplay-fountain',\n};\n\nconst chargeLevel = {\n    name: 'Charge level',\n    value: 38,\n    color: 'color-coldplay-fountain',\n};\n\nconst loremIpsum = {\n    name: 'Lorem ipsum',\n    value: 80,\n    color: 'color-warmup-charm',\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>RadialBarChart with a needle</label>\n<div class=\"display-flex flex-wrap gap-25\">\n    <div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\">\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: 168px; max-width: 168px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" style=\"width: 100%; height: 100%;\">\n                    <title>\n                    </title>\n                    <desc>\n                    </desc>\n                    <defs>\n                        <clipPath id=\"recharts23-clip\">\n                            <rect x=\"5\" y=\"5\" height=\"158\" width=\"158\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-area\">\n                        <g class=\"recharts-layer recharts-radial-bar-background\">\n                            <path cx=\"84\" cy=\"84\" name=\"Fuel level\" color=\"color-coldplay-fountain\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 22.619117797151205,119.43826886291147\n    A3,3,0,0,1,18.45993191318523,118.22898004872019\n    A73.94,73.94,0,1,1,149.54006808681476,118.22898004872017\n    A3,3,0,0,1,145.3808822028488,119.43826886291146\n  L145.3808822028488,119.43826886291146\n      A3,3,0,0,1,144.22169631888283,115.45140525439612\n      A67.94,67.94,0,1,0,23.778303681117187,115.45140525439612\n      A3,3,0,0,1,22.619117797151205,119.43826886291147Z\" role=\"img\">\n                            </path>\n                        </g>\n                        <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                            <g class=\"recharts-layer\">\n                                <path cx=\"84\" cy=\"84\" name=\"Fuel level\" color=\"color-coldplay-fountain\" fill=\"#67abc5 \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 22.619117797151205,119.43826886291147\n    A3,3,0,0,1,18.45993191318523,118.22898004872019\n    A73.94,73.94,0,0,1,17.084060772205873,52.54557777891694\n    A3,3,0,0,1,21.188958583859502,51.16318108860295\n  L21.188958583859502,51.16318108860295\n      A3,3,0,0,1,22.51408018479399,55.098005873676186\n      A67.94,67.94,0,0,0,23.778303681117187,115.45140525439612\n      A3,3,0,0,1,22.619117797151205,119.43826886291147Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                        <path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M15.58399310102935,123.5L5.432770265906413,92.25774859814463L8.866535212682876,59.58765744437915L25.291558787285872,31.13868209765019L51.867805197011776,11.829908846234531L84,5L116.13219480298821,11.829908846234531L142.70844121271415,31.13868209765019L159.13346478731714,59.58765744437916L162.5672297340936,92.25774859814463L152.41600689897066,123.5L15.58399310102935,123.5Z\">\n                        </path>\n                        <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"15.58399310102935\" y1=\"123.5\" x2=\"8.655789870753836\" y2=\"127.5\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"5.432770265906413\" y1=\"92.25774859814463\" x2=\"-2.523404897039782\" y2=\"93.09397630428586\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682876\" y1=\"59.58765744437915\" x2=\"1.2580830823216473\" y2=\"57.11552148937957\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"25.291558787285872\" y1=\"31.13868209765019\" x2=\"19.346400183466727\" y2=\"25.785637246779324\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"51.867805197011776\" y1=\"11.829908846234531\" x2=\"48.613912052405375\" y2=\"4.5215451850937285\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"5\" x2=\"84\" y2=\"-3\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"116.13219480298821\" y1=\"11.829908846234531\" x2=\"119.38608794759462\" y2=\"4.5215451850937285\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"142.70844121271415\" y1=\"31.13868209765019\" x2=\"148.6535998165333\" y2=\"25.785637246779324\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.13346478731714\" y1=\"59.58765744437916\" x2=\"166.74191691767837\" y2=\"57.11552148937959\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"162.5672297340936\" y1=\"92.25774859814463\" x2=\"170.52340489703977\" y2=\"93.09397630428586\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"152.41600689897066\" y1=\"123.5\" x2=\"159.34421012924616\" y2=\"127.5\">\n                                </line>\n                            </g>\n                        </g>\n                    </g>\n                </svg>\n            </div>\n        </div>\n        <div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct\">\n            <div class=\"position-relative\">\n                <div class=\"position-absolute bg-dark \" style=\"width: 5px; height: 65px; transform-origin: center bottom; transform: translate(-50%, -100%) rotate(-62deg); border-radius: 100% 100% 4px 4px; display: inline-block;\">\n                </div>\n            </div>\n        </div>\n        <div class=\"position-absolute bottom-5 left-50pct translate-x-50pct-y-50pct line-height-125rel\">\n            <div class=\"text-color-dark\">Fuel level</div>\n            <div class=\"text-color-darker text-size-18 text-medium text-center\">24%</div>\n        </div>\n    </div>\n    <div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\">\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: 168px; max-width: 168px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" style=\"width: 100%; height: 100%;\">\n                    <title>\n                    </title>\n                    <desc>\n                    </desc>\n                    <defs>\n                        <clipPath id=\"recharts25-clip\">\n                            <rect x=\"5\" y=\"5\" height=\"158\" width=\"158\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-area\">\n                        <g class=\"recharts-layer recharts-radial-bar-background\">\n                            <path cx=\"84\" cy=\"84\" name=\"Charge level\" color=\"color-coldplay-fountain\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 13.123462274177072,83.99999999999999\n    A3,3,0,0,1,10.126146046696547,80.87313222441502\n    A73.94,73.94,0,0,1,157.87385395330347,80.873132224415\n    A3,3,0,0,1,154.8765377258229,84\n  L154.8765377258229,84\n      A3,3,0,0,1,151.8792214983424,81.126867775585\n      A67.94,67.94,0,0,0,16.12077850165761,81.12686777558503\n      A3,3,0,0,1,13.123462274177072,83.99999999999999Z\" role=\"img\">\n                            </path>\n                        </g>\n                        <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                            <g class=\"recharts-layer\">\n                                <path cx=\"84\" cy=\"84\" name=\"Charge level\" color=\"color-coldplay-fountain\" fill=\"#67abc5 \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 13.123462274177072,83.99999999999999\n    A3,3,0,0,1,10.126146046696547,80.87313222441502\n    A73.94,73.94,0,0,1,53.89793242612632,16.464904473466973\n    A3,3,0,0,1,57.90860625384275,18.100661821358273\n  L57.90860625384275,18.100661821358273\n      A3,3,0,0,1,56.34062116622967,21.945166485357667\n      A67.94,67.94,0,0,0,16.12077850165761,81.12686777558503\n      A3,3,0,0,1,13.123462274177072,83.99999999999999Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                        <path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M5,83.99999999999999L8.866535212682876,59.58765744437915L20.08765744437916,37.564965068894615L37.56496506889463,20.087657444379154L59.58765744437916,8.866535212682862L84,5L108.41234255562085,8.866535212682876L130.43503493110538,20.087657444379154L147.91234255562085,37.56496506889463L159.13346478731714,59.58765744437916L163,84L5,83.99999999999999Z\">\n                        </path>\n                        <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"5\" y1=\"83.99999999999999\" x2=\"-3\" y2=\"83.99999999999999\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682876\" y1=\"59.58765744437915\" x2=\"1.2580830823216473\" y2=\"57.11552148937957\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"20.08765744437916\" y1=\"37.564965068894615\" x2=\"13.615521489379574\" y2=\"32.86268305055483\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.56496506889463\" y1=\"20.087657444379154\" x2=\"32.86268305055485\" y2=\"13.615521489379574\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"59.58765744437916\" y1=\"8.866535212682862\" x2=\"57.11552148937958\" y2=\"1.2580830823216331\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"5\" x2=\"84\" y2=\"-3\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"108.41234255562085\" y1=\"8.866535212682876\" x2=\"110.88447851062043\" y2=\"1.2580830823216473\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"20.087657444379154\" x2=\"135.13731694944516\" y2=\"13.615521489379574\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"147.91234255562085\" y1=\"37.56496506889463\" x2=\"154.38447851062043\" y2=\"32.86268305055485\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.13346478731714\" y1=\"59.58765744437916\" x2=\"166.74191691767837\" y2=\"57.11552148937958\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"163\" y1=\"84\" x2=\"171\" y2=\"84\">\n                                </line>\n                            </g>\n                        </g>\n                    </g>\n                </svg>\n            </div>\n        </div>\n        <div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct\">\n            <div class=\"position-relative\">\n                <div class=\"position-absolute bg-dark \" style=\"width: 5px; height: 65px; transform-origin: center bottom; transform: translate(-50%, -100%) rotate(-22deg); border-radius: 100% 100% 4px 4px; display: inline-block;\">\n                </div>\n            </div>\n        </div>\n        <div class=\"position-absolute bottom-25 left-50pct translate-x-50pct-y-50pct  line-height-125rel\">\n            <div class=\"text-color-dark\">Charge level</div>\n            <div class=\"text-color-darker text-size-18 text-medium text-center\">38%</div>\n        </div>\n    </div>\n    <div class=\"panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative\">\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: 168px; max-width: 168px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"168\" height=\"168\" viewBox=\"0 0 168 168\" style=\"width: 100%; height: 100%;\">\n                    <title>\n                    </title>\n                    <desc>\n                    </desc>\n                    <defs>\n                        <clipPath id=\"recharts27-clip\">\n                            <rect x=\"5\" y=\"5\" height=\"158\" width=\"158\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-area\">\n                        <g class=\"recharts-layer recharts-radial-bar-background\">\n                            <path cx=\"84\" cy=\"84\" name=\"Lorem ipsum\" color=\"color-warmup-charm\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 84,10.060000000000002\n    A 73.94,73.94,0,\n    1,1,\n    83.99870950355114,10.060000011261707\n  L 83.99881422330625,16.060000010347864\n            A 67.94,67.94,0,\n            1,0,\n            84,16.060000000000002 Z\" role=\"img\">\n                            </path>\n                        </g>\n                        <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                            <g class=\"recharts-layer\">\n                                <path cx=\"84\" cy=\"84\" name=\"Lorem ipsum\" color=\"color-warmup-charm\" fill=\"#c9778d \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 84,13.123462274177072\n    A3,3,0,0,1,87.12686777558501,10.126146046696547\n    A73.94,73.94,0,1,1,12.775534532055119,64.14555166201977\n    A3,3,0,0,1,16.59240694341682,62.097945340263635\n  L16.59240694341682,62.097945340263635\n      A3,3,0,0,1,18.55517738852886,65.75667811627838\n      A67.94,67.94,0,1,0,86.873132224415,16.12077850165761\n      A3,3,0,0,1,84,13.123462274177072Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                        <path cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M84,5L130.43503493110538,20.087657444379154L159.1334647873171,59.587657444379154L159.1334647873171,108.41234255562085L130.43503493110538,147.91234255562085L84,163L37.56496506889463,147.91234255562085L8.866535212682876,108.41234255562085L8.866535212682862,59.58765744437916L37.564965068894615,20.08765744437916L83.99999999999999,5L84,5Z\">\n                        </path>\n                        <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"5\" x2=\"84\" y2=\"-3\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"20.087657444379154\" x2=\"135.13731694944516\" y2=\"13.615521489379574\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.1334647873171\" y1=\"59.587657444379154\" x2=\"166.74191691767834\" y2=\"57.115521489379574\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"159.1334647873171\" y1=\"108.41234255562085\" x2=\"166.74191691767834\" y2=\"110.88447851062043\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"130.43503493110538\" y1=\"147.91234255562085\" x2=\"135.13731694944516\" y2=\"154.38447851062043\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"84\" y1=\"163\" x2=\"84\" y2=\"171\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.56496506889463\" y1=\"147.91234255562085\" x2=\"32.86268305055485\" y2=\"154.38447851062043\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682876\" y1=\"108.41234255562085\" x2=\"1.2580830823216473\" y2=\"110.88447851062043\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"8.866535212682862\" y1=\"59.58765744437916\" x2=\"1.2580830823216331\" y2=\"57.11552148937959\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"37.564965068894615\" y1=\"20.08765744437916\" x2=\"32.86268305055483\" y2=\"13.615521489379574\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"84\" cy=\"84\" orientation=\"outer\" radius=\"79\" fill=\"none\" x1=\"83.99999999999999\" y1=\"5\" x2=\"83.99999999999999\" y2=\"-3\">\n                                </line>\n                            </g>\n                        </g>\n                    </g>\n                </svg>\n            </div>\n        </div>\n        <div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct\">\n            <div class=\"position-relative\">\n                <div class=\"position-absolute bg-dark \" style=\"width: 5px; height: 65px; transform-origin: center bottom; transform: translate(-50%, -100%) rotate(-73deg); border-radius: 100% 100% 4px 4px; display: inline-block;\">\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "RadialBarChart",
+                  "rows": [
+                    {
+                      "name": "width",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The width of chart container."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The height of chart container."
+                    },
+                    {
+                      "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 RadialBar."
+                    },
+                    {
+                      "name": "startAngle",
+                      "type": "Number",
+                      "default": "180",
+                      "description": "The start angle of all the bars."
+                    },
+                    {
+                      "name": "endAngle",
+                      "type": "Number",
+                      "default": "180",
+                      "description": "The end angle of all the bars."
+                    },
+                    {
+                      "name": "innerRadius",
+                      "type": "String | Number",
+                      "default": "30%",
+                      "description": "The innerRadius of the radial bar which is most close to the center. 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": "100%",
+                      "description": "The outerRadius of the radial bar which is most far away from the center. 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": "clockWise",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Set to \"true\" if the bars should go clockwise."
+                    },
+                    {
+                      "name": "cornerRadius",
+                      "type": "Number",
+                      "default": "30",
+                      "description": "Set the corner radius for the individual bars."
+                    },
+                    {
+                      "name": "showBarLabel",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Renders a label on top of the bars."
+                    },
+                    {
+                      "name": "background",
+                      "type": "Boolean | Function",
+                      "default": "true",
+                      "description": "If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background."
+                    },
+                    {
+                      "name": "range",
+                      "type": "Array",
+                      "default": "",
+                      "description": "Defines the min and max value for the bar."
+                    },
+                    {
+                      "name": "radialBarOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar"
+                    },
+                    {
+                      "name": "textOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text"
+                    },
+                    {
+                      "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 RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart"
+                    }
+                  ]
+                },
+                {
+                  "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 6",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Circle RadialBarChart as progress steps</label><hr><div class=\"display-flex align-items-center gap-10\"><div class=\"height-60 aspect-ratio-1 position-relative\"><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: 60px; max-width: 60px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts29-clip\"><rect x=\"5\" y=\"5\" height=\"50\" width=\"50\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"30\" cy=\"30\" color=\"brand-success\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 30,8\n    A 22,22,0,\n    1,1,\n    29.99961602756458,8.000000003350792\n  L 29.99968584073466,12.000000002741558\n            A 18,18,0,\n            1,0,\n            30,12 Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M30,5L40.16841607689501,7.16136355893498L48.57862063693486,13.271734841028543L53.77641290737884,22.27457514062631L54.86304738420684,32.61321158169134L51.65063509461097,42.5L44.69463130731184,50.22542485937368L35.197792270444,54.453690018345135L24.802207729556017,54.45369001834514L15.305368692688175,50.22542485937369L8.34936490538903,42.5L5.136952615793167,32.613211581691324L6.223587092621155,22.27457514062633L11.421379363065142,13.271734841028543L19.83158392310498,7.161363558934987L29.999999999999996,5L30,5Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"30\" y1=\"5\" x2=\"30.000000000000004\" y2=\"-3\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"40.16841607689501\" y1=\"7.16136355893498\" x2=\"43.42230922150141\" y2=\"-0.14700010220582982\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"48.57862063693486\" y1=\"13.271734841028543\" x2=\"54.52377924075401\" y2=\"7.918689990157677\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"53.77641290737884\" y1=\"22.27457514062631\" x2=\"61.38486503774007\" y2=\"19.80243918562673\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"54.86304738420684\" y1=\"32.61321158169134\" x2=\"62.81922254715302\" y2=\"33.44943928783256\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"51.65063509461097\" y1=\"42.5\" x2=\"58.578838324886476\" y2=\"46.49999999999999\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"44.69463130731184\" y1=\"50.22542485937368\" x2=\"49.396913325651624\" y2=\"56.69756081437326\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"35.197792270444\" y1=\"54.453690018345135\" x2=\"36.861085796986075\" y2=\"62.27887082421558\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"24.802207729556017\" y1=\"54.45369001834514\" x2=\"23.13891420301394\" y2=\"62.27887082421559\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"15.305368692688175\" y1=\"50.22542485937369\" x2=\"10.60308667434839\" y2=\"56.69756081437326\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"8.34936490538903\" y1=\"42.5\" x2=\"1.4211616751135239\" y2=\"46.5\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"5.136952615793167\" y1=\"32.613211581691324\" x2=\"-2.819222547153025\" y2=\"33.44943928783255\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"6.223587092621155\" y1=\"22.27457514062633\" x2=\"-1.3848650377400737\" y2=\"19.802439185626753\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"11.421379363065142\" y1=\"13.271734841028543\" x2=\"5.47622075924599\" y2=\"7.918689990157677\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"19.83158392310498\" y1=\"7.161363558934987\" x2=\"16.57769077849857\" y2=\"-0.14700010220581916\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"29.999999999999996\" y1=\"5\" x2=\"29.999999999999993\" y2=\"-3\"></line></g></g></g></svg></div></div><div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct line-height-125rel text-center\"><span class=\"rioglyph rioglyph-ok text-size-16 text-color-success opacity-50\"></span></div></div><div class=\"line-height-125rel\"><div class=\"text-size-18 text-color-darker\">Not Started</div><div class=\"text-color-gray\">Lorem ipsum dolor sit amet</div></div></div><hr><div class=\"display-flex align-items-center gap-10\"><div class=\"height-60 aspect-ratio-1 position-relative\"><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: 60px; max-width: 60px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts31-clip\"><rect x=\"5\" y=\"5\" height=\"50\" width=\"50\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"30\" cy=\"30\" color=\"brand-success\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 30,8\n    A 22,22,0,\n    1,1,\n    29.99961602756458,8.000000003350792\n  L 29.99968584073466,12.000000002741558\n            A 18,18,0,\n            1,0,\n            30,12 Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M30,5L40.16841607689501,7.16136355893498L48.57862063693486,13.271734841028543L53.77641290737884,22.27457514062631L54.86304738420684,32.61321158169134L51.65063509461097,42.5L44.69463130731184,50.22542485937368L35.197792270444,54.453690018345135L24.802207729556017,54.45369001834514L15.305368692688175,50.22542485937369L8.34936490538903,42.5L5.136952615793167,32.613211581691324L6.223587092621155,22.27457514062633L11.421379363065142,13.271734841028543L19.83158392310498,7.161363558934987L29.999999999999996,5L30,5Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"30\" y1=\"5\" x2=\"30.000000000000004\" y2=\"-3\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"40.16841607689501\" y1=\"7.16136355893498\" x2=\"43.42230922150141\" y2=\"-0.14700010220582982\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"48.57862063693486\" y1=\"13.271734841028543\" x2=\"54.52377924075401\" y2=\"7.918689990157677\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"53.77641290737884\" y1=\"22.27457514062631\" x2=\"61.38486503774007\" y2=\"19.80243918562673\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"54.86304738420684\" y1=\"32.61321158169134\" x2=\"62.81922254715302\" y2=\"33.44943928783256\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"51.65063509461097\" y1=\"42.5\" x2=\"58.578838324886476\" y2=\"46.49999999999999\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"44.69463130731184\" y1=\"50.22542485937368\" x2=\"49.396913325651624\" y2=\"56.69756081437326\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"35.197792270444\" y1=\"54.453690018345135\" x2=\"36.861085796986075\" y2=\"62.27887082421558\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"24.802207729556017\" y1=\"54.45369001834514\" x2=\"23.13891420301394\" y2=\"62.27887082421559\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"15.305368692688175\" y1=\"50.22542485937369\" x2=\"10.60308667434839\" y2=\"56.69756081437326\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"8.34936490538903\" y1=\"42.5\" x2=\"1.4211616751135239\" y2=\"46.5\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"5.136952615793167\" y1=\"32.613211581691324\" x2=\"-2.819222547153025\" y2=\"33.44943928783255\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"6.223587092621155\" y1=\"22.27457514062633\" x2=\"-1.3848650377400737\" y2=\"19.802439185626753\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"11.421379363065142\" y1=\"13.271734841028543\" x2=\"5.47622075924599\" y2=\"7.918689990157677\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"19.83158392310498\" y1=\"7.161363558934987\" x2=\"16.57769077849857\" y2=\"-0.14700010220581916\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"29.999999999999996\" y1=\"5\" x2=\"29.999999999999993\" y2=\"-3\"></line></g></g></g></svg></div></div><div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct line-height-125rel text-center\"><span class=\"rioglyph rioglyph-ok text-size-16 text-color-success undefined\"></span></div></div><div class=\"line-height-125rel\"><div class=\"text-size-18 text-color-darker\">Initial Step</div><div class=\"text-color-gray\">Lorem ipsum dolor sit amet</div></div></div><hr><div class=\"display-flex align-items-center gap-10\"><div class=\"height-60 aspect-ratio-1 position-relative\"><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: 60px; max-width: 60px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts33-clip\"><rect x=\"5\" y=\"5\" height=\"50\" width=\"50\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"30\" cy=\"30\" color=\"brand-success\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 30,8\n    A 22,22,0,\n    1,1,\n    29.99961602756458,8.000000003350792\n  L 29.99968584073466,12.000000002741558\n            A 18,18,0,\n            1,0,\n            30,12 Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M30,5L40.16841607689501,7.16136355893498L48.57862063693486,13.271734841028543L53.77641290737884,22.27457514062631L54.86304738420684,32.61321158169134L51.65063509461097,42.5L44.69463130731184,50.22542485937368L35.197792270444,54.453690018345135L24.802207729556017,54.45369001834514L15.305368692688175,50.22542485937369L8.34936490538903,42.5L5.136952615793167,32.613211581691324L6.223587092621155,22.27457514062633L11.421379363065142,13.271734841028543L19.83158392310498,7.161363558934987L29.999999999999996,5L30,5Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"30\" y1=\"5\" x2=\"30.000000000000004\" y2=\"-3\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"40.16841607689501\" y1=\"7.16136355893498\" x2=\"43.42230922150141\" y2=\"-0.14700010220582982\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"48.57862063693486\" y1=\"13.271734841028543\" x2=\"54.52377924075401\" y2=\"7.918689990157677\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"53.77641290737884\" y1=\"22.27457514062631\" x2=\"61.38486503774007\" y2=\"19.80243918562673\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"54.86304738420684\" y1=\"32.61321158169134\" x2=\"62.81922254715302\" y2=\"33.44943928783256\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"51.65063509461097\" y1=\"42.5\" x2=\"58.578838324886476\" y2=\"46.49999999999999\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"44.69463130731184\" y1=\"50.22542485937368\" x2=\"49.396913325651624\" y2=\"56.69756081437326\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"35.197792270444\" y1=\"54.453690018345135\" x2=\"36.861085796986075\" y2=\"62.27887082421558\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"24.802207729556017\" y1=\"54.45369001834514\" x2=\"23.13891420301394\" y2=\"62.27887082421559\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"15.305368692688175\" y1=\"50.22542485937369\" x2=\"10.60308667434839\" y2=\"56.69756081437326\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"8.34936490538903\" y1=\"42.5\" x2=\"1.4211616751135239\" y2=\"46.5\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"5.136952615793167\" y1=\"32.613211581691324\" x2=\"-2.819222547153025\" y2=\"33.44943928783255\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"6.223587092621155\" y1=\"22.27457514062633\" x2=\"-1.3848650377400737\" y2=\"19.802439185626753\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"11.421379363065142\" y1=\"13.271734841028543\" x2=\"5.47622075924599\" y2=\"7.918689990157677\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"19.83158392310498\" y1=\"7.161363558934987\" x2=\"16.57769077849857\" y2=\"-0.14700010220581916\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"29.999999999999996\" y1=\"5\" x2=\"29.999999999999993\" y2=\"-3\"></line></g></g></g></svg></div></div><div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct line-height-125rel text-center\"><span class=\"rioglyph rioglyph-ok text-size-16 text-color-success undefined\"></span></div></div><div class=\"line-height-125rel\"><div class=\"text-size-18 text-color-darker\">Second Step</div><div class=\"text-color-gray\">Lorem ipsum dolor sit amet</div></div></div><hr><div class=\"display-flex align-items-center gap-10\"><div class=\"height-60 aspect-ratio-1 position-relative\"><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: 60px; max-width: 60px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts35-clip\"><rect x=\"5\" y=\"5\" height=\"50\" width=\"50\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"30\" cy=\"30\" color=\"brand-success\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 30,8\n    A 22,22,0,\n    1,1,\n    29.99961602756458,8.000000003350792\n  L 29.99968584073466,12.000000002741558\n            A 18,18,0,\n            1,0,\n            30,12 Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M30,5L40.16841607689501,7.16136355893498L48.57862063693486,13.271734841028543L53.77641290737884,22.27457514062631L54.86304738420684,32.61321158169134L51.65063509461097,42.5L44.69463130731184,50.22542485937368L35.197792270444,54.453690018345135L24.802207729556017,54.45369001834514L15.305368692688175,50.22542485937369L8.34936490538903,42.5L5.136952615793167,32.613211581691324L6.223587092621155,22.27457514062633L11.421379363065142,13.271734841028543L19.83158392310498,7.161363558934987L29.999999999999996,5L30,5Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"30\" y1=\"5\" x2=\"30.000000000000004\" y2=\"-3\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"40.16841607689501\" y1=\"7.16136355893498\" x2=\"43.42230922150141\" y2=\"-0.14700010220582982\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"48.57862063693486\" y1=\"13.271734841028543\" x2=\"54.52377924075401\" y2=\"7.918689990157677\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"53.77641290737884\" y1=\"22.27457514062631\" x2=\"61.38486503774007\" y2=\"19.80243918562673\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"54.86304738420684\" y1=\"32.61321158169134\" x2=\"62.81922254715302\" y2=\"33.44943928783256\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"51.65063509461097\" y1=\"42.5\" x2=\"58.578838324886476\" y2=\"46.49999999999999\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"44.69463130731184\" y1=\"50.22542485937368\" x2=\"49.396913325651624\" y2=\"56.69756081437326\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"35.197792270444\" y1=\"54.453690018345135\" x2=\"36.861085796986075\" y2=\"62.27887082421558\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"24.802207729556017\" y1=\"54.45369001834514\" x2=\"23.13891420301394\" y2=\"62.27887082421559\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"15.305368692688175\" y1=\"50.22542485937369\" x2=\"10.60308667434839\" y2=\"56.69756081437326\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"8.34936490538903\" y1=\"42.5\" x2=\"1.4211616751135239\" y2=\"46.5\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"5.136952615793167\" y1=\"32.613211581691324\" x2=\"-2.819222547153025\" y2=\"33.44943928783255\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"6.223587092621155\" y1=\"22.27457514062633\" x2=\"-1.3848650377400737\" y2=\"19.802439185626753\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"11.421379363065142\" y1=\"13.271734841028543\" x2=\"5.47622075924599\" y2=\"7.918689990157677\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"19.83158392310498\" y1=\"7.161363558934987\" x2=\"16.57769077849857\" y2=\"-0.14700010220581916\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"29.999999999999996\" y1=\"5\" x2=\"29.999999999999993\" y2=\"-3\"></line></g></g></g></svg></div></div><div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct line-height-125rel text-center\"><span class=\"rioglyph rioglyph-ok text-size-16 text-color-success undefined\"></span></div></div><div class=\"line-height-125rel\"><div class=\"text-size-18 text-color-darker\">Final Step</div><div class=\"text-color-gray\">Lorem ipsum dolor sit amet</div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import RadialBarChart from '@rio-cloud/rio-uikit/RadialBarChart';\n\nexport default () => {\n    const Icon = ({ className }: { className?: string }) => (\n        <div\n            className={\n                'position-absolute top-50pct left-50pct translate-x-50pct-y-50pct ' + 'line-height-125rel text-center'\n            }\n        >\n            <span className={`rioglyph rioglyph-ok text-size-16 text-color-success ${className}`} />\n        </div>\n    );\n\n    const commonProps = {\n        dataKey: 'value',\n        startAngle: 90,\n        endAngle: -270,\n        innerRadius: '80%',\n        range: [0, 3],\n    };\n\n    return (\n        <>\n            <label>Circle RadialBarChart as progress steps</label>\n            <hr />\n\n            <div className='display-flex align-items-center gap-10'>\n                <div className='height-60 aspect-ratio-1 position-relative'>\n                    <RadialBarChart data={[notStartedStep]} legend={false} {...commonProps} />\n                    <Icon className='opacity-50' />\n                </div>\n                <div className='line-height-125rel'>\n                    <div className='text-size-18 text-color-darker'>Not Started</div>\n                    <div className='text-color-gray'>Lorem ipsum dolor sit amet</div>\n                </div>\n            </div>\n            <hr />\n\n            <div className='display-flex align-items-center gap-10'>\n                <div className='height-60 aspect-ratio-1 position-relative'>\n                    <RadialBarChart data={[firstStep]} legend={false} {...commonProps} />\n                    <Icon />\n                </div>\n                <div className='line-height-125rel'>\n                    <div className='text-size-18 text-color-darker'>Initial Step</div>\n                    <div className='text-color-gray'>Lorem ipsum dolor sit amet</div>\n                </div>\n            </div>\n            <hr />\n\n            <div className='display-flex align-items-center gap-10'>\n                <div className='height-60 aspect-ratio-1 position-relative'>\n                    <RadialBarChart data={[secondStep]} legend={false} {...commonProps} />\n                    <Icon />\n                </div>\n                <div className='line-height-125rel'>\n                    <div className='text-size-18 text-color-darker'>Second Step</div>\n                    <div className='text-color-gray'>Lorem ipsum dolor sit amet</div>\n                </div>\n            </div>\n            <hr />\n\n            <div className='display-flex align-items-center gap-10'>\n                <div className='height-60 aspect-ratio-1 position-relative'>\n                    <RadialBarChart data={[thirdStep]} legend={false} {...commonProps} />\n                    <Icon />\n                </div>\n                <div className='line-height-125rel'>\n                    <div className='text-size-18 text-color-darker'>Final Step</div>\n                    <div className='text-color-gray'>Lorem ipsum dolor sit amet</div>\n                </div>\n            </div>\n        </>\n    );\n};\n\nconst notStartedStep = {\n    value: 0,\n    color: 'brand-success',\n};\n\nconst firstStep = {\n    value: 1,\n    color: 'brand-success',\n};\n\nconst secondStep = {\n    value: 2,\n    color: 'brand-success',\n};\n\nconst thirdStep = {\n    value: 3,\n    color: 'brand-success',\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>Circle RadialBarChart as progress steps</label>\n<hr>\n<div class=\"display-flex align-items-center gap-10\">\n    <div class=\"height-60 aspect-ratio-1 position-relative\">\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: 60px; max-width: 60px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" style=\"width: 100%; height: 100%;\">\n                    <title>\n                    </title>\n                    <desc>\n                    </desc>\n                    <defs>\n                        <clipPath id=\"recharts29-clip\">\n                            <rect x=\"5\" y=\"5\" height=\"50\" width=\"50\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-area\">\n                        <g class=\"recharts-layer recharts-radial-bar-background\">\n                            <path cx=\"30\" cy=\"30\" color=\"brand-success\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 30,8\n    A 22,22,0,\n    1,1,\n    29.99961602756458,8.000000003350792\n  L 29.99968584073466,12.000000002741558\n            A 18,18,0,\n            1,0,\n            30,12 Z\" role=\"img\">\n                            </path>\n                        </g>\n                        <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                            <g class=\"recharts-layer\">\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                        <path cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M30,5L40.16841607689501,7.16136355893498L48.57862063693486,13.271734841028543L53.77641290737884,22.27457514062631L54.86304738420684,32.61321158169134L51.65063509461097,42.5L44.69463130731184,50.22542485937368L35.197792270444,54.453690018345135L24.802207729556017,54.45369001834514L15.305368692688175,50.22542485937369L8.34936490538903,42.5L5.136952615793167,32.613211581691324L6.223587092621155,22.27457514062633L11.421379363065142,13.271734841028543L19.83158392310498,7.161363558934987L29.999999999999996,5L30,5Z\">\n                        </path>\n                        <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"30\" y1=\"5\" x2=\"30.000000000000004\" y2=\"-3\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"40.16841607689501\" y1=\"7.16136355893498\" x2=\"43.42230922150141\" y2=\"-0.14700010220582982\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"48.57862063693486\" y1=\"13.271734841028543\" x2=\"54.52377924075401\" y2=\"7.918689990157677\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"53.77641290737884\" y1=\"22.27457514062631\" x2=\"61.38486503774007\" y2=\"19.80243918562673\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"54.86304738420684\" y1=\"32.61321158169134\" x2=\"62.81922254715302\" y2=\"33.44943928783256\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"51.65063509461097\" y1=\"42.5\" x2=\"58.578838324886476\" y2=\"46.49999999999999\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"44.69463130731184\" y1=\"50.22542485937368\" x2=\"49.396913325651624\" y2=\"56.69756081437326\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"35.197792270444\" y1=\"54.453690018345135\" x2=\"36.861085796986075\" y2=\"62.27887082421558\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"24.802207729556017\" y1=\"54.45369001834514\" x2=\"23.13891420301394\" y2=\"62.27887082421559\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"15.305368692688175\" y1=\"50.22542485937369\" x2=\"10.60308667434839\" y2=\"56.69756081437326\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"8.34936490538903\" y1=\"42.5\" x2=\"1.4211616751135239\" y2=\"46.5\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"5.136952615793167\" y1=\"32.613211581691324\" x2=\"-2.819222547153025\" y2=\"33.44943928783255\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"6.223587092621155\" y1=\"22.27457514062633\" x2=\"-1.3848650377400737\" y2=\"19.802439185626753\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"11.421379363065142\" y1=\"13.271734841028543\" x2=\"5.47622075924599\" y2=\"7.918689990157677\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"19.83158392310498\" y1=\"7.161363558934987\" x2=\"16.57769077849857\" y2=\"-0.14700010220581916\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"29.999999999999996\" y1=\"5\" x2=\"29.999999999999993\" y2=\"-3\">\n                                </line>\n                            </g>\n                        </g>\n                    </g>\n                </svg>\n            </div>\n        </div>\n        <div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct line-height-125rel text-center\">\n            <span class=\"rioglyph rioglyph-ok text-size-16 text-color-success opacity-50\">\n            </span>\n        </div>\n    </div>\n    <div class=\"line-height-125rel\">\n        <div class=\"text-size-18 text-color-darker\">Not Started</div>\n        <div class=\"text-color-gray\">Lorem ipsum dolor sit amet</div>\n    </div>\n</div>\n<hr>\n<div class=\"display-flex align-items-center gap-10\">\n    <div class=\"height-60 aspect-ratio-1 position-relative\">\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: 60px; max-width: 60px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" style=\"width: 100%; height: 100%;\">\n                    <title>\n                    </title>\n                    <desc>\n                    </desc>\n                    <defs>\n                        <clipPath id=\"recharts31-clip\">\n                            <rect x=\"5\" y=\"5\" height=\"50\" width=\"50\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-area\">\n                        <g class=\"recharts-layer recharts-radial-bar-background\">\n                            <path cx=\"30\" cy=\"30\" color=\"brand-success\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 30,8\n    A 22,22,0,\n    1,1,\n    29.99961602756458,8.000000003350792\n  L 29.99968584073466,12.000000002741558\n            A 18,18,0,\n            1,0,\n            30,12 Z\" role=\"img\">\n                            </path>\n                        </g>\n                        <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                            <g class=\"recharts-layer\">\n                                <path cx=\"30\" cy=\"30\" color=\"brand-success\" fill=\"#5cb85c \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 30,10.100251257867601\n    A2,2,0,0,1,32.2,8.110276383654362\n    A22,22,0,0,1,50.05705673357549,39.039605919847055\n    A2,2,0,0,1,47.233687939614086,39.9498743710662\n  L47.233687939614086,39.9498743710662\n      A2,2,0,0,1,46.41031914565268,37.39604120714759\n      A18,18,0,0,0,31.8,12.09022613208084\n      A2,2,0,0,1,30,10.100251257867601Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                        <path cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M30,5L40.16841607689501,7.16136355893498L48.57862063693486,13.271734841028543L53.77641290737884,22.27457514062631L54.86304738420684,32.61321158169134L51.65063509461097,42.5L44.69463130731184,50.22542485937368L35.197792270444,54.453690018345135L24.802207729556017,54.45369001834514L15.305368692688175,50.22542485937369L8.34936490538903,42.5L5.136952615793167,32.613211581691324L6.223587092621155,22.27457514062633L11.421379363065142,13.271734841028543L19.83158392310498,7.161363558934987L29.999999999999996,5L30,5Z\">\n                        </path>\n                        <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"30\" y1=\"5\" x2=\"30.000000000000004\" y2=\"-3\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"40.16841607689501\" y1=\"7.16136355893498\" x2=\"43.42230922150141\" y2=\"-0.14700010220582982\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"48.57862063693486\" y1=\"13.271734841028543\" x2=\"54.52377924075401\" y2=\"7.918689990157677\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"53.77641290737884\" y1=\"22.27457514062631\" x2=\"61.38486503774007\" y2=\"19.80243918562673\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"54.86304738420684\" y1=\"32.61321158169134\" x2=\"62.81922254715302\" y2=\"33.44943928783256\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"51.65063509461097\" y1=\"42.5\" x2=\"58.578838324886476\" y2=\"46.49999999999999\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"44.69463130731184\" y1=\"50.22542485937368\" x2=\"49.396913325651624\" y2=\"56.69756081437326\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"35.197792270444\" y1=\"54.453690018345135\" x2=\"36.861085796986075\" y2=\"62.27887082421558\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"24.802207729556017\" y1=\"54.45369001834514\" x2=\"23.13891420301394\" y2=\"62.27887082421559\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"15.305368692688175\" y1=\"50.22542485937369\" x2=\"10.60308667434839\" y2=\"56.69756081437326\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"8.34936490538903\" y1=\"42.5\" x2=\"1.4211616751135239\" y2=\"46.5\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"5.136952615793167\" y1=\"32.613211581691324\" x2=\"-2.819222547153025\" y2=\"33.44943928783255\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"6.223587092621155\" y1=\"22.27457514062633\" x2=\"-1.3848650377400737\" y2=\"19.802439185626753\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"11.421379363065142\" y1=\"13.271734841028543\" x2=\"5.47622075924599\" y2=\"7.918689990157677\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"19.83158392310498\" y1=\"7.161363558934987\" x2=\"16.57769077849857\" y2=\"-0.14700010220581916\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"29.999999999999996\" y1=\"5\" x2=\"29.999999999999993\" y2=\"-3\">\n                                </line>\n                            </g>\n                        </g>\n                    </g>\n                </svg>\n            </div>\n        </div>\n        <div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct line-height-125rel text-center\">\n            <span class=\"rioglyph rioglyph-ok text-size-16 text-color-success undefined\">\n            </span>\n        </div>\n    </div>\n    <div class=\"line-height-125rel\">\n        <div class=\"text-size-18 text-color-darker\">Initial Step</div>\n        <div class=\"text-color-gray\">Lorem ipsum dolor sit amet</div>\n    </div>\n</div>\n<hr>\n<div class=\"display-flex align-items-center gap-10\">\n    <div class=\"height-60 aspect-ratio-1 position-relative\">\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: 60px; max-width: 60px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" style=\"width: 100%; height: 100%;\">\n                    <title>\n                    </title>\n                    <desc>\n                    </desc>\n                    <defs>\n                        <clipPath id=\"recharts33-clip\">\n                            <rect x=\"5\" y=\"5\" height=\"50\" width=\"50\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-area\">\n                        <g class=\"recharts-layer recharts-radial-bar-background\">\n                            <path cx=\"30\" cy=\"30\" color=\"brand-success\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 30,8\n    A 22,22,0,\n    1,1,\n    29.99961602756458,8.000000003350792\n  L 29.99968584073466,12.000000002741558\n            A 18,18,0,\n            1,0,\n            30,12 Z\" role=\"img\">\n                            </path>\n                        </g>\n                        <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                            <g class=\"recharts-layer\">\n                                <path cx=\"30\" cy=\"30\" color=\"brand-success\" fill=\"#5cb85c \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 30,10.100251257867601\n    A2,2,0,0,1,32.2,8.110276383654362\n    A22,22,0,1,1,12.142943266424503,42.850117696498586\n    A2,2,0,0,1,12.766312060385914,39.9498743710662\n  L12.766312060385914,39.9498743710662\n      A2,2,0,0,1,15.389680854347322,40.513732660771566\n      A18,18,0,1,0,31.8,12.09022613208084\n      A2,2,0,0,1,30,10.100251257867601Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                        <path cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M30,5L40.16841607689501,7.16136355893498L48.57862063693486,13.271734841028543L53.77641290737884,22.27457514062631L54.86304738420684,32.61321158169134L51.65063509461097,42.5L44.69463130731184,50.22542485937368L35.197792270444,54.453690018345135L24.802207729556017,54.45369001834514L15.305368692688175,50.22542485937369L8.34936490538903,42.5L5.136952615793167,32.613211581691324L6.223587092621155,22.27457514062633L11.421379363065142,13.271734841028543L19.83158392310498,7.161363558934987L29.999999999999996,5L30,5Z\">\n                        </path>\n                        <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"30\" y1=\"5\" x2=\"30.000000000000004\" y2=\"-3\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"40.16841607689501\" y1=\"7.16136355893498\" x2=\"43.42230922150141\" y2=\"-0.14700010220582982\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"48.57862063693486\" y1=\"13.271734841028543\" x2=\"54.52377924075401\" y2=\"7.918689990157677\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"53.77641290737884\" y1=\"22.27457514062631\" x2=\"61.38486503774007\" y2=\"19.80243918562673\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"54.86304738420684\" y1=\"32.61321158169134\" x2=\"62.81922254715302\" y2=\"33.44943928783256\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"51.65063509461097\" y1=\"42.5\" x2=\"58.578838324886476\" y2=\"46.49999999999999\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"44.69463130731184\" y1=\"50.22542485937368\" x2=\"49.396913325651624\" y2=\"56.69756081437326\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"35.197792270444\" y1=\"54.453690018345135\" x2=\"36.861085796986075\" y2=\"62.27887082421558\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"24.802207729556017\" y1=\"54.45369001834514\" x2=\"23.13891420301394\" y2=\"62.27887082421559\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"15.305368692688175\" y1=\"50.22542485937369\" x2=\"10.60308667434839\" y2=\"56.69756081437326\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"8.34936490538903\" y1=\"42.5\" x2=\"1.4211616751135239\" y2=\"46.5\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"5.136952615793167\" y1=\"32.613211581691324\" x2=\"-2.819222547153025\" y2=\"33.44943928783255\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"6.223587092621155\" y1=\"22.27457514062633\" x2=\"-1.3848650377400737\" y2=\"19.802439185626753\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"11.421379363065142\" y1=\"13.271734841028543\" x2=\"5.47622075924599\" y2=\"7.918689990157677\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"19.83158392310498\" y1=\"7.161363558934987\" x2=\"16.57769077849857\" y2=\"-0.14700010220581916\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"29.999999999999996\" y1=\"5\" x2=\"29.999999999999993\" y2=\"-3\">\n                                </line>\n                            </g>\n                        </g>\n                    </g>\n                </svg>\n            </div>\n        </div>\n        <div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct line-height-125rel text-center\">\n            <span class=\"rioglyph rioglyph-ok text-size-16 text-color-success undefined\">\n            </span>\n        </div>\n    </div>\n    <div class=\"line-height-125rel\">\n        <div class=\"text-size-18 text-color-darker\">Second Step</div>\n        <div class=\"text-color-gray\">Lorem ipsum dolor sit amet</div>\n    </div>\n</div>\n<hr>\n<div class=\"display-flex align-items-center gap-10\">\n    <div class=\"height-60 aspect-ratio-1 position-relative\">\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: 60px; max-width: 60px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" style=\"width: 100%; height: 100%;\">\n                    <title>\n                    </title>\n                    <desc>\n                    </desc>\n                    <defs>\n                        <clipPath id=\"recharts35-clip\">\n                            <rect x=\"5\" y=\"5\" height=\"50\" width=\"50\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-area\">\n                        <g class=\"recharts-layer recharts-radial-bar-background\">\n                            <path cx=\"30\" cy=\"30\" color=\"brand-success\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 30,8\n    A 22,22,0,\n    1,1,\n    29.99961602756458,8.000000003350792\n  L 29.99968584073466,12.000000002741558\n            A 18,18,0,\n            1,0,\n            30,12 Z\" role=\"img\">\n                            </path>\n                        </g>\n                        <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                            <g class=\"recharts-layer\">\n                                <path cx=\"30\" cy=\"30\" color=\"brand-success\" fill=\"#5cb85c \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 30,8\n    A 22,22,0,\n    1,1,\n    29.99961602756458,8.000000003350792\n  L 29.99968584073466,12.000000002741558\n            A 18,18,0,\n            1,0,\n            30,12 Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                        <path cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M30,5L40.16841607689501,7.16136355893498L48.57862063693486,13.271734841028543L53.77641290737884,22.27457514062631L54.86304738420684,32.61321158169134L51.65063509461097,42.5L44.69463130731184,50.22542485937368L35.197792270444,54.453690018345135L24.802207729556017,54.45369001834514L15.305368692688175,50.22542485937369L8.34936490538903,42.5L5.136952615793167,32.613211581691324L6.223587092621155,22.27457514062633L11.421379363065142,13.271734841028543L19.83158392310498,7.161363558934987L29.999999999999996,5L30,5Z\">\n                        </path>\n                        <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"30\" y1=\"5\" x2=\"30.000000000000004\" y2=\"-3\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"40.16841607689501\" y1=\"7.16136355893498\" x2=\"43.42230922150141\" y2=\"-0.14700010220582982\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"48.57862063693486\" y1=\"13.271734841028543\" x2=\"54.52377924075401\" y2=\"7.918689990157677\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"53.77641290737884\" y1=\"22.27457514062631\" x2=\"61.38486503774007\" y2=\"19.80243918562673\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"54.86304738420684\" y1=\"32.61321158169134\" x2=\"62.81922254715302\" y2=\"33.44943928783256\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"51.65063509461097\" y1=\"42.5\" x2=\"58.578838324886476\" y2=\"46.49999999999999\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"44.69463130731184\" y1=\"50.22542485937368\" x2=\"49.396913325651624\" y2=\"56.69756081437326\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"35.197792270444\" y1=\"54.453690018345135\" x2=\"36.861085796986075\" y2=\"62.27887082421558\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"24.802207729556017\" y1=\"54.45369001834514\" x2=\"23.13891420301394\" y2=\"62.27887082421559\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"15.305368692688175\" y1=\"50.22542485937369\" x2=\"10.60308667434839\" y2=\"56.69756081437326\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"8.34936490538903\" y1=\"42.5\" x2=\"1.4211616751135239\" y2=\"46.5\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"5.136952615793167\" y1=\"32.613211581691324\" x2=\"-2.819222547153025\" y2=\"33.44943928783255\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"6.223587092621155\" y1=\"22.27457514062633\" x2=\"-1.3848650377400737\" y2=\"19.802439185626753\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"11.421379363065142\" y1=\"13.271734841028543\" x2=\"5.47622075924599\" y2=\"7.918689990157677\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"19.83158392310498\" y1=\"7.161363558934987\" x2=\"16.57769077849857\" y2=\"-0.14700010220581916\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"30\" cy=\"30\" orientation=\"outer\" radius=\"25\" fill=\"none\" x1=\"29.999999999999996\" y1=\"5\" x2=\"29.999999999999993\" y2=\"-3\">\n                                </line>\n                            </g>\n                        </g>\n                    </g>\n                </svg>\n            </div>\n        </div>\n        <div class=\"position-absolute top-50pct left-50pct translate-x-50pct-y-50pct line-height-125rel text-center\">\n            <span class=\"rioglyph rioglyph-ok text-size-16 text-color-success undefined\">\n            </span>\n        </div>\n    </div>\n    <div class=\"line-height-125rel\">\n        <div class=\"text-size-18 text-color-darker\">Final Step</div>\n        <div class=\"text-color-gray\">Lorem ipsum dolor sit amet</div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "RadialBarChart",
+                  "rows": [
+                    {
+                      "name": "width",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The width of chart container."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The height of chart container."
+                    },
+                    {
+                      "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 RadialBar."
+                    },
+                    {
+                      "name": "startAngle",
+                      "type": "Number",
+                      "default": "180",
+                      "description": "The start angle of all the bars."
+                    },
+                    {
+                      "name": "endAngle",
+                      "type": "Number",
+                      "default": "180",
+                      "description": "The end angle of all the bars."
+                    },
+                    {
+                      "name": "innerRadius",
+                      "type": "String | Number",
+                      "default": "30%",
+                      "description": "The innerRadius of the radial bar which is most close to the center. 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": "100%",
+                      "description": "The outerRadius of the radial bar which is most far away from the center. 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": "clockWise",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Set to \"true\" if the bars should go clockwise."
+                    },
+                    {
+                      "name": "cornerRadius",
+                      "type": "Number",
+                      "default": "30",
+                      "description": "Set the corner radius for the individual bars."
+                    },
+                    {
+                      "name": "showBarLabel",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Renders a label on top of the bars."
+                    },
+                    {
+                      "name": "background",
+                      "type": "Boolean | Function",
+                      "default": "true",
+                      "description": "If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background."
+                    },
+                    {
+                      "name": "range",
+                      "type": "Array",
+                      "default": "",
+                      "description": "Defines the min and max value for the bar."
+                    },
+                    {
+                      "name": "radialBarOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar"
+                    },
+                    {
+                      "name": "textOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text"
+                    },
+                    {
+                      "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 RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart"
+                    }
+                  ]
+                },
+                {
+                  "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 7",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>RadialBarChart with changing data</label><div class=\"display-flex gap-25 margin-bottom-15\"><div class=\"panel panel-default panel-body margin-bottom-0 height-150 aspect-ratio-1 position-relative\"><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: 118px; max-width: 118px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"118\" height=\"118\" viewBox=\"0 0 118 118\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts37-clip\"><rect x=\"5\" y=\"5\" height=\"108\" width=\"108\"></rect></clipPath></defs><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer recharts-radial-bar-background\"><path cx=\"59\" cy=\"59\" color=\"brand-danger\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 59,10.340000000000003\n    A 48.66,48.66,0,\n    1,1,\n    58.99915072278603,10.340000007411348\n  L 58.99925544254114,16.34000000649749\n            A 42.66,42.66,0,\n            1,0,\n            59,16.340000000000003 Z\" role=\"img\"></path></g><g class=\"recharts-layer recharts-radial-bar-sectors\"><g class=\"recharts-layer\"></g></g></g><g class=\"recharts-layer recharts-polar-angle-axis angleAxis\"><path cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M59,5L90.74040362379355,15.313082303752836L110.3570518799383,42.313082303752836L110.3570518799383,75.68691769624716L90.74040362379355,102.68691769624716L59,113L27.259596376206456,102.68691769624716L7.64294812006171,75.68691769624716L7.642948120061703,42.31308230375285L27.259596376206446,15.313082303752843L58.99999999999999,5L59,5Z\"></path><g class=\"recharts-layer recharts-polar-angle-axis-ticks\"><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"59\" y1=\"5\" x2=\"59.00000000000001\" y2=\"-3\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"90.74040362379355\" y1=\"15.313082303752836\" x2=\"95.44268564213334\" y2=\"8.840946348753256\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"110.3570518799383\" y1=\"42.313082303752836\" x2=\"117.96550401029953\" y2=\"39.84094634875326\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"110.3570518799383\" y1=\"75.68691769624716\" x2=\"117.96550401029953\" y2=\"78.15905365124675\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"90.74040362379355\" y1=\"102.68691769624716\" x2=\"95.44268564213334\" y2=\"109.15905365124675\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"59\" y1=\"113\" x2=\"59.00000000000001\" y2=\"121\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"27.259596376206456\" y1=\"102.68691769624716\" x2=\"22.557314357866673\" y2=\"109.15905365124675\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"7.64294812006171\" y1=\"75.68691769624716\" x2=\"0.03449598970048129\" y2=\"78.15905365124675\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"7.642948120061703\" y1=\"42.31308230375285\" x2=\"0.03449598970047418\" y2=\"39.84094634875326\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"27.259596376206446\" y1=\"15.313082303752843\" x2=\"22.55731435786666\" y2=\"8.840946348753263\"></line></g><g class=\"recharts-layer recharts-polar-angle-axis-tick\"><line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"58.99999999999999\" y1=\"5\" x2=\"58.999999999999986\" y2=\"-3\"></line></g></g></g><text x=\"60\" y=\"62\" text-anchor=\"middle\" dominant-baseline=\"middle\" class=\"radialbarchart-text\" style=\"font-size: 180%; font-weight: normal; fill: rgb(226, 40, 55);\">1%</text></svg></div></div></div></div><button class=\"btn btn-default\" type=\"button\">Start</button></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState, useLayoutEffect } from 'react';\n\nimport RadialBarChart, { type RadialBarChartDataType } from '@rio-cloud/rio-uikit/RadialBarChart';\n\ntype CustomDataType = RadialBarChartDataType & {\n    value: number;\n};\n\nconst initialData: CustomDataType = {\n    value: 1,\n    color: 'brand-danger',\n};\n\nconst delay = 100;\n\nexport default () => {\n    const [data, setData] = useState(initialData);\n    const [isIncrement, setIsIncrement] = useState(true);\n    const [run, setRun] = useState(false);\n\n    const getColor = (value: number) => {\n        if (value <= 25) {\n            return 'brand-danger';\n        }\n        if (value <= 50) {\n            return 'brand-warning';\n        }\n        if (value <= 100) {\n            return 'brand-success';\n        }\n    };\n\n    useLayoutEffect(() => {\n        if (!run) {\n            return;\n        }\n\n        const tick = () => {\n            if (data.value === 1) {\n                setIsIncrement(true);\n            } else if (data.value === 99) {\n                setIsIncrement(false);\n            }\n\n            const newValue = isIncrement ? data.value + 1 : data.value - 1;\n\n            setData({\n                value: newValue,\n                color: getColor(newValue),\n            });\n        };\n\n        const id = setTimeout(tick, delay);\n\n        return () => {\n            id && clearTimeout(id);\n        };\n    }, [data, delay, run]);\n\n    const panelClasses = 'panel panel-default panel-body margin-bottom-0 height-150 aspect-ratio-1 position-relative';\n\n    return (\n        <>\n            <label>RadialBarChart with changing data</label>\n            <div className='display-flex gap-25 margin-bottom-15'>\n                <div className={panelClasses}>\n                    <RadialBarChart\n                        data={[data]}\n                        dataKey='value'\n                        startAngle={90}\n                        endAngle={-270}\n                        innerRadius='85%'\n                        legend={false}\n                        range={[0, 100]}\n                        textOptions={{\n                            x: 60,\n                            y: 62,\n                            text: `${data.value}%`,\n                            size: '180%',\n                            color: data.color,\n                        }}\n                    />\n                </div>\n            </div>\n            <button className='btn btn-default' type='button' onClick={() => setRun(!run)}>\n                {run ? 'Stop' : 'Start'}\n            </button>\n        </>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>RadialBarChart with changing data</label>\n<div class=\"display-flex gap-25 margin-bottom-15\">\n    <div class=\"panel panel-default panel-body margin-bottom-0 height-150 aspect-ratio-1 position-relative\">\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: 118px; max-width: 118px;\">\n                <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"118\" height=\"118\" viewBox=\"0 0 118 118\" style=\"width: 100%; height: 100%;\">\n                    <title>\n                    </title>\n                    <desc>\n                    </desc>\n                    <defs>\n                        <clipPath id=\"recharts37-clip\">\n                            <rect x=\"5\" y=\"5\" height=\"108\" width=\"108\">\n                            </rect>\n                        </clipPath>\n                    </defs>\n                    <g class=\"recharts-layer recharts-area\">\n                        <g class=\"recharts-layer recharts-radial-bar-background\">\n                            <path cx=\"59\" cy=\"59\" color=\"brand-danger\" fill=\"#eee\" class=\"recharts-sector recharts-radial-bar-background-sector\" d=\"M 59,10.340000000000003\n    A 48.66,48.66,0,\n    1,1,\n    58.99915072278603,10.340000007411348\n  L 58.99925544254114,16.34000000649749\n            A 42.66,42.66,0,\n            1,0,\n            59,16.340000000000003 Z\" role=\"img\">\n                            </path>\n                        </g>\n                        <g class=\"recharts-layer recharts-radial-bar-sectors\">\n                            <g class=\"recharts-layer\">\n                                <path cx=\"59\" cy=\"59\" color=\"brand-danger\" fill=\"#e22837 \" class=\"recharts-sector recharts-radial-bar-sector undefined\" d=\"M 59,10.340000000000003\n    A 48.66,48.66,0,\n    0,1,\n    62.055386680296394,10.436019394680308\n  L 61.67864356312052,16.42417976524994\n            A 42.66,42.66,0,\n            0,0,\n            59,16.340000000000003 Z\" role=\"img\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer recharts-polar-angle-axis angleAxis\">\n                        <path cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" class=\"recharts-polygon angleAxis\" d=\"M59,5L90.74040362379355,15.313082303752836L110.3570518799383,42.313082303752836L110.3570518799383,75.68691769624716L90.74040362379355,102.68691769624716L59,113L27.259596376206456,102.68691769624716L7.64294812006171,75.68691769624716L7.642948120061703,42.31308230375285L27.259596376206446,15.313082303752843L58.99999999999999,5L59,5Z\">\n                        </path>\n                        <g class=\"recharts-layer recharts-polar-angle-axis-ticks\">\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"59\" y1=\"5\" x2=\"59.00000000000001\" y2=\"-3\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"90.74040362379355\" y1=\"15.313082303752836\" x2=\"95.44268564213334\" y2=\"8.840946348753256\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"110.3570518799383\" y1=\"42.313082303752836\" x2=\"117.96550401029953\" y2=\"39.84094634875326\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"110.3570518799383\" y1=\"75.68691769624716\" x2=\"117.96550401029953\" y2=\"78.15905365124675\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"90.74040362379355\" y1=\"102.68691769624716\" x2=\"95.44268564213334\" y2=\"109.15905365124675\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"59\" y1=\"113\" x2=\"59.00000000000001\" y2=\"121\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"27.259596376206456\" y1=\"102.68691769624716\" x2=\"22.557314357866673\" y2=\"109.15905365124675\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"7.64294812006171\" y1=\"75.68691769624716\" x2=\"0.03449598970048129\" y2=\"78.15905365124675\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"7.642948120061703\" y1=\"42.31308230375285\" x2=\"0.03449598970047418\" y2=\"39.84094634875326\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"27.259596376206446\" y1=\"15.313082303752843\" x2=\"22.55731435786666\" y2=\"8.840946348753263\">\n                                </line>\n                            </g>\n                            <g class=\"recharts-layer recharts-polar-angle-axis-tick\">\n                                <line class=\"angleAxis\" cx=\"59\" cy=\"59\" orientation=\"outer\" radius=\"54\" fill=\"none\" x1=\"58.99999999999999\" y1=\"5\" x2=\"58.999999999999986\" y2=\"-3\">\n                                </line>\n                            </g>\n                        </g>\n                    </g>\n                    <text x=\"60\" y=\"62\" text-anchor=\"middle\" dominant-baseline=\"middle\" class=\"radialbarchart-text\" style=\"font-size: 180%; font-weight: normal; fill: rgb(226, 40, 55);\">1%</text>\n                </svg>\n            </div>\n        </div>\n    </div>\n</div>\n<button class=\"btn btn-default\" type=\"button\">Start</button>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "RadialBarChart",
+                  "rows": [
+                    {
+                      "name": "width",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The width of chart container."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The height of chart container."
+                    },
+                    {
+                      "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 RadialBar."
+                    },
+                    {
+                      "name": "startAngle",
+                      "type": "Number",
+                      "default": "180",
+                      "description": "The start angle of all the bars."
+                    },
+                    {
+                      "name": "endAngle",
+                      "type": "Number",
+                      "default": "180",
+                      "description": "The end angle of all the bars."
+                    },
+                    {
+                      "name": "innerRadius",
+                      "type": "String | Number",
+                      "default": "30%",
+                      "description": "The innerRadius of the radial bar which is most close to the center. 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": "100%",
+                      "description": "The outerRadius of the radial bar which is most far away from the center. 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": "clockWise",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Set to \"true\" if the bars should go clockwise."
+                    },
+                    {
+                      "name": "cornerRadius",
+                      "type": "Number",
+                      "default": "30",
+                      "description": "Set the corner radius for the individual bars."
+                    },
+                    {
+                      "name": "showBarLabel",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Renders a label on top of the bars."
+                    },
+                    {
+                      "name": "background",
+                      "type": "Boolean | Function",
+                      "default": "true",
+                      "description": "If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background."
+                    },
+                    {
+                      "name": "range",
+                      "type": "Array",
+                      "default": "",
+                      "description": "Defines the min and max value for the bar."
+                    },
+                    {
+                      "name": "radialBarOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar"
+                    },
+                    {
+                      "name": "textOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text"
+                    },
+                    {
+                      "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 RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart"
+                    }
+                  ]
+                },
+                {
+                  "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": []
+}