# RadialBarChart

*Category:* Components
*Section:* Charts
*Source:* https://uikit.developers.rio.cloud/#/components/radialBarCharts
*Captured:* 2026-04-27T14:59:21.623Z

## 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 bars Age 18-24
Age 25-29
Age 30-34
Age 35-39

31.47 26.69 -15.69 8.22

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 () => (
    <>
        <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 style="width: 100%; height: 100%;">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                <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="Age 18-24 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="Age 25-29 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="Age 30-34 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="Age 35-39 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" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                <g class="recharts-layer recharts-shape">
                                    <path name="Age 18-24" cx="120" cy="180" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 70.3925,180
    A 49.6075,49.6075,0,
    0,1,
    169.6075,180
  L 154.6075,180
            A 34.6075,34.6075,0,
            0,0,
            85.3925,180 Z">
                                    </path>
                                </g>
                                <g class="recharts-layer recharts-shape">
                                    <path name="Age 25-29" cx="120" cy="180" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 51.3175,180
    A 68.6825,68.6825,0,
    0,1,
    188.6825,180
  L 173.6825,180
            A 53.6825,53.6825,0,
            0,0,
            66.3175,180 Z">
                                    </path>
                                </g>
                                <g class="recharts-layer recharts-shape">
                                    <path name="Age 30-34" cx="120" cy="180" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 32.2425,180
    A 87.7575,87.7575,0,
    0,1,
    207.7575,180
  L 192.7575,180
            A 72.7575,72.7575,0,
            0,0,
            47.2425,180 Z">
                                    </path>
                                </g>
                                <g class="recharts-layer recharts-shape">
                                    <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 13.1675,180
    A 106.8325,106.8325,0,
    0,1,
    226.8325,180
  L 211.8325,180
            A 91.8325,91.8325,0,
            0,0,
            28.1675,180 Z">
                                    </path>
                                </g>
                            </g>
                            <defs>
                                <clipPath id="recharts1-clip">
                                    <rect x="5" y="5" height="218" width="258">
                                    </rect>
                                </clipPath>
                            </defs>
                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                <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 recharts-shape">
                                            <path name="Age 18-24" cx="120" cy="180" fill="#ef7186 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 95.1104,137.0883
    A 49.6075,49.6075,0,
    0,1,
    121.9991,130.4328
  L 121.3947,145.4206
            A 34.6075,34.6075,0,
            0,0,
            102.6364,150.0637 Z">
                                            </path>
                                        </g>
                                        <g class="recharts-layer recharts-shape">
                                            <path name="Age 25-29" cx="120" cy="180" fill="#e878b6 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 85.5399,120.588
    A 68.6825,68.6825,0,
    0,1,
    116.8659,111.389
  L 117.5504,126.3734
            A 53.6825,53.6825,0,
            0,0,
            93.0659,133.5633 Z">
                                            </path>
                                        </g>
                                        <g class="recharts-layer recharts-shape">
                                            <path name="Age 30-34" cx="120" cy="180" fill="#dc82e9 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 75.9695,104.0876
    A 87.7575,87.7575,0,
    0,0,
    56.5752,119.348
  L 67.4161,129.7149
            A 72.7575,72.7575,0,
            0,1,
            83.4954,117.063 Z">
                                            </path>
                                        </g>
                                        <g class="recharts-layer recharts-shape">
                                            <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 66.399,87.5873
    A 106.8325,106.8325,0,
    0,1,
    80.5938,80.7008
  L 86.1267,94.6431
            A 91.8325,91.8325,0,
            0,0,
            73.9249,100.5626 Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                            </g>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default panel-body height-300 aspect-ratio-1">
        <div style="width: 100%; height: 100%;">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                <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: 67.3672px; top: 114px;">
                            <ul class="recharts-default-legend" style="padding: 0px; margin: 0px; text-align: left;">
                                <li class="recharts-legend-item legend-item-0" style="display: block; margin-right: 10px;">
                                    <svg aria-label="Registrations 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="Logins 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" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                <g class="recharts-layer recharts-shape">
                                    <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.51
    A 114.49,114.49,0,
    1,1,
    133.998,19.51
  L 133.9982,29.51
            A 104.49,104.49,0,
            1,0,
            134,29.51 Z">
                                    </path>
                                </g>
                                <g class="recharts-layer recharts-shape">
                                    <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.61
    A 127.39,127.39,0,
    1,1,
    133.9978,6.61
  L 133.998,16.61
            A 117.39,117.39,0,
            1,0,
            134,16.61 Z">
                                    </path>
                                </g>
                            </g>
                            <defs>
                                <clipPath id="recharts2-clip">
                                    <rect x="5" y="5" height="258" width="258">
                                    </rect>
                                </clipPath>
                            </defs>
                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                <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 recharts-shape">
                                            <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.6242
    A5,5,0,0,1,139.2283,19.6294
    A114.49,114.49,0,0,1,235.5472,81.1216
    A5,5,0,0,1,233.2168,87.9665
  L233.2168,87.9665
      A5,5,0,0,1,226.6777,85.7402
      A104.49,104.49,0,0,0,138.7717,29.619
      A5,5,0,0,1,134,24.6242Z">
                                            </path>
                                        </g>
                                        <g class="recharts-layer recharts-shape">
                                            <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.7122
    A5,5,0,0,1,139.2043,6.7163
    A127.39,127.39,0,0,1,234.4929,55.7096
    A5,5,0,0,1,233.4578,62.849
  L233.4578,62.849
      A5,5,0,0,1,226.6043,61.8553
      A117.39,117.39,0,0,0,138.7957,16.708
      A5,5,0,0,1,134,11.7122Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                    <path angle="0" cx="134" cy="134" orientation="outer" radius="129" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M134,5L209.8243,29.6368L256.6863,94.1368L256.6863,173.8632L209.8243,238.3632L134,263L58.1757,238.3632L11.3137,173.8632L11.3137,94.1368L58.1757,29.6368L134,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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" class="recharts-zIndex-layer_600">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                            </g>
                        </svg>
                    </div>
                </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 text 82%

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 style="width: 100%; height: 100%;">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                <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" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                <g class="recharts-layer recharts-shape">
                                    <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.22
    A 76.78,76.78,0,
    1,1,
    83.9987,7.22
  L 83.9989,19.22
            A 64.78,64.78,0,
            1,0,
            84,19.22 Z">
                                    </path>
                                </g>
                            </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" class="recharts-zIndex-layer_100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                <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 recharts-shape">
                                            <path name="Ranking" color="brand-success" cx="84" cy="84" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 84,13.4748
    A6,6,0,0,1,90.5086,7.4964
    A76.78,76.78,0,1,1,8.4448,70.3406
    A6,6,0,0,1,15.9132,65.6155
  L15.9132,65.6155
      A6,6,0,0,1,20.2534,72.4755
      A64.78,64.78,0,1,0,89.4914,19.4532
      A6,6,0,0,1,84,13.4748Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                    <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M84,5L130.435,20.0877L159.1335,59.5877L159.1335,108.4123L130.435,147.9123L84,163L37.565,147.9123L8.8665,108.4123L8.8665,59.5877L37.565,20.0877L84,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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" class="recharts-zIndex-layer_600">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                            </g>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default panel-body margin-bottom-0 height-200 aspect-ratio-1 position-relative">
        <div style="width: 100%; height: 100%;">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                <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" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                <g class="recharts-layer recharts-shape">
                                    <path name="Ranking" color="brand-success" cx="84" cy="84" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 19.1954,121.4149
    A3,3,0,0,1,15.0393,120.2116
    A77.89,77.89,0,0,1,149.8405,42.3841
    A3,3,0,0,1,148.8046,46.5851
  L148.8046,46.5851
      A3,3,0,0,1,144.7687,45.5899
      A71.89,71.89,0,0,0,20.3515,117.4221
      A3,3,0,0,1,19.1954,121.4149Z">
                                    </path>
                                </g>
                            </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" class="recharts-zIndex-layer_100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                <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 recharts-shape">
                                            <path name="Ranking" color="brand-success" cx="84" cy="84" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 19.1954,121.4149
    A3,3,0,0,1,15.0393,120.2116
    A77.89,77.89,0,0,1,110.971,10.9287
    A3,3,0,0,1,112.7027,14.8938
  L112.7027,14.8938
      A3,3,0,0,1,108.8934,16.5575
      A71.89,71.89,0,0,0,20.3515,117.4221
      A3,3,0,0,1,19.1954,121.4149Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                    <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M15.584,123.5L6.7263,100.425L5.4328,75.7423L11.8299,51.8678L25.2916,31.1387L44.5,15.584L67.575,6.7263L92.2577,5.4328L116.1322,11.8299L136.8613,25.2916L152.416,44.5L15.584,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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" class="recharts-zIndex-layer_600">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                            </g>
                        </svg>
                    </div>
                </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

#### 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 style="width: 100%; height: 100%;">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                <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" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                <g class="recharts-layer recharts-shape">
                                    <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.11
    A 77.89,77.89,0,
    1,1,
    83.9986,6.11
  L 83.9987,12.11
            A 71.89,71.89,0,
            1,0,
            84,12.11 Z">
                                    </path>
                                </g>
                            </g>
                            <defs>
                                <clipPath id="recharts5-clip">
                                    <rect x="5" y="5" height="158" width="158">
                                    </rect>
                                </clipPath>
                            </defs>
                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                <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 recharts-shape">
                                            <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.1701
    A3,3,0,0,1,87.1202,6.1725
    A77.89,77.89,0,0,1,161.478,75.9992
    A3,3,0,0,1,158.6822,79.3014
  L158.6822,79.3014
      A3,3,0,0,1,155.5097,76.6155
      A71.89,71.89,0,0,0,86.8798,12.1677
      A3,3,0,0,1,84,9.1701Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                    <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M84,5L130.435,20.0877L159.1335,59.5877L159.1335,108.4123L130.435,147.9123L84,163L37.565,147.9123L8.8665,108.4123L8.8665,59.5877L37.565,20.0877L84,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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" class="recharts-zIndex-layer_600">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                            </g>
                        </svg>
                    </div>
                </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 style="width: 100%; height: 100%;">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                <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" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                <g class="recharts-layer recharts-shape">
                                    <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.11
    A 77.89,77.89,0,
    1,1,
    83.9986,6.11
  L 83.9987,12.11
            A 71.89,71.89,0,
            1,0,
            84,12.11 Z">
                                    </path>
                                </g>
                            </g>
                            <defs>
                                <clipPath id="recharts6-clip">
                                    <rect x="5" y="5" height="158" width="158">
                                    </rect>
                                </clipPath>
                            </defs>
                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                <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 recharts-shape">
                                            <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.1701
    A3,3,0,0,1,87.1202,6.1725
    A77.89,77.89,0,0,1,139.5511,138.5979
    A3,3,0,0,1,135.2246,138.5486
  L135.2246,138.5486
      A3,3,0,0,1,135.2719,134.3921
      A71.89,71.89,0,0,0,86.8798,12.1677
      A3,3,0,0,1,84,9.1701Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                    <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M84,5L130.435,20.0877L159.1335,59.5877L159.1335,108.4123L130.435,147.9123L84,163L37.565,147.9123L8.8665,108.4123L8.8665,59.5877L37.565,20.0877L84,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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" class="recharts-zIndex-layer_600">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                            </g>
                        </svg>
                    </div>
                </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 style="width: 100%; height: 100%;">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                <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" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                <g class="recharts-layer recharts-shape">
                                    <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.1954,121.4149
    A3,3,0,0,1,15.0393,120.2116
    A77.89,77.89,0,1,1,152.9607,120.2116
    A3,3,0,0,1,148.8046,121.4149
  L148.8046,121.4149
      A3,3,0,0,1,147.6485,117.4221
      A71.89,71.89,0,1,0,20.3515,117.4221
      A3,3,0,0,1,19.1954,121.4149Z">
                                    </path>
                                </g>
                            </g>
                            <defs>
                                <clipPath id="recharts7-clip">
                                    <rect x="5" y="5" height="158" width="158">
                                    </rect>
                                </clipPath>
                            </defs>
                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                <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 recharts-shape">
                                            <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.1954,121.4149
    A3,3,0,0,1,15.0393,120.2116
    A77.89,77.89,0,1,1,157.0541,56.9825
    A3,3,0,0,1,155.1675,60.8763
  L155.1675,60.8763
      A3,3,0,0,1,151.4267,59.0637
      A71.89,71.89,0,1,0,20.3515,117.4221
      A3,3,0,0,1,19.1954,121.4149Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                    <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M15.584,123.5L5.4328,92.2577L8.8665,59.5877L25.2916,31.1387L51.8678,11.8299L84,5L116.1322,11.8299L142.7084,31.1387L159.1335,59.5877L162.5672,92.2577L152.416,123.5L15.584,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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" class="recharts-zIndex-layer_600">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                            </g>
                        </svg>
                    </div>
                </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 style="width: 100%; height: 100%;">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                <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" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                <g class="recharts-layer recharts-shape">
                                    <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.5851,148.8046
    A3,3,0,0,1,42.3841,149.8405
    A77.89,77.89,0,1,1,136.826,26.7614
    A3,3,0,0,1,136.9127,31.0873
  L136.9127,31.0873
      A3,3,0,0,1,132.7568,31.1706
      A71.89,71.89,0,1,0,45.5899,144.7687
      A3,3,0,0,1,46.5851,148.8046Z">
                                    </path>
                                </g>
                            </g>
                            <defs>
                                <clipPath id="recharts8-clip">
                                    <rect x="5" y="5" height="158" width="158">
                                    </rect>
                                </clipPath>
                            </defs>
                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                <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 recharts-shape">
                                            <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.5851,148.8046
    A3,3,0,0,1,42.3841,149.8405
    A77.89,77.89,0,0,1,55.2689,11.6027
    A3,3,0,0,1,59.206,13.3971
  L59.206,13.3971
      A3,3,0,0,1,57.4821,17.1795
      A71.89,71.89,0,0,0,45.5899,144.7687
      A3,3,0,0,1,46.5851,148.8046Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                    <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M44.5,152.416L23.9279,135.3064L10.2471,112.3111L5.0271,86.068L8.8665,59.5877L21.3251,35.9078L40.9735,17.745L65.5578,7.1828L92.2577,5.4328L118.0104,12.6958L139.8614,28.1386L44.5,152.416Z">
                                    </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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" class="recharts-zIndex-layer_600">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                            </g>
                        </svg>
                    </div>
                </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 visualization Most reported problems

43%

App

37%

Website

20%

Server Connection

#### React (tsx)

```tsx
import RadialBarChart from '@rio-cloud/rio-uikit/RadialBarChart';

export default () => (
    <>
        <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 style="width: 100%; height: 100%;">
                    <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                        <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" class="recharts-zIndex-layer_-100">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                        <g class="recharts-layer recharts-shape">
                                            <path name="App" color="brand-danger" cx="50" cy="50" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 50,93.95
    A 43.95,43.95,0,
    1,1,
    50.0008,93.95
  L 50.0007,90.95
            A 40.95,40.95,0,
            1,0,
            50,90.95 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <defs>
                                        <clipPath id="recharts9-clip">
                                            <rect x="5" y="5" height="90" width="90">
                                            </rect>
                                        </clipPath>
                                    </defs>
                                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                                        <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 recharts-shape">
                                                    <path name="App" color="brand-danger" cx="50" cy="50" fill="#e22837 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 50,92.4235
    A1.5,1.5,0,0,1,48.447,93.9226
    A43.95,43.95,0,0,1,29.8935,10.9189
    A1.5,1.5,0,0,1,31.937,11.6141
  L31.937,11.6141
      A1.5,1.5,0,0,1,31.2659,13.5866
      A40.95,40.95,0,0,0,48.553,90.9244
      A1.5,1.5,0,0,1,50,92.4235Z">
                                                    </path>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                                        <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                            <path angle="0" cx="50" cy="50" orientation="outer" radius="45" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M50,95L23.5497,86.4058L7.2025,63.9058L7.2025,36.0942L23.5497,13.5942L50,5L76.4503,13.5942L92.7975,36.0942L92.7975,63.9058L76.4503,86.4058L50,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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" class="recharts-zIndex-layer_600">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                                    </g>
                                </svg>
                            </div>
                        </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 style="width: 100%; height: 100%;">
                    <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                        <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" class="recharts-zIndex-layer_-100">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                        <g class="recharts-layer recharts-shape">
                                            <path name="Website" color="brand-danger" cx="50" cy="50" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 50,93.95
    A 43.95,43.95,0,
    1,1,
    50.0008,93.95
  L 50.0007,90.95
            A 40.95,40.95,0,
            1,0,
            50,90.95 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <defs>
                                        <clipPath id="recharts10-clip">
                                            <rect x="5" y="5" height="90" width="90">
                                            </rect>
                                        </clipPath>
                                    </defs>
                                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                                        <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 recharts-shape">
                                                    <path name="Website" color="brand-danger" cx="50" cy="50" fill="#e22837 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 50,92.4235
    A1.5,1.5,0,0,1,48.447,93.9226
    A43.95,43.95,0,0,1,16.9187,21.065
    A1.5,1.5,0,0,1,19.0746,20.9591
  L19.0746,20.9591
      A1.5,1.5,0,0,1,19.1768,23.0401
      A40.95,40.95,0,0,0,48.553,90.9244
      A1.5,1.5,0,0,1,50,92.4235Z">
                                                    </path>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                                        <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                            <path angle="0" cx="50" cy="50" orientation="outer" radius="45" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M50,95L23.5497,86.4058L7.2025,63.9058L7.2025,36.0942L23.5497,13.5942L50,5L76.4503,13.5942L92.7975,36.0942L92.7975,63.9058L76.4503,86.4058L50,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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" class="recharts-zIndex-layer_600">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                                    </g>
                                </svg>
                            </div>
                        </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 style="width: 100%; height: 100%;">
                    <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                        <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" class="recharts-zIndex-layer_-100">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                        <g class="recharts-layer recharts-shape">
                                            <path name="Server Connection" color="brand-danger" cx="50" cy="50" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 50,93.95
    A 43.95,43.95,0,
    1,1,
    50.0008,93.95
  L 50.0007,90.95
            A 40.95,40.95,0,
            1,0,
            50,90.95 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <defs>
                                        <clipPath id="recharts11-clip">
                                            <rect x="5" y="5" height="90" width="90">
                                            </rect>
                                        </clipPath>
                                    </defs>
                                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                                        <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 recharts-shape">
                                                    <path name="Server Connection" color="brand-danger" cx="50" cy="50" fill="#e22837 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 50,92.4235
    A1.5,1.5,0,0,1,48.447,93.9226
    A43.95,43.95,0,0,1,8.7071,65.0498
    A1.5,1.5,0,0,1,9.6529,63.1096
  L9.6529,63.1096
      A1.5,1.5,0,0,1,11.5257,64.0225
      A40.95,40.95,0,0,0,48.553,90.9244
      A1.5,1.5,0,0,1,50,92.4235Z">
                                                    </path>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                                        <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                            <path angle="0" cx="50" cy="50" orientation="outer" radius="45" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M50,95L23.5497,86.4058L7.2025,63.9058L7.2025,36.0942L23.5497,13.5942L50,5L76.4503,13.5942L92.7975,36.0942L92.7975,63.9058L76.4503,86.4058L50,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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" class="recharts-zIndex-layer_600">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                                    </g>
                                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                                    </g>
                                </svg>
                            </div>
                        </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%

#### 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 style="width: 100%; height: 100%;">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                <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" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                <g class="recharts-layer recharts-shape">
                                    <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.1954,121.4149
    A3,3,0,0,1,15.0393,120.2116
    A77.89,77.89,0,1,1,152.9607,120.2116
    A3,3,0,0,1,148.8046,121.4149
  L148.8046,121.4149
      A3,3,0,0,1,147.6485,117.4221
      A71.89,71.89,0,1,0,20.3515,117.4221
      A3,3,0,0,1,19.1954,121.4149Z">
                                    </path>
                                </g>
                            </g>
                            <defs>
                                <clipPath id="recharts12-clip">
                                    <rect x="5" y="5" height="158" width="158">
                                    </rect>
                                </clipPath>
                            </defs>
                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                <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 recharts-shape">
                                            <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.1954,121.4149
    A3,3,0,0,1,15.0393,120.2116
    A77.89,77.89,0,0,1,13.5834,50.7079
    A3,3,0,0,1,17.6855,49.3316
  L17.6855,49.3316
      A3,3,0,0,1,19.0078,53.2725
      A71.89,71.89,0,0,0,20.3515,117.4221
      A3,3,0,0,1,19.1954,121.4149Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                    <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M15.584,123.5L5.4328,92.2577L8.8665,59.5877L25.2916,31.1387L51.8678,11.8299L84,5L116.1322,11.8299L142.7084,31.1387L159.1335,59.5877L162.5672,92.2577L152.416,123.5L15.584,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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" class="recharts-zIndex-layer_600">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                            </g>
                        </svg>
                    </div>
                </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 style="width: 100%; height: 100%;">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                <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" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                <g class="recharts-layer recharts-shape">
                                    <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.1701,84
    A3,3,0,0,1,6.1725,80.8798
    A77.89,77.89,0,0,1,161.8275,80.8798
    A3,3,0,0,1,158.8299,84
  L158.8299,84
      A3,3,0,0,1,155.8323,81.1202
      A71.89,71.89,0,0,0,12.1677,81.1202
      A3,3,0,0,1,9.1701,84Z">
                                    </path>
                                </g>
                            </g>
                            <defs>
                                <clipPath id="recharts13-clip">
                                    <rect x="5" y="5" height="158" width="158">
                                    </rect>
                                </clipPath>
                            </defs>
                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                <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 recharts-shape">
                                            <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.1701,84
    A3,3,0,0,1,6.1725,80.8798
    A77.89,77.89,0,0,1,52.4487,12.7865
    A3,3,0,0,1,56.4533,14.4249
  L56.4533,14.4249
      A3,3,0,0,1,54.8792,18.2722
      A71.89,71.89,0,0,0,12.1677,81.1202
      A3,3,0,0,1,9.1701,84Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                    <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M5,84L8.8665,59.5877L20.0877,37.565L37.565,20.0877L59.5877,8.8665L84,5L108.4123,8.8665L130.435,20.0877L147.9123,37.565L159.1335,59.5877L163,84L5,84Z">
                                    </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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" class="recharts-zIndex-layer_600">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                            </g>
                        </svg>
                    </div>
                </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 style="width: 100%; height: 100%;">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                <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" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                <g class="recharts-layer recharts-shape">
                                    <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.11
    A 77.89,77.89,0,
    1,1,
    83.9986,6.11
  L 83.9987,12.11
            A 71.89,71.89,0,
            1,0,
            84,12.11 Z">
                                    </path>
                                </g>
                            </g>
                            <defs>
                                <clipPath id="recharts14-clip">
                                    <rect x="5" y="5" height="158" width="158">
                                    </rect>
                                </clipPath>
                            </defs>
                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                <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 recharts-shape">
                                            <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.1701
    A3,3,0,0,1,87.1202,6.1725
    A77.89,77.89,0,1,1,9.0175,62.9175
    A3,3,0,0,1,12.8325,60.8763
  L12.8325,60.8763
      A3,3,0,0,1,14.7935,64.5415
      A71.89,71.89,0,1,0,86.8798,12.1677
      A3,3,0,0,1,84,9.1701Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                    <path angle="0" cx="84" cy="84" orientation="outer" radius="79" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M84,5L130.435,20.0877L159.1335,59.5877L159.1335,108.4123L130.435,147.9123L84,163L37.565,147.9123L8.8665,108.4123L8.8665,59.5877L37.565,20.0877L84,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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" class="recharts-zIndex-layer_600">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                            </g>
                        </svg>
                    </div>
                </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

#### 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 style="width: 100%; height: 100%;">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                <div style="width: 0px; height: 0px; overflow: visible;">
                    <div width="60" height="60" class="recharts-wrapper" style="position: relative; cursor: default; width: 60px; height: 60px;">
                        <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="60" height="60" viewBox="0 0 60 60" style="width: 100%; height: 100%; display: block;">
                            <title>
                            </title>
                            <desc>
                            </desc>
                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                <g class="recharts-layer recharts-shape">
                                    <path color="brand-success" cx="30" cy="30" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 30,5.5
    A 24.5,24.5,0,
    1,1,
    29.9996,5.5
  L 29.9996,9.5
            A 20.5,20.5,0,
            1,0,
            30,9.5 Z">
                                    </path>
                                </g>
                            </g>
                            <defs>
                                <clipPath id="recharts15-clip">
                                    <rect x="5" y="5" height="50" width="50">
                                    </rect>
                                </clipPath>
                            </defs>
                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                <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 recharts-shape">
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                    <path angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M30,5L40.1684,7.1614L48.5786,13.2717L53.7764,22.2746L54.863,32.6132L51.6506,42.5L44.6946,50.2254L35.1978,54.4537L24.8022,54.4537L15.3054,50.2254L8.3494,42.5L5.137,32.6132L6.2236,22.2746L11.4214,13.2717L19.8316,7.1614L30,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" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="30" y1="5" x2="30.000000000000004" y2="-3">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="40.16841607689501" y1="7.16136355893498" x2="43.42230922150141" y2="-0.14700010220582982">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="48.57862063693486" y1="13.271734841028543" x2="54.52377924075401" y2="7.918689990157677">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="53.77641290737884" y1="22.27457514062631" x2="61.38486503774007" y2="19.80243918562673">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="54.86304738420684" y1="32.61321158169134" x2="62.81922254715302" y2="33.44943928783256">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="51.65063509461097" y1="42.5" x2="58.578838324886476" y2="46.49999999999999">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="44.69463130731184" y1="50.22542485937368" x2="49.396913325651624" y2="56.69756081437326">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="35.197792270444" y1="54.453690018345135" x2="36.861085796986075" y2="62.27887082421558">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="24.802207729556017" y1="54.45369001834514" x2="23.13891420301394" y2="62.27887082421559">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="15.305368692688175" y1="50.22542485937369" x2="10.60308667434839" y2="56.69756081437326">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="8.34936490538903" y1="42.5" x2="1.4211616751135239" y2="46.5">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="5.136952615793167" y1="32.613211581691324" x2="-2.819222547153025" y2="33.44943928783255">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="6.223587092621155" y1="22.27457514062633" x2="-1.3848650377400737" y2="19.802439185626753">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="11.421379363065142" y1="13.271734841028543" x2="5.47622075924599" y2="7.918689990157677">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="19.83158392310498" y1="7.161363558934987" x2="16.57769077849857" y2="-0.14700010220581916">
                                            </line>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                            </g>
                        </svg>
                    </div>
                </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 style="width: 100%; height: 100%;">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                <div style="width: 0px; height: 0px; overflow: visible;">
                    <div width="60" height="60" class="recharts-wrapper" style="position: relative; cursor: default; width: 60px; height: 60px;">
                        <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="60" height="60" viewBox="0 0 60 60" style="width: 100%; height: 100%; display: block;">
                            <title>
                            </title>
                            <desc>
                            </desc>
                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                <g class="recharts-layer recharts-shape">
                                    <path color="brand-success" cx="30" cy="30" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 30,5.5
    A 24.5,24.5,0,
    1,1,
    29.9996,5.5
  L 29.9996,9.5
            A 20.5,20.5,0,
            1,0,
            30,9.5 Z">
                                    </path>
                                </g>
                            </g>
                            <defs>
                                <clipPath id="recharts16-clip">
                                    <rect x="5" y="5" height="50" width="50">
                                    </rect>
                                </clipPath>
                            </defs>
                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                <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 recharts-shape">
                                            <path color="brand-success" cx="30" cy="30" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 30,7.5891
    A2,2,0,0,1,32.1778,5.597
    A24.5,24.5,0,0,1,52.2225,40.3155
    A2,2,0,0,1,49.4084,41.2055
  L49.4084,41.2055
      A2,2,0,0,1,48.5944,38.6313
      A20.5,20.5,0,0,0,31.8222,9.5811
      A2,2,0,0,1,30,7.5891Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                    <path angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M30,5L40.1684,7.1614L48.5786,13.2717L53.7764,22.2746L54.863,32.6132L51.6506,42.5L44.6946,50.2254L35.1978,54.4537L24.8022,54.4537L15.3054,50.2254L8.3494,42.5L5.137,32.6132L6.2236,22.2746L11.4214,13.2717L19.8316,7.1614L30,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" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="30" y1="5" x2="30.000000000000004" y2="-3">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="40.16841607689501" y1="7.16136355893498" x2="43.42230922150141" y2="-0.14700010220582982">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="48.57862063693486" y1="13.271734841028543" x2="54.52377924075401" y2="7.918689990157677">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="53.77641290737884" y1="22.27457514062631" x2="61.38486503774007" y2="19.80243918562673">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="54.86304738420684" y1="32.61321158169134" x2="62.81922254715302" y2="33.44943928783256">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="51.65063509461097" y1="42.5" x2="58.578838324886476" y2="46.49999999999999">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="44.69463130731184" y1="50.22542485937368" x2="49.396913325651624" y2="56.69756081437326">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="35.197792270444" y1="54.453690018345135" x2="36.861085796986075" y2="62.27887082421558">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="24.802207729556017" y1="54.45369001834514" x2="23.13891420301394" y2="62.27887082421559">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="15.305368692688175" y1="50.22542485937369" x2="10.60308667434839" y2="56.69756081437326">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="8.34936490538903" y1="42.5" x2="1.4211616751135239" y2="46.5">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="5.136952615793167" y1="32.613211581691324" x2="-2.819222547153025" y2="33.44943928783255">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="6.223587092621155" y1="22.27457514062633" x2="-1.3848650377400737" y2="19.802439185626753">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="11.421379363065142" y1="13.271734841028543" x2="5.47622075924599" y2="7.918689990157677">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="19.83158392310498" y1="7.161363558934987" x2="16.57769077849857" y2="-0.14700010220581916">
                                            </line>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                            </g>
                        </svg>
                    </div>
                </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 style="width: 100%; height: 100%;">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                <div style="width: 0px; height: 0px; overflow: visible;">
                    <div width="60" height="60" class="recharts-wrapper" style="position: relative; cursor: default; width: 60px; height: 60px;">
                        <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="60" height="60" viewBox="0 0 60 60" style="width: 100%; height: 100%; display: block;">
                            <title>
                            </title>
                            <desc>
                            </desc>
                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                <g class="recharts-layer recharts-shape">
                                    <path color="brand-success" cx="30" cy="30" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 30,5.5
    A 24.5,24.5,0,
    1,1,
    29.9996,5.5
  L 29.9996,9.5
            A 20.5,20.5,0,
            1,0,
            30,9.5 Z">
                                    </path>
                                </g>
                            </g>
                            <defs>
                                <clipPath id="recharts17-clip">
                                    <rect x="5" y="5" height="50" width="50">
                                    </rect>
                                </clipPath>
                            </defs>
                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                <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 recharts-shape">
                                            <path color="brand-success" cx="30" cy="30" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 30,7.5891
    A2,2,0,0,1,32.1778,5.597
    A24.5,24.5,0,1,1,9.9553,44.0875
    A2,2,0,0,1,10.5916,41.2055
  L10.5916,41.2055
      A2,2,0,0,1,13.2279,41.7875
      A20.5,20.5,0,1,0,31.8222,9.5811
      A2,2,0,0,1,30,7.5891Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                    <path angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M30,5L40.1684,7.1614L48.5786,13.2717L53.7764,22.2746L54.863,32.6132L51.6506,42.5L44.6946,50.2254L35.1978,54.4537L24.8022,54.4537L15.3054,50.2254L8.3494,42.5L5.137,32.6132L6.2236,22.2746L11.4214,13.2717L19.8316,7.1614L30,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" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="30" y1="5" x2="30.000000000000004" y2="-3">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="40.16841607689501" y1="7.16136355893498" x2="43.42230922150141" y2="-0.14700010220582982">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="48.57862063693486" y1="13.271734841028543" x2="54.52377924075401" y2="7.918689990157677">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="53.77641290737884" y1="22.27457514062631" x2="61.38486503774007" y2="19.80243918562673">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="54.86304738420684" y1="32.61321158169134" x2="62.81922254715302" y2="33.44943928783256">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="51.65063509461097" y1="42.5" x2="58.578838324886476" y2="46.49999999999999">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="44.69463130731184" y1="50.22542485937368" x2="49.396913325651624" y2="56.69756081437326">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="35.197792270444" y1="54.453690018345135" x2="36.861085796986075" y2="62.27887082421558">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="24.802207729556017" y1="54.45369001834514" x2="23.13891420301394" y2="62.27887082421559">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="15.305368692688175" y1="50.22542485937369" x2="10.60308667434839" y2="56.69756081437326">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="8.34936490538903" y1="42.5" x2="1.4211616751135239" y2="46.5">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="5.136952615793167" y1="32.613211581691324" x2="-2.819222547153025" y2="33.44943928783255">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="6.223587092621155" y1="22.27457514062633" x2="-1.3848650377400737" y2="19.802439185626753">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="11.421379363065142" y1="13.271734841028543" x2="5.47622075924599" y2="7.918689990157677">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="19.83158392310498" y1="7.161363558934987" x2="16.57769077849857" y2="-0.14700010220581916">
                                            </line>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                            </g>
                        </svg>
                    </div>
                </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 style="width: 100%; height: 100%;">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                <div style="width: 0px; height: 0px; overflow: visible;">
                    <div width="60" height="60" class="recharts-wrapper" style="position: relative; cursor: default; width: 60px; height: 60px;">
                        <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="60" height="60" viewBox="0 0 60 60" style="width: 100%; height: 100%; display: block;">
                            <title>
                            </title>
                            <desc>
                            </desc>
                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                <g class="recharts-layer recharts-shape">
                                    <path color="brand-success" cx="30" cy="30" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 30,5.5
    A 24.5,24.5,0,
    1,1,
    29.9996,5.5
  L 29.9996,9.5
            A 20.5,20.5,0,
            1,0,
            30,9.5 Z">
                                    </path>
                                </g>
                            </g>
                            <defs>
                                <clipPath id="recharts18-clip">
                                    <rect x="5" y="5" height="50" width="50">
                                    </rect>
                                </clipPath>
                            </defs>
                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                <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 recharts-shape">
                                            <path color="brand-success" cx="30" cy="30" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 30,5.5
    A 24.5,24.5,0,
    1,1,
    29.9996,5.5
  L 29.9996,9.5
            A 20.5,20.5,0,
            1,0,
            30,9.5 Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                    <path angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M30,5L40.1684,7.1614L48.5786,13.2717L53.7764,22.2746L54.863,32.6132L51.6506,42.5L44.6946,50.2254L35.1978,54.4537L24.8022,54.4537L15.3054,50.2254L8.3494,42.5L5.137,32.6132L6.2236,22.2746L11.4214,13.2717L19.8316,7.1614L30,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" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="30" y1="5" x2="30.000000000000004" y2="-3">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="40.16841607689501" y1="7.16136355893498" x2="43.42230922150141" y2="-0.14700010220582982">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="48.57862063693486" y1="13.271734841028543" x2="54.52377924075401" y2="7.918689990157677">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="53.77641290737884" y1="22.27457514062631" x2="61.38486503774007" y2="19.80243918562673">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="54.86304738420684" y1="32.61321158169134" x2="62.81922254715302" y2="33.44943928783256">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="51.65063509461097" y1="42.5" x2="58.578838324886476" y2="46.49999999999999">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="44.69463130731184" y1="50.22542485937368" x2="49.396913325651624" y2="56.69756081437326">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="35.197792270444" y1="54.453690018345135" x2="36.861085796986075" y2="62.27887082421558">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="24.802207729556017" y1="54.45369001834514" x2="23.13891420301394" y2="62.27887082421559">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="15.305368692688175" y1="50.22542485937369" x2="10.60308667434839" y2="56.69756081437326">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="8.34936490538903" y1="42.5" x2="1.4211616751135239" y2="46.5">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="5.136952615793167" y1="32.613211581691324" x2="-2.819222547153025" y2="33.44943928783255">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="6.223587092621155" y1="22.27457514062633" x2="-1.3848650377400737" y2="19.802439185626753">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="11.421379363065142" y1="13.271734841028543" x2="5.47622075924599" y2="7.918689990157677">
                                            </line>
                                        </g>
                                        <g class="recharts-layer recharts-polar-angle-axis-tick">
                                            <line class="recharts-polar-angle-axis-tick-line" angle="0" cx="30" cy="30" orientation="outer" radius="25" fill="none" x1="19.83158392310498" y1="7.161363558934987" x2="16.57769077849857" y2="-0.14700010220581916">
                                            </line>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_600">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                            </g>
                        </svg>
                    </div>
                </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 data 1%

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 style="width: 100%; height: 100%;">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 1px; min-height: 1px;">
                <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" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                <g class="recharts-layer recharts-shape">
                                    <path color="brand-danger" cx="59" cy="59" fill="#eee" class="recharts-sector recharts-radial-bar-background-sector undefined" d="M 59,6.29
    A 52.71,52.71,0,
    1,1,
    58.9991,6.29
  L 58.9992,12.29
            A 46.71,46.71,0,
            1,0,
            59,12.29 Z">
                                    </path>
                                </g>
                            </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" class="recharts-zIndex-layer_100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                                <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 recharts-shape">
                                            <path color="brand-danger" cx="59" cy="59" fill="#e22837 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 59,6.29
    A 52.71,52.71,0,
    0,1,
    62.3097,6.394
  L 61.9329,12.3822
            A 46.71,46.71,0,
            0,0,
            59,12.29 Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_400">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_500">
                                <g class="recharts-layer recharts-polar-angle-axis angleAxis">
                                    <path angle="0" cx="59" cy="59" orientation="outer" radius="54" fill="none" class="recharts-polygon recharts-polar-angle-axis-line" d="M59,5L90.7404,15.3131L110.3571,42.3131L110.3571,75.6869L90.7404,102.6869L59,113L27.2596,102.6869L7.6429,75.6869L7.6429,42.3131L27.2596,15.3131L59,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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" angle="0" 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" class="recharts-zIndex-layer_600">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1000">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_1200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_2000">
                            </g>
                        </svg>
                    </div>
                </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 |