@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/radialBarCharts.md

@@ -0,0 +1,3663 @@
+# RadialBarChart
+
+*Category:* Components
+*Section:* Charts
+*Source:* https://uikit.developers.rio.cloud/#components/radialBarCharts
+*Captured:* 2025-12-12T12:39:28.455Z
+
+## RadialBarChart
+
+> Note: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.
+
+### Example: Example 1
+
+Multiple RadialBarChart barsAge 18-24
+Age 25-29
+Age 30-34
+Age 35-39
+
+67%Registrations
+56%Logins
+
+#### Summary
+
+Multiple RadialBarChart barsAge 18-24
+Age 25-29
+Age 30-34
+Age 35-39
+
+67%Registrations
+56%Logins
+
+#### React (tsx)
+
+```tsx
+import RadialBarChart from '@rio-cloud/rio-uikit/RadialBarChart';
+import Legend, { type LegendPayload } from '@rio-cloud/rio-uikit/Legend';
+
+type CustomData = {
+    name: string;
+    uv: number;
+    pv: number;
+    color?: string;
+};
+
+type CustomData2 = {
+    name: string;
+    value: number;
+    color?: string;
+};
+
+export default () => {
+    return (
+        <>
+            <label>Multiple RadialBarChart bars</label>
+            <div className='display-flex flex-wrap gap-15'>
+                <div className='panel panel-default panel-body height-300 aspect-ratio-1'>
+                    <RadialBarChart
+                        cx={120}
+                        cy={180}
+                        data={data}
+                        dataKey='uv'
+                        cornerRadius={0}
+                        showBarLabel
+                        tooltip
+                        legend={<Legend layout='horizontal' verticalAlign='bottom' align='center' />}
+                    />
+                </div>
+                <div className='panel panel-default panel-body height-300 aspect-ratio-1'>
+                    <RadialBarChart
+                        data={data2}
+                        dataKey='value'
+                        startAngle={90}
+                        endAngle={-270}
+                        innerRadius='80%'
+                        range={[0, 100]}
+                        legend={
+                            <Legend
+                                layout='vertical'
+                                verticalAlign='middle'
+                                align='center'
+                                formatter={(label: string | number, entry: LegendPayload) => (
+                                    <span className='text-color-darker'>
+                                        <span className='text-medium margin-right-5'>{`${entry.payload?.value}%`}</span>
+                                        <span>{label}</span>
+                                    </span>
+                                )}
+                            />
+                        }
+                    />
+                </div>
+            </div>
+        </>
+    );
+};
+
+const data: CustomData[] = [
+    {
+        name: 'Age 18-24',
+        uv: 31.47,
+        pv: 2400,
+    },
+    {
+        name: 'Age 25-29',
+        uv: 26.69,
+        pv: 4567,
+    },
+    {
+        name: 'Age 30-34',
+        uv: -15.69,
+        pv: 1398,
+    },
+    {
+        name: 'Age 35-39',
+        uv: 8.22,
+        pv: 9800,
+        color: 'color-warmup-corn',
+    },
+];
+
+const data2: CustomData2[] = [
+    { name: 'Registrations', value: 67, color: 'color-coldplay-fountain' },
+    { name: 'Logins', value: 56, color: 'color-coldplay-moos' },
+];
+```
+
+#### HTML (html)
+
+```html
+<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: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="268" height="268" class="recharts-wrapper" style="position: relative; cursor: default; width: 268px; height: 268px;">
+                    <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 aria-label="[object Object] legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                                    <title>
+                                    </title>
+                                    <desc>
+                                    </desc>
+                                    <path fill="#ef7186 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                    </path>
+                                </svg>
+                                <span class="recharts-legend-item-text" style="color: rgb(239, 113, 134);">
+                                    <span class="text-color-darker">Age 18-24</span>
+                                </span>
+                            </li>
+                            <li class="recharts-legend-item legend-item-1" style="display: inline-block; margin-right: 10px;">
+                                <svg aria-label="[object Object] legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                                    <title>
+                                    </title>
+                                    <desc>
+                                    </desc>
+                                    <path fill="#e878b6 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                    </path>
+                                </svg>
+                                <span class="recharts-legend-item-text" style="color: rgb(232, 120, 182);">
+                                    <span class="text-color-darker">Age 25-29</span>
+                                </span>
+                            </li>
+                            <li class="recharts-legend-item legend-item-2" style="display: inline-block; margin-right: 10px;">
+                                <svg aria-label="[object Object] legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                                    <title>
+                                    </title>
+                                    <desc>
+                                    </desc>
+                                    <path fill="#dc82e9 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                    </path>
+                                </svg>
+                                <span class="recharts-legend-item-text" style="color: rgb(220, 130, 233);">
+                                    <span class="text-color-darker">Age 30-34</span>
+                                </span>
+                            </li>
+                            <li class="recharts-legend-item legend-item-3" style="display: inline-block; margin-right: 10px;">
+                                <svg aria-label="[object Object] legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                                    <title>
+                                    </title>
+                                    <desc>
+                                    </desc>
+                                    <path fill="#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">Age 35-39</span>
+                                </span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
+                        <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
+                            <p class="recharts-tooltip-label" style="margin: 0px;">
+                            </p>
+                        </div>
+                    </div>
+                    <svg cx="120" cy="180" role="application" tabindex="0" class="recharts-surface" width="268" height="268" viewBox="0 0 268 268" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:r1:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:r2:">
+                            <path name="Age 18-24" cx="120" cy="180" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 79.7425,180
+    A 40.2575,40.2575,0,
+    0,1,
+    160.2575,180
+  L 148.2575,180
+            A 28.2575,28.2575,0,
+            0,0,
+            91.7425,180 Z">
+                            </path>
+                            <path name="Age 25-29" cx="120" cy="180" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 64.1675,180
+    A 55.832499999999996,55.832499999999996,0,
+    0,1,
+    175.83249999999998,180
+  L 163.83249999999998,180
+            A 43.832499999999996,43.832499999999996,0,
+            0,0,
+            76.1675,180 Z">
+                            </path>
+                            <path name="Age 30-34" cx="120" cy="180" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 48.5925,180
+    A 71.4075,71.4075,0,
+    0,1,
+    191.4075,180
+  L 179.4075,180
+            A 59.40749999999999,59.40749999999999,0,
+            0,0,
+            60.59250000000001,180 Z">
+                            </path>
+                            <path name="Age 35-39" color="color-warmup-corn" cx="120" cy="180" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 33.0175,180
+    A 86.9825,86.9825,0,
+    0,1,
+    206.98250000000002,180
+  L 194.98250000000002,180
+            A 74.9825,74.9825,0,
+            0,0,
+            45.0175,180 Z">
+                            </path>
+                        </g>
+                        <defs>
+                            <clipPath id="recharts1-clip">
+                                <rect x="5" y="5" height="178" width="258">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <g tabindex="-1" id="recharts-zindex-100-:r4:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:r5:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r6:">
+                            <g class="recharts-layer recharts-area">
+                                <g class="recharts-layer recharts-radial-bar-background">
+                                </g>
+                                <g class="recharts-layer recharts-radial-bar-sectors">
+                                    <g class="recharts-layer">
+                                        <path name="Age 18-24" cx="120" cy="180" fill="#ef7186 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 99.80161559729078,145.17627857665997
+    A 40.2575,40.2575,0,
+    0,1,
+    117.45416296773377,139.8230785144613
+  L 118.21302887811555,151.7990595820006
+            A 28.2575,28.2575,0,
+            0,0,
+            105.82237229685012,155.55657186561433 Z">
+                                        </path>
+                                        <path name="Age 25-29" cx="120" cy="180" fill="#e878b6 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 91.9871751309877,131.70352291203793
+    A 55.832499999999996,55.832499999999996,0,
+    0,1,
+    112.56833901183175,124.66431105329096
+  L 114.16561536266718,136.5575321585703
+            A 43.832499999999996,43.832499999999996,0,
+            0,0,
+            98.00793183054705,142.08381620099232 Z">
+                                        </path>
+                                        <path name="Age 30-34" cx="120" cy="180" fill="#dc82e9 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 84.17273466468461,118.2307672474159
+    A 71.4075,71.4075,0,
+    0,0,
+    71.00837280502704,128.04952819233702
+  L 79.24139491530502,136.77978288115762
+            A 59.40749999999999,59.40749999999999,0,
+            0,1,
+            90.19349136424397,128.61106053637027 Z">
+                                        </path>
+                                        <path name="Age 35-39" color="color-warmup-corn" cx="120" cy="180" fill="#fde082 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 76.35829419838153,104.75801158279387
+    A 86.9825,86.9825,0,
+    0,1,
+    85.74007685507732,100.04868373595097
+  L 90.4665342199389,111.07867017194198
+            A 74.9825,74.9825,0,
+            0,0,
+            82.37905089794089,115.13830487174825 Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r7:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r8:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r9:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:ra:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:rb:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:rc:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:rd:">
+                        </g>
+                    </svg>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="panel panel-default panel-body height-300 aspect-ratio-1">
+        <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="268" height="268" class="recharts-wrapper" style="position: relative; cursor: default; width: 268px; height: 268px;">
+                    <div class="recharts-legend-wrapper" style="position: absolute; width: auto; height: auto; left: 75.3672px; top: 104px;">
+                        <ul class="recharts-default-legend" style="padding: 0px; margin: 0px; text-align: left;">
+                            <li class="recharts-legend-item legend-item-0" style="display: block; margin-right: 10px;">
+                                <svg aria-label="[object Object] legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                                    <title>
+                                    </title>
+                                    <desc>
+                                    </desc>
+                                    <path fill="#67abc5 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                    </path>
+                                </svg>
+                                <span class="recharts-legend-item-text" style="color: rgb(103, 171, 197);">
+                                    <span class="text-color-darker">
+                                        <span class="text-medium margin-right-5">67%</span>
+                                        <span>Registrations</span>
+                                    </span>
+                                </span>
+                            </li>
+                            <li class="recharts-legend-item legend-item-1" style="display: block; margin-right: 10px;">
+                                <svg aria-label="[object Object] legend icon" class="recharts-surface" width="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">
+                                        <span class="text-medium margin-right-5">56%</span>
+                                        <span>Logins</span>
+                                    </span>
+                                </span>
+                            </li>
+                        </ul>
+                    </div>
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="268" height="268" viewBox="0 0 268 268" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:re:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:rf:">
+                            <path name="Registrations" color="color-coldplay-fountain" cx="134" cy="134" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 134,19.50999999999999
+    A 114.49000000000001,114.49000000000001,0,
+    1,1,
+    133.9980017725395,19.510000017437818
+  L 133.99817630546468,29.510000015914727
+            A 104.49000000000001,104.49000000000001,0,
+            1,0,
+            134,29.50999999999999 Z">
+                            </path>
+                            <path name="Logins" color="color-coldplay-moos" cx="134" cy="134" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 134,6.609999999999999
+    A 127.39,127.39,0,
+    1,1,
+    133.997776625066,6.610000019402605
+  L 133.9979511579912,16.610000017879514
+            A 117.39,117.39,0,
+            1,0,
+            134,16.61 Z">
+                            </path>
+                        </g>
+                        <defs>
+                            <clipPath id="recharts2-clip">
+                                <rect x="5" y="5" height="258" width="258">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <g tabindex="-1" id="recharts-zindex-100-:rh:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:ri:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:rj:">
+                            <g class="recharts-layer recharts-area">
+                                <g class="recharts-layer recharts-radial-bar-background">
+                                </g>
+                                <g class="recharts-layer recharts-radial-bar-sectors">
+                                    <g class="recharts-layer">
+                                        <path name="Registrations" color="color-coldplay-fountain" cx="134" cy="134" fill="#67abc5 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 134,24.624225259886728
+    A5,5,0,0,1,139.2283313544616,19.62944150154746
+    A114.49000000000001,114.49000000000001,0,0,1,222.43762441547005,61.289982205006595
+    A5,5,0,0,1,221.5710824581418,68.4685906064174
+  L221.5710824581418,68.4685906064174
+      A5,5,0,0,1,214.71313979537484,67.64075675256476
+      A104.49000000000001,104.49000000000001,0,0,0,138.77166864553843,29.619009018225995
+      A5,5,0,0,1,134,24.624225259886728Z">
+                                        </path>
+                                        <path name="Logins" color="color-coldplay-moos" cx="134" cy="134" fill="#a1daa3 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 134,11.712175176757682
+    A5,5,0,0,1,139.20426505433448,6.71634934036409
+    A127.39,127.39,0,0,1,219.43426319407047,39.50556221403136
+    A5,5,0,0,1,219.64978406150834,46.71640136762811
+  L219.64978406150834,46.71640136762811
+      A5,5,0,0,1,212.7277506582301,46.92329027635718
+      A117.39,117.39,0,0,0,138.7957349456655,16.708001013151275
+      A5,5,0,0,1,134,11.712175176757682Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:rk:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:rl:">
+                            <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                <path cx="134" cy="134" orientation="outer" radius="129" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" 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.636807725631797L134,5Z">
+                                </path>
+                                <g class="recharts-layer recharts-polar-angle-axis-ticks">
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:rm:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:rn:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:ro:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:rp:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:rq:">
+                        </g>
+                    </svg>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: RadialBarChart
+
+### RadialBarChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the RadialBar. |
+| startAngle | Number | 180 | The start angle of all the bars. |
+| endAngle | Number | 180 | The end angle of all the bars. |
+| innerRadius | String \| Number | 30% | 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. |
+| outerRadius | String \| Number | 100% | 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. |
+| clockWise | Boolean | true | Set to "true" if the bars should go clockwise. |
+| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |
+| showBarLabel | Boolean | false | Renders a label on top of the bars. |
+| background | Boolean \| Function | true | 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. |
+| range | Array | — | Defines the min and max value for the bar. |
+| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |
+| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |
+| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | <Legend /> | Shows the provided Legend component otherwise shows nothing. |
+| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |
+
+### Example: Example 2
+
+Circle RadialBarChart with built-in text82%
+
+82
+
+#### Summary
+
+Circle RadialBarChart with built-in text82%
+
+82
+
+#### React (tsx)
+
+```tsx
+import RadialBarChart from '@rio-cloud/rio-uikit/RadialBarChart';
+
+export default () => {
+    const panelClasses = 'panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative';
+    return (
+        <>
+            <label>Circle RadialBarChart with built-in text</label>
+            <div className='display-flex flex-wrap gap-25'>
+                <div className={panelClasses}>
+                    <RadialBarChart
+                        data={data}
+                        dataKey='value'
+                        startAngle={90}
+                        endAngle={-270}
+                        innerRadius='80%'
+                        legend={false}
+                        range={[0, 100]}
+                        textOptions={{
+                            x: 84,
+                            y: 88,
+                            text: '82%',
+                            size: '250%',
+                            color: 'brand-success',
+                        }}
+                    />
+                </div>
+                <div className={panelClasses}>
+                    <RadialBarChart
+                        data={data}
+                        dataKey='value'
+                        startAngle={210}
+                        endAngle={30}
+                        innerRadius='90%'
+                        legend={false}
+                        range={[0, 100]}
+                        textOptions={{
+                            x: 84,
+                            y: 88,
+                            text: '82',
+                            size: '400%',
+                            weight: '300',
+                            color: 'brand-success',
+                        }}
+                    />
+                </div>
+            </div>
+        </>
+    );
+};
+
+const data = [
+    {
+        name: 'Ranking',
+        value: 82,
+        color: 'brand-success',
+    },
+];
+```
+
+#### HTML (html)
+
+```html
+<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: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="168" height="168" class="recharts-wrapper" style="position: relative; cursor: default; width: 168px; height: 168px;">
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="168" height="168" viewBox="0 0 168 168" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:rr:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:rs:">
+                            <path name="Ranking" color="brand-success" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 84,7.219999999999999
+    A 76.78,76.78,0,
+    1,1,
+    83.9986599362004,7.2200000116942675
+  L 83.99886937571063,19.220000009866553
+            A 64.78,64.78,0,
+            1,0,
+            84,19.22 Z">
+                            </path>
+                        </g>
+                        <defs>
+                            <clipPath id="recharts3-clip">
+                                <rect x="5" y="5" height="158" width="158">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <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>
+                        <g tabindex="-1" id="recharts-zindex-100-:ru:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:rv:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r10:">
+                            <g class="recharts-layer recharts-area">
+                                <g class="recharts-layer recharts-radial-bar-background">
+                                </g>
+                                <g class="recharts-layer recharts-radial-bar-sectors">
+                                    <g class="recharts-layer">
+                                        <path name="Ranking" color="brand-success" cx="84" cy="84" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 84,13.47476763597301
+    A6,6,0,0,1,90.50861825374399,7.496364214326192
+    A76.78,76.78,0,1,1,7.24153393931222,82.18167989335137
+    A6,6,0,0,1,13.889908574363261,76.35909165813003
+  L13.889908574363261,76.35909165813003
+      A6,6,0,0,1,19.23816838484821,82.4658664169224
+      A64.78,64.78,0,1,0,89.491381746256,19.453171057619826
+      A6,6,0,0,1,84,13.47476763597301Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r11:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r12:">
+                            <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                <path cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" 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.08765744437916L84,5Z">
+                                </path>
+                                <g class="recharts-layer recharts-polar-angle-axis-ticks">
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r13:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:r14:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:r15:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:r16:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:r17:">
+                        </g>
+                    </svg>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div 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: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="168" height="168" class="recharts-wrapper" style="position: relative; cursor: default; width: 168px; height: 168px;">
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="168" height="168" viewBox="0 0 168 168" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:r18:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:r19:">
+                            <path name="Ranking" color="brand-success" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 19.195416250083042,121.41494387273622
+    A3,3,0,0,1,15.039337317652155,120.21158795760601
+    A77.89,77.89,0,0,1,149.8404864238354,42.38410823408022
+    A3,3,0,0,1,148.80458374991696,46.585056127263805
+  L148.80458374991696,46.585056127263805
+      A3,3,0,0,1,144.76868107599853,45.589851597740754
+      A71.89,71.89,0,0,0,20.351495182513965,117.42214736515979
+      A3,3,0,0,1,19.195416250083042,121.41494387273622Z">
+                            </path>
+                        </g>
+                        <defs>
+                            <clipPath id="recharts4-clip">
+                                <rect x="5" y="5" height="158" width="158">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <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>
+                        <g tabindex="-1" id="recharts-zindex-100-:r1b:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:r1c:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r1d:">
+                            <g class="recharts-layer recharts-area">
+                                <g class="recharts-layer recharts-radial-bar-background">
+                                </g>
+                                <g class="recharts-layer recharts-radial-bar-sectors">
+                                    <g class="recharts-layer">
+                                        <path name="Ranking" color="brand-success" cx="84" cy="84" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 19.195416250083042,121.41494387273622
+    A3,3,0,0,1,15.039337317652155,120.21158795760601
+    A77.89,77.89,0,0,1,105.22633622140984,9.05805746702542
+    A3,3,0,0,1,107.26017182833417,12.877032496412454
+  L107.26017182833417,12.877032496412454
+      A3,3,0,0,1,103.59123521578063,14.83096355507071
+      A71.89,71.89,0,0,0,20.351495182513965,117.42214736515979
+      A3,3,0,0,1,19.195416250083042,121.41494387273622Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r1e:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r1f:">
+                            <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                <path cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r1g:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:r1h:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:r1i:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:r1j:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:r1k:">
+                        </g>
+                    </svg>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: RadialBarChart
+
+### RadialBarChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the RadialBar. |
+| startAngle | Number | 180 | The start angle of all the bars. |
+| endAngle | Number | 180 | The end angle of all the bars. |
+| innerRadius | String \| Number | 30% | 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. |
+| outerRadius | String \| Number | 100% | 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. |
+| clockWise | Boolean | true | Set to "true" if the bars should go clockwise. |
+| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |
+| showBarLabel | Boolean | false | Renders a label on top of the bars. |
+| background | Boolean \| Function | true | 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. |
+| range | Array | — | Defines the min and max value for the bar. |
+| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |
+| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |
+| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | <Legend /> | Shows the provided Legend component otherwise shows nothing. |
+| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |
+
+### Example: Example 3
+
+Full circle RadialBarChart with custom text
+
+Fuel level
+24%
+
+Charge level
+38%
+
+Open RadialBarChart with custom text
+
+Lorem ipsum
+80
+
+Lorem ipsum dolor sit amet
+67
+
+#### Summary
+
+Full circle RadialBarChart with custom text
+
+Fuel level
+24%
+
+Charge level
+38%
+
+Open RadialBarChart with custom text
+
+Lorem ipsum
+80
+
+Lorem ipsum dolor sit amet
+67
+
+#### React (tsx)
+
+```tsx
+import RadialBarChart from '@rio-cloud/rio-uikit/RadialBarChart';
+
+export default () => {
+    const panelClasses = 'panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative';
+
+    const infoBlockClasses =
+        'position-absolute top-50pct left-50pct translate-x-50pct-y-50pct text-size-16 line-height-125rel';
+
+    return (
+        <>
+            <label>Full circle RadialBarChart with custom text</label>
+            <div className='display-flex flex-wrap gap-25'>
+                <div className={panelClasses}>
+                    <RadialBarChart
+                        data={[fuelLevel]}
+                        dataKey='value'
+                        startAngle={90}
+                        endAngle={-270}
+                        innerRadius='90%'
+                        legend={false}
+                        range={[0, 100]}
+                    />
+                    <div className={infoBlockClasses}>
+                        <div className='text-color-darker'>{fuelLevel.name}</div>
+                        <div className='text-color-darker text-size-200pct text-thin text-center'>
+                            {`${fuelLevel.value}%`}
+                        </div>
+                    </div>
+                </div>
+
+                <div className={panelClasses}>
+                    <RadialBarChart
+                        data={[chargeLevel]}
+                        dataKey='value'
+                        startAngle={90}
+                        endAngle={-270}
+                        innerRadius='90%'
+                        legend={false}
+                        range={[0, 100]}
+                    />
+                    <div className={infoBlockClasses}>
+                        <div className='text-color-darker'>{chargeLevel.name}</div>
+                        <div className='text-color-darker text-size-200pct text-thin text-center'>
+                            {`${chargeLevel.value}%`}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <label className='margin-top-15'>Open RadialBarChart with custom text</label>
+            <div className='display-flex flex-wrap gap-25'>
+                <div className={panelClasses}>
+                    <RadialBarChart
+                        data={[loremIpsum]}
+                        dataKey='value'
+                        startAngle={210}
+                        endAngle={-30}
+                        innerRadius='90%'
+                        legend={false}
+                        range={[0, 100]}
+                    />
+                    <div className={infoBlockClasses}>
+                        <div className='text-color-darker'>{loremIpsum.name}</div>
+                        <div className='text-color-darker text-size-200pct text-thin text-center'>
+                            {loremIpsum.value}
+                        </div>
+                    </div>
+                </div>
+
+                <div className={panelClasses}>
+                    <RadialBarChart
+                        data={[loremIpsum2]}
+                        dataKey='value'
+                        startAngle={240}
+                        endAngle={45}
+                        innerRadius='90%'
+                        legend={false}
+                        range={[0, 100]}
+                    />
+                    <div className={infoBlockClasses}>
+                        <div className='text-color-darker'>{loremIpsum2.name}</div>
+                        <div className='text-color-darker text-size-200pct text-thin text-center'>
+                            {loremIpsum2.value}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+const fuelLevel = {
+    name: 'Fuel level',
+    value: 24,
+    color: 'color-coldplay-fountain',
+};
+
+const chargeLevel = {
+    name: 'Charge level',
+    value: 38,
+    color: 'color-coldplay-fountain',
+};
+
+const loremIpsum = {
+    name: 'Lorem ipsum',
+    value: 80,
+    color: 'color-warmup-charm',
+};
+
+const loremIpsum2 = {
+    name: 'Lorem ipsum dolor sit amet',
+    value: 67,
+    color: 'color-coldplay-moos',
+};
+```
+
+#### HTML (html)
+
+```html
+<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: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="168" height="168" class="recharts-wrapper" style="position: relative; cursor: default; width: 168px; height: 168px;">
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="168" height="168" viewBox="0 0 168 168" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:r1l:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:r1m:">
+                            <path name="Fuel level" color="color-coldplay-fountain" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 84,6.109999999999999
+    A 77.89,77.89,0,
+    1,1,
+    83.9986405630457,6.11000001186332
+  L 83.99874528280081,12.110000010949477
+            A 71.89,71.89,0,
+            1,0,
+            84,12.11 Z">
+                            </path>
+                        </g>
+                        <defs>
+                            <clipPath id="recharts5-clip">
+                                <rect x="5" y="5" height="158" width="158">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <g tabindex="-1" id="recharts-zindex-100-:r1o:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:r1p:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r1q:">
+                            <g class="recharts-layer recharts-area">
+                                <g class="recharts-layer recharts-radial-bar-background">
+                                </g>
+                                <g class="recharts-layer recharts-radial-bar-sectors">
+                                    <g class="recharts-layer">
+                                        <path name="Fuel level" color="color-coldplay-fountain" cx="84" cy="84" fill="#67abc5 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 84,9.170112254527595
+    A3,3,0,0,1,87.1201762585125,6.172520276474231
+    A77.89,77.89,0,0,1,161.47798748199304,75.99915281109992
+    A3,3,0,0,1,158.68222805526864,79.30139247214157
+  L158.68222805526864,79.30139247214157
+      A3,3,0,0,1,155.50972551136834,76.6154717626136
+      A71.89,71.89,0,0,0,86.87982374148753,12.167704232580974
+      A3,3,0,0,1,84,9.170112254527595Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r1r:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r1s:">
+                            <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                <path cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" 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.08765744437916L84,5Z">
+                                </path>
+                                <g class="recharts-layer recharts-polar-angle-axis-ticks">
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r1t:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:r1u:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:r1v:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:r20:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:r21:">
+                        </g>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div class="position-absolute top-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: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="168" height="168" class="recharts-wrapper" style="position: relative; cursor: default; width: 168px; height: 168px;">
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="168" height="168" viewBox="0 0 168 168" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:r22:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:r23:">
+                            <path name="Charge level" color="color-coldplay-fountain" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 84,6.109999999999999
+    A 77.89,77.89,0,
+    1,1,
+    83.9986405630457,6.11000001186332
+  L 83.99874528280081,12.110000010949477
+            A 71.89,71.89,0,
+            1,0,
+            84,12.11 Z">
+                            </path>
+                        </g>
+                        <defs>
+                            <clipPath id="recharts6-clip">
+                                <rect x="5" y="5" height="158" width="158">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <g tabindex="-1" id="recharts-zindex-100-:r25:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:r26:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r27:">
+                            <g class="recharts-layer recharts-area">
+                                <g class="recharts-layer recharts-radial-bar-background">
+                                </g>
+                                <g class="recharts-layer recharts-radial-bar-sectors">
+                                    <g class="recharts-layer">
+                                        <path name="Charge level" color="color-coldplay-fountain" cx="84" cy="84" fill="#67abc5 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 84,9.170112254527595
+    A3,3,0,0,1,87.1201762585125,6.172520276474231
+    A77.89,77.89,0,0,1,139.55108661094397,138.5978834419742
+    A3,3,0,0,1,135.2245830931318,138.54864055991533
+  L135.2245830931318,138.54864055991533
+      A3,3,0,0,1,135.27189133984803,134.3921150422843
+      A71.89,71.89,0,0,0,86.87982374148753,12.167704232580974
+      A3,3,0,0,1,84,9.170112254527595Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r28:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r29:">
+                            <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                <path cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" 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.08765744437916L84,5Z">
+                                </path>
+                                <g class="recharts-layer recharts-polar-angle-axis-ticks">
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r2a:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:r2b:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:r2c:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:r2d:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:r2e:">
+                        </g>
+                    </svg>
+                </div>
+            </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: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="168" height="168" class="recharts-wrapper" style="position: relative; cursor: default; width: 168px; height: 168px;">
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="168" height="168" viewBox="0 0 168 168" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:r2f:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:r2g:">
+                            <path name="Lorem ipsum" color="color-warmup-charm" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 19.195416250083042,121.41494387273622
+    A3,3,0,0,1,15.039337317652155,120.21158795760601
+    A77.89,77.89,0,1,1,152.96066268234785,120.21158795760599
+    A3,3,0,0,1,148.80458374991696,121.41494387273619
+  L148.80458374991696,121.41494387273619
+      A3,3,0,0,1,147.64850481748604,117.42214736515977
+      A71.89,71.89,0,1,0,20.351495182513965,117.42214736515979
+      A3,3,0,0,1,19.195416250083042,121.41494387273622Z">
+                            </path>
+                        </g>
+                        <defs>
+                            <clipPath id="recharts7-clip">
+                                <rect x="5" y="5" height="158" width="158">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <g tabindex="-1" id="recharts-zindex-100-:r2i:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:r2j:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r2k:">
+                            <g class="recharts-layer recharts-area">
+                                <g class="recharts-layer recharts-radial-bar-background">
+                                </g>
+                                <g class="recharts-layer recharts-radial-bar-sectors">
+                                    <g class="recharts-layer">
+                                        <path name="Lorem ipsum" color="color-warmup-charm" cx="84" cy="84" fill="#c9778d " class="recharts-sector recharts-radial-bar-sector undefined" d="M 19.195416250083042,121.41494387273622
+    A3,3,0,0,1,15.039337317652155,120.21158795760601
+    A77.89,77.89,0,1,1,157.05414424856252,56.98252217341118
+    A3,3,0,0,1,155.16745235396638,60.87629299947942
+  L155.16745235396638,60.87629299947942
+      A3,3,0,0,1,151.42665849312056,59.06372472777673
+      A71.89,71.89,0,1,0,20.351495182513965,117.42214736515979
+      A3,3,0,0,1,19.195416250083042,121.41494387273622Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r2l:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r2m:">
+                            <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                <path cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r2n:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:r2o:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:r2p:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:r2q:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:r2r:">
+                        </g>
+                    </svg>
+                </div>
+            </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: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="168" height="168" class="recharts-wrapper" style="position: relative; cursor: default; width: 168px; height: 168px;">
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="168" height="168" viewBox="0 0 168 168" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:r2s:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:r2t:">
+                            <path name="Lorem ipsum dolor sit amet" color="color-coldplay-moos" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 46.58505612726376,148.80458374991693
+    A3,3,0,0,1,42.38410823408026,149.8404864238354
+    A77.89,77.89,0,1,1,136.82604088427215,26.76136353394495
+    A3,3,0,0,1,136.91272106025167,31.087278939748337
+  L136.91272106025167,31.087278939748337
+      A3,3,0,0,1,132.7567605491119,31.170553658432432
+      A71.89,71.89,0,1,0,45.58985159774078,144.76868107599853
+      A3,3,0,0,1,46.58505612726376,148.80458374991693Z">
+                            </path>
+                        </g>
+                        <defs>
+                            <clipPath id="recharts8-clip">
+                                <rect x="5" y="5" height="158" width="158">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <g tabindex="-1" id="recharts-zindex-100-:r2v:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:r30:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r31:">
+                            <g class="recharts-layer recharts-area">
+                                <g class="recharts-layer recharts-radial-bar-background">
+                                </g>
+                                <g class="recharts-layer recharts-radial-bar-sectors">
+                                    <g class="recharts-layer">
+                                        <path name="Lorem ipsum dolor sit amet" color="color-coldplay-moos" cx="84" cy="84" fill="#a1daa3 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 46.58505612726376,148.80458374991693
+    A3,3,0,0,1,42.38410823408026,149.8404864238354
+    A77.89,77.89,0,0,1,55.26888295022491,11.602658798322409
+    A3,3,0,0,1,59.20602300052397,13.397090679282528
+  L59.20602300052397,13.397090679282528
+      A3,3,0,0,1,57.48209006665386,17.179549891018084
+      A71.89,71.89,0,0,0,45.58985159774078,144.76868107599853
+      A3,3,0,0,1,46.58505612726376,148.80458374991693Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r32:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r33:">
+                            <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                <path cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r34:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:r35:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:r36:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:r37:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:r38:">
+                        </g>
+                    </svg>
+                </div>
+            </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>
+```
+
+#### Props: RadialBarChart
+
+### RadialBarChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the RadialBar. |
+| startAngle | Number | 180 | The start angle of all the bars. |
+| endAngle | Number | 180 | The end angle of all the bars. |
+| innerRadius | String \| Number | 30% | 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. |
+| outerRadius | String \| Number | 100% | 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. |
+| clockWise | Boolean | true | Set to "true" if the bars should go clockwise. |
+| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |
+| showBarLabel | Boolean | false | Renders a label on top of the bars. |
+| background | Boolean \| Function | true | 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. |
+| range | Array | — | Defines the min and max value for the bar. |
+| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |
+| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |
+| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | <Legend /> | Shows the provided Legend component otherwise shows nothing. |
+| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |
+
+### Example: Example 4
+
+Example for error visualizationMost reported problems
+
+43%
+
+App
+
+37%
+
+Website
+
+20%
+
+Server Connection
+
+#### Summary
+
+Example for error visualizationMost reported problems
+
+43%
+
+App
+
+37%
+
+Website
+
+20%
+
+Server Connection
+
+#### React (tsx)
+
+```tsx
+import RadialBarChart from '@rio-cloud/rio-uikit/RadialBarChart';
+
+export default () => {
+    return (
+        <>
+            <label>Example for error visualization</label>
+            <div className='panel panel-default panel-body shadow-default margin-bottom-0 height-auto'>
+                <div className='margin-bottom-15 text-color-darker text-medium text-size-16'>
+                    Most reported problems
+                </div>
+
+                <div className='display-flex flex-wrap gap-25'>
+                    {data.map(item => (
+                        <div key={item.name} className='display-flex flex-column justify-content-center'>
+                            <div className='position-relative width-100 aspect-ratio-1'>
+                                <RadialBarChart
+                                    data={[item]}
+                                    dataKey='value'
+                                    startAngle={270}
+                                    endAngle={-90}
+                                    innerRadius='90%'
+                                    legend={false}
+                                    range={[0, 100]}
+                                />
+                                <div className='position-absolute top-50pct left-50pct translate-x-50pct-y-50pct'>
+                                    <div className='text-color-darker text-size-20 text-medium text-center'>
+                                        {`${item.value}%`}
+                                    </div>
+                                </div>
+                            </div>
+                            <div className='text-center text-color-darker'>{item.name}</div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </>
+    );
+};
+
+const data = [
+    {
+        name: 'App',
+        value: 43,
+        color: 'brand-danger',
+    },
+    {
+        name: 'Website',
+        value: 37,
+        color: 'brand-danger',
+    },
+    {
+        name: 'Server Connection',
+        value: 20,
+        color: 'brand-danger',
+    },
+];
+```
+
+#### HTML (html)
+
+```html
+<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: 100px; min-height: 100px;">
+                    <div style="width: 0px; height: 0px; overflow: visible;">
+                        <div width="100" height="100" class="recharts-wrapper" style="position: relative; cursor: default; width: 100px; height: 100px;">
+                            <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="100" height="100" viewBox="0 0 100 100" style="width: 100%; height: 100%; display: block;">
+                                <title>
+                                </title>
+                                <desc>
+                                </desc>
+                                <g tabindex="-1" id="recharts-zindex--100-:r39:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex--50-:r3a:">
+                                    <path name="App" color="brand-danger" cx="50" cy="50" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 49.99999999999999,93.95
+    A 43.95,43.95,0,
+    1,1,
+    50.000767072206195,93.94999999330604
+  L 50.00071471232864,90.94999999376296
+            A 40.95,40.95,0,
+            1,0,
+            49.99999999999999,90.95 Z">
+                                    </path>
+                                </g>
+                                <defs>
+                                    <clipPath id="recharts9-clip">
+                                        <rect x="5" y="5" height="90" width="90">
+                                        </rect>
+                                    </clipPath>
+                                </defs>
+                                <g tabindex="-1" id="recharts-zindex-100-:r3c:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-200-:r3d:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-300-:r3e:">
+                                    <g class="recharts-layer recharts-area">
+                                        <g class="recharts-layer recharts-radial-bar-background">
+                                        </g>
+                                        <g class="recharts-layer recharts-radial-bar-sectors">
+                                            <g class="recharts-layer">
+                                                <path name="App" color="brand-danger" cx="50" cy="50" fill="#e22837 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 49.99999999999999,92.42348995544803
+    A1.5,1.5,0,0,1,48.44699646643109,93.92255320475715
+    A43.95,43.95,0,0,1,29.893486803000833,10.918922391278684
+    A1.5,1.5,0,0,1,31.93695650105136,11.614078628290173
+  L31.93695650105136,11.614078628290173
+      A1.5,1.5,0,0,1,31.265945041703848,13.58657273999686
+      A40.95,40.95,0,0,0,48.5530035335689,90.92442670613892
+      A1.5,1.5,0,0,1,49.99999999999999,92.42348995544803Z">
+                                                </path>
+                                            </g>
+                                        </g>
+                                    </g>
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-400-:r3f:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-500-:r3g:">
+                                    <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                        <path cx="50" cy="50" orientation="outer" radius="45" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" 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.40576474687263L49.99999999999999,95Z">
+                                        </path>
+                                        <g class="recharts-layer recharts-polar-angle-axis-ticks">
+                                            <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                                <line class="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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>
+                                    </g>
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-600-:r3h:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-1000-:r3i:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-1100-:r3j:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-1200-:r3k:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-2000-:r3l:">
+                                </g>
+                            </svg>
+                        </div>
+                    </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: 100px; min-height: 100px;">
+                    <div style="width: 0px; height: 0px; overflow: visible;">
+                        <div width="100" height="100" class="recharts-wrapper" style="position: relative; cursor: default; width: 100px; height: 100px;">
+                            <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="100" height="100" viewBox="0 0 100 100" style="width: 100%; height: 100%; display: block;">
+                                <title>
+                                </title>
+                                <desc>
+                                </desc>
+                                <g tabindex="-1" id="recharts-zindex--100-:r3m:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex--50-:r3n:">
+                                    <path name="Website" color="brand-danger" cx="50" cy="50" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 49.99999999999999,93.95
+    A 43.95,43.95,0,
+    1,1,
+    50.000767072206195,93.94999999330604
+  L 50.00071471232864,90.94999999376296
+            A 40.95,40.95,0,
+            1,0,
+            49.99999999999999,90.95 Z">
+                                    </path>
+                                </g>
+                                <defs>
+                                    <clipPath id="recharts10-clip">
+                                        <rect x="5" y="5" height="90" width="90">
+                                        </rect>
+                                    </clipPath>
+                                </defs>
+                                <g tabindex="-1" id="recharts-zindex-100-:r3p:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-200-:r3q:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-300-:r3r:">
+                                    <g class="recharts-layer recharts-area">
+                                        <g class="recharts-layer recharts-radial-bar-background">
+                                        </g>
+                                        <g class="recharts-layer recharts-radial-bar-sectors">
+                                            <g class="recharts-layer">
+                                                <path name="Website" color="brand-danger" cx="50" cy="50" fill="#e22837 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 49.99999999999999,92.42348995544803
+    A1.5,1.5,0,0,1,48.44699646643109,93.92255320475715
+    A43.95,43.95,0,0,1,16.91873260308263,21.06503417293098
+    A1.5,1.5,0,0,1,19.074606756751002,20.959122727603262
+  L19.074606756751002,20.959122727603262
+      A1.5,1.5,0,0,1,19.176839592633307,23.040117164539783
+      A40.95,40.95,0,0,0,48.5530035335689,90.92442670613892
+      A1.5,1.5,0,0,1,49.99999999999999,92.42348995544803Z">
+                                                </path>
+                                            </g>
+                                        </g>
+                                    </g>
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-400-:r3s:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-500-:r3t:">
+                                    <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                        <path cx="50" cy="50" orientation="outer" radius="45" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" 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.40576474687263L49.99999999999999,95Z">
+                                        </path>
+                                        <g class="recharts-layer recharts-polar-angle-axis-ticks">
+                                            <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                                <line class="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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>
+                                    </g>
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-600-:r3u:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-1000-:r3v:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-1100-:r40:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-1200-:r41:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-2000-:r42:">
+                                </g>
+                            </svg>
+                        </div>
+                    </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: 100px; min-height: 100px;">
+                    <div style="width: 0px; height: 0px; overflow: visible;">
+                        <div width="100" height="100" class="recharts-wrapper" style="position: relative; cursor: default; width: 100px; height: 100px;">
+                            <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="100" height="100" viewBox="0 0 100 100" style="width: 100%; height: 100%; display: block;">
+                                <title>
+                                </title>
+                                <desc>
+                                </desc>
+                                <g tabindex="-1" id="recharts-zindex--100-:r43:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex--50-:r44:">
+                                    <path name="Server Connection" color="brand-danger" cx="50" cy="50" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 49.99999999999999,93.95
+    A 43.95,43.95,0,
+    1,1,
+    50.000767072206195,93.94999999330604
+  L 50.00071471232864,90.94999999376296
+            A 40.95,40.95,0,
+            1,0,
+            49.99999999999999,90.95 Z">
+                                    </path>
+                                </g>
+                                <defs>
+                                    <clipPath id="recharts11-clip">
+                                        <rect x="5" y="5" height="90" width="90">
+                                        </rect>
+                                    </clipPath>
+                                </defs>
+                                <g tabindex="-1" id="recharts-zindex-100-:r46:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-200-:r47:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-300-:r48:">
+                                    <g class="recharts-layer recharts-area">
+                                        <g class="recharts-layer recharts-radial-bar-background">
+                                        </g>
+                                        <g class="recharts-layer recharts-radial-bar-sectors">
+                                            <g class="recharts-layer">
+                                                <path name="Server Connection" color="brand-danger" cx="50" cy="50" fill="#e22837 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 49.99999999999999,92.42348995544803
+    A1.5,1.5,0,0,1,48.44699646643109,93.92255320475715
+    A43.95,43.95,0,0,1,8.707074046492266,65.04980950703788
+    A1.5,1.5,0,0,1,9.652863433889152,63.10957935692832
+  L9.652863433889152,63.10957935692832
+      A1.5,1.5,0,0,1,11.525703804410881,64.02251875570423
+      A40.95,40.95,0,0,0,48.5530035335689,90.92442670613892
+      A1.5,1.5,0,0,1,49.99999999999999,92.42348995544803Z">
+                                                </path>
+                                            </g>
+                                        </g>
+                                    </g>
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-400-:r49:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-500-:r4a:">
+                                    <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                        <path cx="50" cy="50" orientation="outer" radius="45" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" 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.40576474687263L49.99999999999999,95Z">
+                                        </path>
+                                        <g class="recharts-layer recharts-polar-angle-axis-ticks">
+                                            <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                                <line class="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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>
+                                    </g>
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-600-:r4b:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-1000-:r4c:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-1100-:r4d:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-1200-:r4e:">
+                                </g>
+                                <g tabindex="-1" id="recharts-zindex-2000-:r4f:">
+                                </g>
+                            </svg>
+                        </div>
+                    </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>
+```
+
+#### Props: RadialBarChart
+
+### RadialBarChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the RadialBar. |
+| startAngle | Number | 180 | The start angle of all the bars. |
+| endAngle | Number | 180 | The end angle of all the bars. |
+| innerRadius | String \| Number | 30% | 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. |
+| outerRadius | String \| Number | 100% | 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. |
+| clockWise | Boolean | true | Set to "true" if the bars should go clockwise. |
+| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |
+| showBarLabel | Boolean | false | Renders a label on top of the bars. |
+| background | Boolean \| Function | true | 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. |
+| range | Array | — | Defines the min and max value for the bar. |
+| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |
+| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |
+| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | <Legend /> | Shows the provided Legend component otherwise shows nothing. |
+| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |
+
+### Example: Fuel level
+
+RadialBarChart with a needle
+
+Fuel level
+24%
+
+Charge level
+38%
+
+#### Summary
+
+RadialBarChart with a needle
+
+Fuel level
+24%
+
+Charge level
+38%
+
+#### React (tsx)
+
+```tsx
+import RadialBarChart from '@rio-cloud/rio-uikit/RadialBarChart';
+import ChartNeedle from '@rio-cloud/rio-uikit/ChartNeedle';
+
+export default () => {
+    const panelClasses = 'panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative';
+
+    return (
+        <>
+            <label>RadialBarChart with a needle</label>
+
+            <div className='display-flex flex-wrap gap-25'>
+                <div className={panelClasses}>
+                    <RadialBarChart
+                        data={[fuelLevel]}
+                        dataKey='value'
+                        startAngle={210}
+                        endAngle={-30}
+                        innerRadius='90%'
+                        legend={false}
+                        range={[0, 100]}
+                    />
+                    <div className='position-absolute top-50pct left-50pct translate-x-50pct-y-50pct'>
+                        <ChartNeedle rotation={-62} />
+                    </div>
+                    <div className='position-absolute bottom-5 left-50pct translate-x-50pct-y-50pct line-height-125rel'>
+                        <div className='text-color-dark'>{fuelLevel.name}</div>
+                        <div className='text-color-darker text-size-18 text-medium text-center'>
+                            {`${fuelLevel.value}%`}
+                        </div>
+                    </div>
+                </div>
+
+                <div className={panelClasses}>
+                    <RadialBarChart
+                        data={[chargeLevel]}
+                        dataKey='value'
+                        startAngle={180}
+                        endAngle={0}
+                        innerRadius='90%'
+                        legend={false}
+                        range={[0, 100]}
+                    />
+                    <div className='position-absolute top-50pct left-50pct translate-x-50pct-y-50pct'>
+                        <ChartNeedle rotation={-22} />
+                    </div>
+                    <div
+                        className={
+                            'position-absolute bottom-25 left-50pct translate-x-50pct-y-50pct ' + ' line-height-125rel'
+                        }
+                    >
+                        <div className='text-color-dark'>{chargeLevel.name}</div>
+                        <div className='text-color-darker text-size-18 text-medium text-center'>
+                            {`${chargeLevel.value}%`}
+                        </div>
+                    </div>
+                </div>
+
+                <div className={panelClasses}>
+                    <RadialBarChart
+                        data={[loremIpsum]}
+                        dataKey='value'
+                        startAngle={90}
+                        endAngle={-270}
+                        innerRadius='90%'
+                        legend={false}
+                        range={[0, 100]}
+                    />
+                    <div className='position-absolute top-50pct left-50pct translate-x-50pct-y-50pct'>
+                        <ChartNeedle rotation={-73} />
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+const fuelLevel = {
+    name: 'Fuel level',
+    value: 24,
+    color: 'color-coldplay-fountain',
+};
+
+const chargeLevel = {
+    name: 'Charge level',
+    value: 38,
+    color: 'color-coldplay-fountain',
+};
+
+const loremIpsum = {
+    name: 'Lorem ipsum',
+    value: 80,
+    color: 'color-warmup-charm',
+};
+```
+
+#### HTML (html)
+
+```html
+<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: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="168" height="168" class="recharts-wrapper" style="position: relative; cursor: default; width: 168px; height: 168px;">
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="168" height="168" viewBox="0 0 168 168" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:r4g:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:r4h:">
+                            <path name="Fuel level" color="color-coldplay-fountain" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 19.195416250083042,121.41494387273622
+    A3,3,0,0,1,15.039337317652155,120.21158795760601
+    A77.89,77.89,0,1,1,152.96066268234785,120.21158795760599
+    A3,3,0,0,1,148.80458374991696,121.41494387273619
+  L148.80458374991696,121.41494387273619
+      A3,3,0,0,1,147.64850481748604,117.42214736515977
+      A71.89,71.89,0,1,0,20.351495182513965,117.42214736515979
+      A3,3,0,0,1,19.195416250083042,121.41494387273622Z">
+                            </path>
+                        </g>
+                        <defs>
+                            <clipPath id="recharts12-clip">
+                                <rect x="5" y="5" height="158" width="158">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <g tabindex="-1" id="recharts-zindex-100-:r4j:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:r4k:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r4l:">
+                            <g class="recharts-layer recharts-area">
+                                <g class="recharts-layer recharts-radial-bar-background">
+                                </g>
+                                <g class="recharts-layer recharts-radial-bar-sectors">
+                                    <g class="recharts-layer">
+                                        <path name="Fuel level" color="color-coldplay-fountain" cx="84" cy="84" fill="#67abc5 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 19.195416250083042,121.41494387273622
+    A3,3,0,0,1,15.039337317652155,120.21158795760601
+    A77.89,77.89,0,0,1,13.58344361702271,50.707948588845106
+    A3,3,0,0,1,17.68548564649234,49.33160969905831
+  L17.68548564649234,49.33160969905831
+      A3,3,0,0,1,19.007751465242805,53.27249228465881
+      A71.89,71.89,0,0,0,20.351495182513965,117.42214736515979
+      A3,3,0,0,1,19.195416250083042,121.41494387273622Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r4m:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r4n:">
+                            <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                <path cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r4o:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:r4p:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:r4q:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:r4r:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:r4s:">
+                        </g>
+                    </svg>
+                </div>
+            </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: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="168" height="168" class="recharts-wrapper" style="position: relative; cursor: default; width: 168px; height: 168px;">
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="168" height="168" viewBox="0 0 168 168" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:r4t:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:r4u:">
+                            <path name="Charge level" color="color-coldplay-fountain" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 9.170112254527595,83.99999999999999
+    A3,3,0,0,1,6.172520276474231,80.87982374148751
+    A77.89,77.89,0,0,1,161.82747972352576,80.87982374148751
+    A3,3,0,0,1,158.8298877454724,84
+  L158.8298877454724,84
+      A3,3,0,0,1,155.83229576741903,81.12017625851249
+      A71.89,71.89,0,0,0,12.167704232580974,81.12017625851249
+      A3,3,0,0,1,9.170112254527595,83.99999999999999Z">
+                            </path>
+                        </g>
+                        <defs>
+                            <clipPath id="recharts13-clip">
+                                <rect x="5" y="5" height="158" width="158">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <g tabindex="-1" id="recharts-zindex-100-:r50:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:r51:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r52:">
+                            <g class="recharts-layer recharts-area">
+                                <g class="recharts-layer recharts-radial-bar-background">
+                                </g>
+                                <g class="recharts-layer recharts-radial-bar-sectors">
+                                    <g class="recharts-layer">
+                                        <path name="Charge level" color="color-coldplay-fountain" cx="84" cy="84" fill="#67abc5 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 9.170112254527595,83.99999999999999
+    A3,3,0,0,1,6.172520276474231,80.87982374148751
+    A77.89,77.89,0,0,1,52.448727323209546,12.786452886583334
+    A3,3,0,0,1,56.45328104625332,14.424929932602339
+  L56.45328104625332,14.424929932602339
+      A3,3,0,0,1,54.879175853967574,18.272154294729432
+      A71.89,71.89,0,0,0,12.167704232580974,81.12017625851249
+      A3,3,0,0,1,9.170112254527595,83.99999999999999Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r53:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r54:">
+                            <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                <path cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" cx="84" cy="84" orientation="outer" radius="79" fill="none" x1="163" y1="84" x2="171" y2="84">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r55:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:r56:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:r57:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:r58:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:r59:">
+                        </g>
+                    </svg>
+                </div>
+            </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: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="168" height="168" class="recharts-wrapper" style="position: relative; cursor: default; width: 168px; height: 168px;">
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="168" height="168" viewBox="0 0 168 168" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:r5a:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:r5b:">
+                            <path name="Lorem ipsum" color="color-warmup-charm" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 84,6.109999999999999
+    A 77.89,77.89,0,
+    1,1,
+    83.9986405630457,6.11000001186332
+  L 83.99874528280081,12.110000010949477
+            A 71.89,71.89,0,
+            1,0,
+            84,12.11 Z">
+                            </path>
+                        </g>
+                        <defs>
+                            <clipPath id="recharts14-clip">
+                                <rect x="5" y="5" height="158" width="158">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <g tabindex="-1" id="recharts-zindex-100-:r5d:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:r5e:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r5f:">
+                            <g class="recharts-layer recharts-area">
+                                <g class="recharts-layer recharts-radial-bar-background">
+                                </g>
+                                <g class="recharts-layer recharts-radial-bar-sectors">
+                                    <g class="recharts-layer">
+                                        <path name="Lorem ipsum" color="color-warmup-charm" cx="84" cy="84" fill="#c9778d " class="recharts-sector recharts-radial-bar-sector undefined" d="M 84,9.170112254527595
+    A3,3,0,0,1,87.1201762585125,6.172520276474231
+    A77.89,77.89,0,1,1,9.017480772786286,62.91745009870664
+    A3,3,0,0,1,12.832547646033603,60.87629299947942
+  L12.832547646033603,60.87629299947942
+      A3,3,0,0,1,14.793512553031277,64.5414749980231
+      A71.89,71.89,0,1,0,86.87982374148753,12.167704232580974
+      A3,3,0,0,1,84,9.170112254527595Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r5g:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r5h:">
+                            <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                <path cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" 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.08765744437916L84,5Z">
+                                </path>
+                                <g class="recharts-layer recharts-polar-angle-axis-ticks">
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r5i:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:r5j:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:r5k:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:r5l:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:r5m:">
+                        </g>
+                    </svg>
+                </div>
+            </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>
+```
+
+#### Props: RadialBarChart
+
+### RadialBarChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the RadialBar. |
+| startAngle | Number | 180 | The start angle of all the bars. |
+| endAngle | Number | 180 | The end angle of all the bars. |
+| innerRadius | String \| Number | 30% | 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. |
+| outerRadius | String \| Number | 100% | 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. |
+| clockWise | Boolean | true | Set to "true" if the bars should go clockwise. |
+| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |
+| showBarLabel | Boolean | false | Renders a label on top of the bars. |
+| background | Boolean \| Function | true | 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. |
+| range | Array | — | Defines the min and max value for the bar. |
+| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |
+| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |
+| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | <Legend /> | Shows the provided Legend component otherwise shows nothing. |
+| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |
+
+### Example: Example 6
+
+Circle RadialBarChart as progress steps
+
+Not Started
+Lorem ipsum dolor sit amet
+
+Initial Step
+Lorem ipsum dolor sit amet
+
+Second Step
+Lorem ipsum dolor sit amet
+
+Final Step
+Lorem ipsum dolor sit amet
+
+#### Summary
+
+Circle RadialBarChart as progress steps
+
+Not Started
+Lorem ipsum dolor sit amet
+
+Initial Step
+Lorem ipsum dolor sit amet
+
+Second Step
+Lorem ipsum dolor sit amet
+
+Final Step
+Lorem ipsum dolor sit amet
+
+#### React (tsx)
+
+```tsx
+import RadialBarChart from '@rio-cloud/rio-uikit/RadialBarChart';
+
+export default () => {
+    const Icon = ({ className }: { className?: string }) => (
+        <div
+            className={
+                'position-absolute top-50pct left-50pct translate-x-50pct-y-50pct ' + 'line-height-125rel text-center'
+            }
+        >
+            <span className={`rioglyph rioglyph-ok text-size-16 text-color-success ${className}`} />
+        </div>
+    );
+
+    const commonProps = {
+        dataKey: 'value',
+        startAngle: 90,
+        endAngle: -270,
+        innerRadius: '80%',
+        range: [0, 3],
+    };
+
+    return (
+        <>
+            <label>Circle RadialBarChart as progress steps</label>
+            <hr />
+
+            <div className='display-flex align-items-center gap-10'>
+                <div className='height-60 aspect-ratio-1 position-relative'>
+                    <RadialBarChart data={[notStartedStep]} legend={false} {...commonProps} />
+                    <Icon className='opacity-50' />
+                </div>
+                <div className='line-height-125rel'>
+                    <div className='text-size-18 text-color-darker'>Not Started</div>
+                    <div className='text-color-gray'>Lorem ipsum dolor sit amet</div>
+                </div>
+            </div>
+            <hr />
+
+            <div className='display-flex align-items-center gap-10'>
+                <div className='height-60 aspect-ratio-1 position-relative'>
+                    <RadialBarChart data={[firstStep]} legend={false} {...commonProps} />
+                    <Icon />
+                </div>
+                <div className='line-height-125rel'>
+                    <div className='text-size-18 text-color-darker'>Initial Step</div>
+                    <div className='text-color-gray'>Lorem ipsum dolor sit amet</div>
+                </div>
+            </div>
+            <hr />
+
+            <div className='display-flex align-items-center gap-10'>
+                <div className='height-60 aspect-ratio-1 position-relative'>
+                    <RadialBarChart data={[secondStep]} legend={false} {...commonProps} />
+                    <Icon />
+                </div>
+                <div className='line-height-125rel'>
+                    <div className='text-size-18 text-color-darker'>Second Step</div>
+                    <div className='text-color-gray'>Lorem ipsum dolor sit amet</div>
+                </div>
+            </div>
+            <hr />
+
+            <div className='display-flex align-items-center gap-10'>
+                <div className='height-60 aspect-ratio-1 position-relative'>
+                    <RadialBarChart data={[thirdStep]} legend={false} {...commonProps} />
+                    <Icon />
+                </div>
+                <div className='line-height-125rel'>
+                    <div className='text-size-18 text-color-darker'>Final Step</div>
+                    <div className='text-color-gray'>Lorem ipsum dolor sit amet</div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+const notStartedStep = {
+    value: 0,
+    color: 'brand-success',
+};
+
+const firstStep = {
+    value: 1,
+    color: 'brand-success',
+};
+
+const secondStep = {
+    value: 2,
+    color: 'brand-success',
+};
+
+const thirdStep = {
+    value: 3,
+    color: 'brand-success',
+};
+```
+
+#### HTML (html)
+
+```html
+<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: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="100" height="100" class="recharts-wrapper" style="position: relative; cursor: default; width: 100px; height: 100px;">
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="100" height="100" viewBox="0 0 100 100" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:r5n:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:r5o:">
+                            <path color="brand-success" cx="50" cy="50" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 50,6.100000000000001
+    A 43.9,43.9,0,
+    1,1,
+    49.99923380045842,6.100000006686358
+  L 49.99935597350605,13.100000005620196
+            A 36.9,36.9,0,
+            1,0,
+            50,13.100000000000001 Z">
+                            </path>
+                        </g>
+                        <defs>
+                            <clipPath id="recharts15-clip">
+                                <rect x="5" y="5" height="90" width="90">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <g tabindex="-1" id="recharts-zindex-100-:r5q:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:r5r:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r5s:">
+                            <g class="recharts-layer recharts-area">
+                                <g class="recharts-layer recharts-radial-bar-background">
+                                </g>
+                                <g class="recharts-layer recharts-radial-bar-sectors">
+                                    <g class="recharts-layer">
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r5t:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r5u:">
+                            <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                <path cx="50" cy="50" orientation="outer" radius="45" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M50,5L68.30314893841101,8.89045440608296L83.44151714648274,19.88912271385138L92.79754323328191,36.094235253127366L94.7534852915723,54.703780847044406L88.97114317029974,72.5L76.4503363531613,86.40576474687262L59.3560260867992,94.01664203302124L40.64397391320083,94.01664203302126L23.549663646838713,86.40576474687263L11.02885682970026,72.5L5.246514708427696,54.70378084704438L7.202456766718079,36.094235253127394L16.558482853517262,19.88912271385138L31.696851061588962,8.890454406082974L50,5Z">
+                                </path>
+                                <g class="recharts-layer recharts-polar-angle-axis-ticks">
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="68.30314893841101" y1="8.89045440608296" x2="71.55704208301741" y2="1.5820907449421568">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="83.44151714648274" y1="19.88912271385138" x2="89.38667575030189" y2="14.536077862980513">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="92.79754323328191" y1="36.094235253127366" x2="100.40599536364314" y2="33.62209929812778">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="94.7534852915723" y1="54.703780847044406" x2="102.70966045451848" y2="55.540008553185636">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="88.97114317029974" y1="72.5" x2="95.89934640057525" y2="76.5">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="76.4503363531613" y1="86.40576474687262" x2="81.15261837150109" y2="92.87790070187219">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="59.3560260867992" y1="94.01664203302124" x2="61.019319613341274" y2="101.84182283889169">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="40.64397391320083" y1="94.01664203302126" x2="38.980680386658754" y2="101.8418228388917">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="23.549663646838713" y1="86.40576474687263" x2="18.84738162849893" y2="92.87790070187222">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="11.02885682970026" y1="72.5" x2="4.100653599424746" y2="76.5">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="5.246514708427696" y1="54.70378084704438" x2="-2.7096604545184917" y2="55.5400085531856">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="7.202456766718079" y1="36.094235253127394" x2="-0.40599536364315014" y2="33.622099298127814">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="16.558482853517262" y1="19.88912271385138" x2="10.613324249698103" y2="14.536077862980513">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="31.696851061588962" y1="8.890454406082974" x2="28.442957916982554" y2="1.582090744942171">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r5v:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:r60:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:r61:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:r62:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:r63:">
+                        </g>
+                    </svg>
+                </div>
+            </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: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="100" height="100" class="recharts-wrapper" style="position: relative; cursor: default; width: 100px; height: 100px;">
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="100" height="100" viewBox="0 0 100 100" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:r64:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:r65:">
+                            <path color="brand-success" cx="50" cy="50" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 50,6.100000000000001
+    A 43.9,43.9,0,
+    1,1,
+    49.99923380045842,6.100000006686358
+  L 49.99935597350605,13.100000005620196
+            A 36.9,36.9,0,
+            1,0,
+            50,13.100000000000001 Z">
+                            </path>
+                        </g>
+                        <defs>
+                            <clipPath id="recharts16-clip">
+                                <rect x="5" y="5" height="90" width="90">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <g tabindex="-1" id="recharts-zindex-100-:r67:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:r68:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r69:">
+                            <g class="recharts-layer recharts-area">
+                                <g class="recharts-layer recharts-radial-bar-background">
+                                </g>
+                                <g class="recharts-layer recharts-radial-bar-sectors">
+                                    <g class="recharts-layer">
+                                        <path color="brand-success" cx="50" cy="50" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 50,9.75189445452122
+    A3.5,3.5,0,0,1,53.80321782178218,6.2650536275614215
+    A43.9,43.9,0,0,1,89.77718350257298,68.5737899364302
+    A3.5,3.5,0,0,1,84.85588185658196,70.12405277273939
+  L84.85588185658196,70.12405277273939
+      A3.5,3.5,0,0,1,83.43458021059095,65.6121377825575
+      A36.9,36.9,0,0,0,53.196782178217816,13.238735281481013
+      A3.5,3.5,0,0,1,50,9.75189445452122Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r6a:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r6b:">
+                            <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                <path cx="50" cy="50" orientation="outer" radius="45" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M50,5L68.30314893841101,8.89045440608296L83.44151714648274,19.88912271385138L92.79754323328191,36.094235253127366L94.7534852915723,54.703780847044406L88.97114317029974,72.5L76.4503363531613,86.40576474687262L59.3560260867992,94.01664203302124L40.64397391320083,94.01664203302126L23.549663646838713,86.40576474687263L11.02885682970026,72.5L5.246514708427696,54.70378084704438L7.202456766718079,36.094235253127394L16.558482853517262,19.88912271385138L31.696851061588962,8.890454406082974L50,5Z">
+                                </path>
+                                <g class="recharts-layer recharts-polar-angle-axis-ticks">
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="68.30314893841101" y1="8.89045440608296" x2="71.55704208301741" y2="1.5820907449421568">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="83.44151714648274" y1="19.88912271385138" x2="89.38667575030189" y2="14.536077862980513">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="92.79754323328191" y1="36.094235253127366" x2="100.40599536364314" y2="33.62209929812778">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="94.7534852915723" y1="54.703780847044406" x2="102.70966045451848" y2="55.540008553185636">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="88.97114317029974" y1="72.5" x2="95.89934640057525" y2="76.5">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="76.4503363531613" y1="86.40576474687262" x2="81.15261837150109" y2="92.87790070187219">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="59.3560260867992" y1="94.01664203302124" x2="61.019319613341274" y2="101.84182283889169">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="40.64397391320083" y1="94.01664203302126" x2="38.980680386658754" y2="101.8418228388917">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="23.549663646838713" y1="86.40576474687263" x2="18.84738162849893" y2="92.87790070187222">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="11.02885682970026" y1="72.5" x2="4.100653599424746" y2="76.5">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="5.246514708427696" y1="54.70378084704438" x2="-2.7096604545184917" y2="55.5400085531856">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="7.202456766718079" y1="36.094235253127394" x2="-0.40599536364315014" y2="33.622099298127814">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="16.558482853517262" y1="19.88912271385138" x2="10.613324249698103" y2="14.536077862980513">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="31.696851061588962" y1="8.890454406082974" x2="28.442957916982554" y2="1.582090744942171">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r6c:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:r6d:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:r6e:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:r6f:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:r6g:">
+                        </g>
+                    </svg>
+                </div>
+            </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: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="100" height="100" class="recharts-wrapper" style="position: relative; cursor: default; width: 100px; height: 100px;">
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="100" height="100" viewBox="0 0 100 100" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:r6h:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:r6i:">
+                            <path color="brand-success" cx="50" cy="50" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 50,6.100000000000001
+    A 43.9,43.9,0,
+    1,1,
+    49.99923380045842,6.100000006686358
+  L 49.99935597350605,13.100000005620196
+            A 36.9,36.9,0,
+            1,0,
+            50,13.100000000000001 Z">
+                            </path>
+                        </g>
+                        <defs>
+                            <clipPath id="recharts17-clip">
+                                <rect x="5" y="5" height="90" width="90">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <g tabindex="-1" id="recharts-zindex-100-:r6k:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:r6l:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r6m:">
+                            <g class="recharts-layer recharts-area">
+                                <g class="recharts-layer recharts-radial-bar-background">
+                                </g>
+                                <g class="recharts-layer recharts-radial-bar-sectors">
+                                    <g class="recharts-layer">
+                                        <path color="brand-success" cx="50" cy="50" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 50,9.75189445452122
+    A3.5,3.5,0,0,1,53.80321782178218,6.2650536275614215
+    A43.9,43.9,0,1,1,14.026034319209195,75.16115643600837
+    A3.5,3.5,0,0,1,15.144118143418034,70.12405277273939
+  L15.144118143418034,70.12405277273939
+      A3.5,3.5,0,0,1,19.76220196762686,71.14912693596148
+      A36.9,36.9,0,1,0,53.196782178217816,13.238735281481013
+      A3.5,3.5,0,0,1,50,9.75189445452122Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r6n:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r6o:">
+                            <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                <path cx="50" cy="50" orientation="outer" radius="45" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M50,5L68.30314893841101,8.89045440608296L83.44151714648274,19.88912271385138L92.79754323328191,36.094235253127366L94.7534852915723,54.703780847044406L88.97114317029974,72.5L76.4503363531613,86.40576474687262L59.3560260867992,94.01664203302124L40.64397391320083,94.01664203302126L23.549663646838713,86.40576474687263L11.02885682970026,72.5L5.246514708427696,54.70378084704438L7.202456766718079,36.094235253127394L16.558482853517262,19.88912271385138L31.696851061588962,8.890454406082974L50,5Z">
+                                </path>
+                                <g class="recharts-layer recharts-polar-angle-axis-ticks">
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="68.30314893841101" y1="8.89045440608296" x2="71.55704208301741" y2="1.5820907449421568">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="83.44151714648274" y1="19.88912271385138" x2="89.38667575030189" y2="14.536077862980513">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="92.79754323328191" y1="36.094235253127366" x2="100.40599536364314" y2="33.62209929812778">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="94.7534852915723" y1="54.703780847044406" x2="102.70966045451848" y2="55.540008553185636">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="88.97114317029974" y1="72.5" x2="95.89934640057525" y2="76.5">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="76.4503363531613" y1="86.40576474687262" x2="81.15261837150109" y2="92.87790070187219">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="59.3560260867992" y1="94.01664203302124" x2="61.019319613341274" y2="101.84182283889169">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="40.64397391320083" y1="94.01664203302126" x2="38.980680386658754" y2="101.8418228388917">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="23.549663646838713" y1="86.40576474687263" x2="18.84738162849893" y2="92.87790070187222">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="11.02885682970026" y1="72.5" x2="4.100653599424746" y2="76.5">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="5.246514708427696" y1="54.70378084704438" x2="-2.7096604545184917" y2="55.5400085531856">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="7.202456766718079" y1="36.094235253127394" x2="-0.40599536364315014" y2="33.622099298127814">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="16.558482853517262" y1="19.88912271385138" x2="10.613324249698103" y2="14.536077862980513">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="31.696851061588962" y1="8.890454406082974" x2="28.442957916982554" y2="1.582090744942171">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r6p:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:r6q:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:r6r:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:r6s:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:r6t:">
+                        </g>
+                    </svg>
+                </div>
+            </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: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="100" height="100" class="recharts-wrapper" style="position: relative; cursor: default; width: 100px; height: 100px;">
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="100" height="100" viewBox="0 0 100 100" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:r6u:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:r6v:">
+                            <path color="brand-success" cx="50" cy="50" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 50,6.100000000000001
+    A 43.9,43.9,0,
+    1,1,
+    49.99923380045842,6.100000006686358
+  L 49.99935597350605,13.100000005620196
+            A 36.9,36.9,0,
+            1,0,
+            50,13.100000000000001 Z">
+                            </path>
+                        </g>
+                        <defs>
+                            <clipPath id="recharts18-clip">
+                                <rect x="5" y="5" height="90" width="90">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <g tabindex="-1" id="recharts-zindex-100-:r71:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:r72:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r73:">
+                            <g class="recharts-layer recharts-area">
+                                <g class="recharts-layer recharts-radial-bar-background">
+                                </g>
+                                <g class="recharts-layer recharts-radial-bar-sectors">
+                                    <g class="recharts-layer">
+                                        <path color="brand-success" cx="50" cy="50" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 50,6.100000000000001
+    A 43.9,43.9,0,
+    1,1,
+    49.99923380045842,6.100000006686358
+  L 49.99935597350605,13.100000005620196
+            A 36.9,36.9,0,
+            1,0,
+            50,13.100000000000001 Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r74:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r75:">
+                            <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                <path cx="50" cy="50" orientation="outer" radius="45" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M50,5L68.30314893841101,8.89045440608296L83.44151714648274,19.88912271385138L92.79754323328191,36.094235253127366L94.7534852915723,54.703780847044406L88.97114317029974,72.5L76.4503363531613,86.40576474687262L59.3560260867992,94.01664203302124L40.64397391320083,94.01664203302126L23.549663646838713,86.40576474687263L11.02885682970026,72.5L5.246514708427696,54.70378084704438L7.202456766718079,36.094235253127394L16.558482853517262,19.88912271385138L31.696851061588962,8.890454406082974L50,5Z">
+                                </path>
+                                <g class="recharts-layer recharts-polar-angle-axis-ticks">
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="68.30314893841101" y1="8.89045440608296" x2="71.55704208301741" y2="1.5820907449421568">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="83.44151714648274" y1="19.88912271385138" x2="89.38667575030189" y2="14.536077862980513">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="92.79754323328191" y1="36.094235253127366" x2="100.40599536364314" y2="33.62209929812778">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="94.7534852915723" y1="54.703780847044406" x2="102.70966045451848" y2="55.540008553185636">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="88.97114317029974" y1="72.5" x2="95.89934640057525" y2="76.5">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="76.4503363531613" y1="86.40576474687262" x2="81.15261837150109" y2="92.87790070187219">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="59.3560260867992" y1="94.01664203302124" x2="61.019319613341274" y2="101.84182283889169">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="40.64397391320083" y1="94.01664203302126" x2="38.980680386658754" y2="101.8418228388917">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="23.549663646838713" y1="86.40576474687263" x2="18.84738162849893" y2="92.87790070187222">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="11.02885682970026" y1="72.5" x2="4.100653599424746" y2="76.5">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="5.246514708427696" y1="54.70378084704438" x2="-2.7096604545184917" y2="55.5400085531856">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="7.202456766718079" y1="36.094235253127394" x2="-0.40599536364315014" y2="33.622099298127814">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="16.558482853517262" y1="19.88912271385138" x2="10.613324249698103" y2="14.536077862980513">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" cx="50" cy="50" orientation="outer" radius="45" fill="none" x1="31.696851061588962" y1="8.890454406082974" x2="28.442957916982554" y2="1.582090744942171">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r76:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:r77:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:r78:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:r79:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:r7a:">
+                        </g>
+                    </svg>
+                </div>
+            </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>
+```
+
+#### Props: RadialBarChart
+
+### RadialBarChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the RadialBar. |
+| startAngle | Number | 180 | The start angle of all the bars. |
+| endAngle | Number | 180 | The end angle of all the bars. |
+| innerRadius | String \| Number | 30% | 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. |
+| outerRadius | String \| Number | 100% | 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. |
+| clockWise | Boolean | true | Set to "true" if the bars should go clockwise. |
+| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |
+| showBarLabel | Boolean | false | Renders a label on top of the bars. |
+| background | Boolean \| Function | true | 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. |
+| range | Array | — | Defines the min and max value for the bar. |
+| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |
+| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |
+| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | <Legend /> | Shows the provided Legend component otherwise shows nothing. |
+| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |
+
+### Example: Example 7
+
+RadialBarChart with changing data1%
+
+Start
+
+#### Summary
+
+RadialBarChart with changing data1%
+
+Start
+
+#### React (tsx)
+
+```tsx
+import { useState, useLayoutEffect } from 'react';
+
+import RadialBarChart, { type RadialBarChartDataType } from '@rio-cloud/rio-uikit/RadialBarChart';
+
+type CustomDataType = RadialBarChartDataType & {
+    value: number;
+};
+
+const initialData: CustomDataType = {
+    value: 1,
+    color: 'brand-danger',
+};
+
+const delay = 100;
+
+export default () => {
+    const [data, setData] = useState(initialData);
+    const [isIncrement, setIsIncrement] = useState(true);
+    const [run, setRun] = useState(false);
+
+    const getColor = (value: number) => {
+        if (value <= 25) {
+            return 'brand-danger';
+        }
+        if (value <= 50) {
+            return 'brand-warning';
+        }
+        if (value <= 100) {
+            return 'brand-success';
+        }
+    };
+
+    useLayoutEffect(() => {
+        if (!run) {
+            return;
+        }
+
+        const tick = () => {
+            if (data.value === 1) {
+                setIsIncrement(true);
+            } else if (data.value === 99) {
+                setIsIncrement(false);
+            }
+
+            const newValue = isIncrement ? data.value + 1 : data.value - 1;
+
+            setData({
+                value: newValue,
+                color: getColor(newValue),
+            });
+        };
+
+        const id = setTimeout(tick, delay);
+
+        return () => {
+            id && clearTimeout(id);
+        };
+    }, [data, delay, run]);
+
+    const panelClasses = 'panel panel-default panel-body margin-bottom-0 height-150 aspect-ratio-1 position-relative';
+
+    return (
+        <>
+            <label>RadialBarChart with changing data</label>
+            <div className='display-flex gap-25 margin-bottom-15'>
+                <div className={panelClasses}>
+                    <RadialBarChart
+                        data={[data]}
+                        dataKey='value'
+                        startAngle={90}
+                        endAngle={-270}
+                        innerRadius='85%'
+                        legend={false}
+                        range={[0, 100]}
+                        textOptions={{
+                            x: 60,
+                            y: 62,
+                            text: `${data.value}%`,
+                            size: '180%',
+                            color: data.color,
+                        }}
+                    />
+                </div>
+            </div>
+            <button className='btn btn-default' type='button' onClick={() => setRun(!run)}>
+                {run ? 'Stop' : 'Start'}
+            </button>
+        </>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<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: 100px; min-height: 100px;">
+            <div style="width: 0px; height: 0px; overflow: visible;">
+                <div width="118" height="118" class="recharts-wrapper" style="position: relative; cursor: default; width: 118px; height: 118px;">
+                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="118" height="118" viewBox="0 0 118 118" style="width: 100%; height: 100%; display: block;">
+                        <title>
+                        </title>
+                        <desc>
+                        </desc>
+                        <g tabindex="-1" id="recharts-zindex--100-:r7b:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex--50-:r7c:">
+                            <path color="brand-danger" cx="59" cy="59" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 59,6.289999999999999
+    A 52.71,52.71,0,
+    1,1,
+    58.99908003695133,6.290000008028194
+  L 58.99918475670644,12.290000007114337
+            A 46.71,46.71,0,
+            1,0,
+            59,12.29 Z">
+                            </path>
+                        </g>
+                        <defs>
+                            <clipPath id="recharts19-clip">
+                                <rect x="5" y="5" height="108" width="108">
+                                </rect>
+                            </clipPath>
+                        </defs>
+                        <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>
+                        <g tabindex="-1" id="recharts-zindex-100-:r7e:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-200-:r7f:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-300-:r7g:">
+                            <g class="recharts-layer recharts-area">
+                                <g class="recharts-layer recharts-radial-bar-background">
+                                </g>
+                                <g class="recharts-layer recharts-radial-bar-sectors">
+                                    <g class="recharts-layer">
+                                        <path color="brand-danger" cx="59" cy="59" fill="#e22837 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 59,6.289999999999999
+    A 52.71,52.71,0,
+    0,1,
+    62.30968828439011,6.394011144545807
+  L 61.932945167214235,12.382171515115438
+            A 46.71,46.71,0,
+            0,0,
+            59,12.29 Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-400-:r7h:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-500-:r7i:">
+                            <g class="recharts-layer recharts-polar-angle-axis angleAxis">
+                                <path cx="59" cy="59" orientation="outer" radius="54" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" 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.313082303752843L59,5Z">
+                                </path>
+                                <g class="recharts-layer recharts-polar-angle-axis-ticks">
+                                    <g class="recharts-layer recharts-polar-angle-axis-tick">
+                                        <line class="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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="recharts-polar-angle-axis-tick-line" 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>
+                            </g>
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-600-:r7j:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1000-:r7k:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1100-:r7l:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-1200-:r7m:">
+                        </g>
+                        <g tabindex="-1" id="recharts-zindex-2000-:r7n:">
+                        </g>
+                    </svg>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<button class="btn btn-default" type="button">Start</button>
+```
+
+#### Props: RadialBarChart
+
+### RadialBarChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the RadialBar. |
+| startAngle | Number | 180 | The start angle of all the bars. |
+| endAngle | Number | 180 | The end angle of all the bars. |
+| innerRadius | String \| Number | 30% | 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. |
+| outerRadius | String \| Number | 100% | 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. |
+| clockWise | Boolean | true | Set to "true" if the bars should go clockwise. |
+| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |
+| showBarLabel | Boolean | false | Renders a label on top of the bars. |
+| background | Boolean \| Function | true | 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. |
+| range | Array | — | Defines the min and max value for the bar. |
+| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |
+| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |
+| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | <Legend /> | Shows the provided Legend component otherwise shows nothing. |
+| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |