# PieChart

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

## PieChart

> Note: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.

### Example: Example 1

Simple PieChart Basistarif
Diesel
Maut
Zuschläge

#### React (tsx)

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

type CustomData = {
    name: string;
    costs: number;
};

export default () => (
    <>
        <label>Simple PieChart</label>
        <div className='panel panel-default panel-body margin-bottom-0 width-100% height-500'>
            <PieChart data={data} dataKey='costs' dataUnit='€' filled />
        </div>
    </>
);

const data: CustomData[] = [
    {
        name: 'Basistarif',
        costs: 46.8,
    },
    {
        name: 'Diesel',
        costs: 22.0,
    },
    {
        name: 'Maut',
        costs: 12.4,
    },
    {
        name: 'Zuschläge',
        costs: 3.88,
    },
];
```

#### HTML (html)

```html
<label>Simple PieChart</label>
<div class="panel panel-default panel-body margin-bottom-0 width-100% height-500">
    <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
        <div style="width: 0px; height: 0px; overflow: visible;">
            <div width="876" height="468" class="recharts-wrapper" style="position: relative; cursor: default; width: 876px; height: 468px;">
                <div class="recharts-legend-wrapper" style="position: absolute; width: auto; height: auto; right: 5px; top: 5px;">
                    <ul class="recharts-default-legend" style="padding: 0px; margin: 0px; text-align: left;">
                        <li class="recharts-legend-item legend-item-0" style="display: block; margin-right: 10px;">
                            <svg aria-label="Basistarif legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                <title>
                                </title>
                                <desc>
                                </desc>
                                <path fill="#ef7186 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
                                </path>
                            </svg>
                            <span class="recharts-legend-item-text" style="color: rgb(239, 113, 134);">
                                <span class="text-color-darker">Basistarif</span>
                            </span>
                        </li>
                        <li class="recharts-legend-item legend-item-1" style="display: block; margin-right: 10px;">
                            <svg aria-label="Diesel legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                <title>
                                </title>
                                <desc>
                                </desc>
                                <path fill="#e878b6 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
                                </path>
                            </svg>
                            <span class="recharts-legend-item-text" style="color: rgb(232, 120, 182);">
                                <span class="text-color-darker">Diesel</span>
                            </span>
                        </li>
                        <li class="recharts-legend-item legend-item-2" style="display: block; margin-right: 10px;">
                            <svg aria-label="Maut legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                <title>
                                </title>
                                <desc>
                                </desc>
                                <path fill="#dc82e9 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
                                </path>
                            </svg>
                            <span class="recharts-legend-item-text" style="color: rgb(220, 130, 233);">
                                <span class="text-color-darker">Maut</span>
                            </span>
                        </li>
                        <li class="recharts-legend-item legend-item-3" style="display: block; margin-right: 10px;">
                            <svg aria-label="Zuschläge legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                <title>
                                </title>
                                <desc>
                                </desc>
                                <path fill="#c08eeb " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
                                </path>
                            </svg>
                            <span class="recharts-legend-item-text" style="color: rgb(192, 142, 235);">
                                <span class="text-color-darker">Zuschläge</span>
                            </span>
                        </li>
                    </ul>
                </div>
                <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
                    <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
                        <p class="recharts-tooltip-label" style="margin: 0px;">
                        </p>
                    </div>
                </div>
                <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="876" height="468" viewBox="0 0 876 468" style="width: 100%; height: 100%; display: block;">
                    <title>
                    </title>
                    <desc>
                    </desc>
                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                    </g>
                    <defs>
                        <clipPath id="recharts1-clip">
                            <rect x="5" y="5" height="458" width="780.859375">
                            </rect>
                        </clipPath>
                    </defs>
                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                        <g class="recharts-layer recharts-pie" tabindex="0">
                            <g class="recharts-layer">
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                    </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>
```

#### Props: PieChart

### PieChart

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| width | Number | — | The width of chart container. |
| height | Number | — | The height of chart container. |
| innerRadius | String \| Number | 60 | The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |
| outerRadius | String \| Number | 80 | The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |
| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the PieChart. |
| dataUnit | String \| Number | — | The unit of data displayed in the PieChart. |
| nameKey | String | name | The key of each sector name. |
| color | Function | — | Overwrite the way the color is taken from the data input array. Use this, if you had to rename the color prop in your data or if you want to provide the corresponding color in another way. Take the color name from the charts colors page. |
| filled | Boolean | false | Set to "true" if the chart should be filled. This will set the "innerRadius" and the "paddingAngle" to 0. |
| labels | Function \| Boolean | true | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If set a function, the function will be called to render customized label. |
| innerLabels | Boolean | false | Set to "true" if the built in inner label shall be used. This makes only sense when labels are enabled, and the chart is filled or the inner radius is set to 0. |
| paddingAngle | Number | 3 | The angle between two sectors. |
| pieOptions | Object | — | Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie |
| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
| legend | Legend \| Boolean | <Legend /> | Shows the provided Legend component otherwise shows nothing. |
| ... |  | — | Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart |

#### Props: Legend

### Legend

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| iconType | String | square | Defines the type of the leading icon. |
| iconSize | String | 12 | Defines the size of the leading icon. |
| layout | String | vertical | Defines the layout of the legend. |
| align | String | right | Defines the alignment of the legend relative to the chart. |
| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |

### Example: Example 2

PieChart with custom color Basistarif
Diesel
Maut
Zuschläge

Filled PieChart with inner labels Basistarif
Diesel
Maut

#### React (tsx)

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

type CustomData = {
    label: string;
    color: string;
    costs: number;
};

export default () => (
    <div className='display-flex flex-column flex-row-lg flex-wrap gap-15'>
        <div className='flex-1-1 max-width-500'>
            <label>PieChart with custom color</label>
            <div className='panel panel-default panel-body margin-bottom-0 height-300'>
                <PieChart data={data} dataKey='costs' nameKey='label' dataUnit='%' innerRadius={85} />
            </div>
        </div>
        <div className='flex-1-1 max-width-500'>
            <label>Filled PieChart with inner labels</label>
            <div className='panel panel-default panel-body margin-bottom-0 height-300'>
                <PieChart
                    data={data.filter(entry => entry.costs > 10)}
                    dataKey='costs'
                    dataUnit='%'
                    nameKey='label'
                    filled
                    innerLabels
                    color={entry => entry.color}
                />
            </div>
        </div>
    </div>
);

const data: CustomData[] = [
    {
        label: 'Basistarif',
        color: 'color-coldplay-fountain',
        costs: 46.8,
    },
    {
        label: 'Diesel',
        color: 'color-coldplay-turquoise',
        costs: 22.0,
    },
    {
        label: 'Maut',
        color: 'color-coldplay-moos',
        costs: 12.4,
    },
    {
        label: 'Zuschläge',
        color: 'brand-warning',
        costs: 3.88,
    },
];
```

#### HTML (html)

```html
<div class="display-flex flex-column flex-row-lg flex-wrap gap-15">
    <div class="flex-1-1 max-width-500">
        <label>PieChart with custom color</label>
        <div class="panel panel-default panel-body margin-bottom-0 height-300">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
                <div style="width: 0px; height: 0px; overflow: visible;">
                    <div width="403" height="268" class="recharts-wrapper" style="position: relative; cursor: default; width: 403px; height: 268px;">
                        <div class="recharts-legend-wrapper" style="position: absolute; width: auto; height: auto; right: 5px; top: 5px;">
                            <ul class="recharts-default-legend" style="padding: 0px; margin: 0px; text-align: left;">
                                <li class="recharts-legend-item legend-item-0" style="display: block; margin-right: 10px;">
                                    <svg aria-label="Basistarif legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                        <title>
                                        </title>
                                        <desc>
                                        </desc>
                                        <path fill="#67abc5 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
                                        </path>
                                    </svg>
                                    <span class="recharts-legend-item-text" style="color: rgb(103, 171, 197);">
                                        <span class="text-color-darker">Basistarif</span>
                                    </span>
                                </li>
                                <li class="recharts-legend-item legend-item-1" style="display: block; margin-right: 10px;">
                                    <svg aria-label="Diesel legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                        <title>
                                        </title>
                                        <desc>
                                        </desc>
                                        <path fill="#4eccc1 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
                                        </path>
                                    </svg>
                                    <span class="recharts-legend-item-text" style="color: rgb(78, 204, 193);">
                                        <span class="text-color-darker">Diesel</span>
                                    </span>
                                </li>
                                <li class="recharts-legend-item legend-item-2" style="display: block; margin-right: 10px;">
                                    <svg aria-label="Maut legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                        <title>
                                        </title>
                                        <desc>
                                        </desc>
                                        <path fill="#a1daa3 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
                                        </path>
                                    </svg>
                                    <span class="recharts-legend-item-text" style="color: rgb(161, 218, 163);">
                                        <span class="text-color-darker">Maut</span>
                                    </span>
                                </li>
                                <li class="recharts-legend-item legend-item-3" style="display: block; margin-right: 10px;">
                                    <svg aria-label="Zuschläge legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                        <title>
                                        </title>
                                        <desc>
                                        </desc>
                                        <path fill="#ff8e3c " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
                                        </path>
                                    </svg>
                                    <span class="recharts-legend-item-text" style="color: rgb(255, 142, 60);">
                                        <span class="text-color-darker">Zuschläge</span>
                                    </span>
                                </li>
                            </ul>
                        </div>
                        <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
                            <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
                                <p class="recharts-tooltip-label" style="margin: 0px;">
                                </p>
                            </div>
                        </div>
                        <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="403" height="268" viewBox="0 0 403 268" style="width: 100%; height: 100%; display: block;">
                            <title>
                            </title>
                            <desc>
                            </desc>
                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                            </g>
                            <defs>
                                <clipPath id="recharts2-clip">
                                    <rect x="5" y="5" height="258" width="307.859375">
                                    </rect>
                                </clipPath>
                            </defs>
                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                                <g class="recharts-layer recharts-pie" tabindex="0">
                                    <g class="recharts-layer">
                                        <g class="recharts-layer recharts-pie-sector" tabindex="-1">
                                            <g class="recharts-layer recharts-shape">
                                                <path cx="158.9296875" cy="134" fill="#67abc5 " stroke="#fff" name="Basistarif" color="color-coldplay-fountain" tabindex="-1" data-recharts-item-index="0" data-recharts-item-id="recharts-pie-:r1:" class="recharts-sector" d="M 262.1297,134
    A 103.2,103.2,0,
    0,0,
    98.4489,50.3799
  L 109.1151,65.1269
            A 85,85,0,
            0,1,
            243.9297,134 Z">
                                                </path>
                                            </g>
                                        </g>
                                        <g class="recharts-layer recharts-pie-sector" tabindex="-1">
                                            <g class="recharts-layer recharts-shape">
                                                <path cx="158.9296875" cy="134" fill="#4eccc1 " stroke="#fff" name="Diesel" color="color-coldplay-turquoise" tabindex="-1" data-recharts-item-index="1" data-recharts-item-id="recharts-pie-:r1:" class="recharts-sector" d="M 94.1554,53.6599
    A 103.2,103.2,0,
    0,0,
    56.7468,148.4531
  L 74.7674,145.9042
            A 85,85,0,
            0,1,
            105.5788,67.8284 Z">
                                                </path>
                                            </g>
                                        </g>
                                        <g class="recharts-layer recharts-pie-sector" tabindex="-1">
                                            <g class="recharts-layer recharts-shape">
                                                <path cx="158.9296875" cy="134" fill="#a1daa3 " stroke="#fff" name="Maut" color="color-coldplay-moos" tabindex="-1" data-recharts-item-index="2" data-recharts-item-id="recharts-pie-:r1:" class="recharts-sector" d="M 57.6432,153.7811
    A 103.2,103.2,0,
    0,0,
    85.1996,206.2089
  L 98.2024,193.4744
            A 85,85,0,
            0,1,
            75.5058,150.2926 Z">
                                                </path>
                                            </g>
                                        </g>
                                        <g class="recharts-layer recharts-pie-sector" tabindex="-1">
                                            <g class="recharts-layer recharts-shape">
                                                <path cx="158.9296875" cy="134" fill="#ff8e3c " stroke="#fff" name="Zuschläge" color="brand-warning" tabindex="-1" data-recharts-item-index="3" data-recharts-item-id="recharts-pie-:r1:" class="recharts-sector" d="M 89.0798,209.9686
    A 103.2,103.2,0,
    0,0,
    103.996,221.3644
  L 113.6839,205.9571
            A 85,85,0,
            0,1,
            101.3983,196.5711 Z">
                                                </path>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                            </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="flex-1-1 max-width-500">
        <label>Filled PieChart with inner labels</label>
        <div class="panel panel-default panel-body margin-bottom-0 height-300">
            <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
                <div style="width: 0px; height: 0px; overflow: visible;">
                    <div width="426" height="268" class="recharts-wrapper" style="position: relative; cursor: default; width: 426px; height: 268px;">
                        <div class="recharts-legend-wrapper" style="position: absolute; width: auto; height: auto; right: 5px; top: 5px;">
                            <ul class="recharts-default-legend" style="padding: 0px; margin: 0px; text-align: left;">
                                <li class="recharts-legend-item legend-item-0" style="display: block; margin-right: 10px;">
                                    <svg aria-label="Basistarif legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                        <title>
                                        </title>
                                        <desc>
                                        </desc>
                                        <path fill="#67abc5 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
                                        </path>
                                    </svg>
                                    <span class="recharts-legend-item-text" style="color: rgb(103, 171, 197);">
                                        <span class="text-color-darker">Basistarif</span>
                                    </span>
                                </li>
                                <li class="recharts-legend-item legend-item-1" style="display: block; margin-right: 10px;">
                                    <svg aria-label="Diesel legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                        <title>
                                        </title>
                                        <desc>
                                        </desc>
                                        <path fill="#4eccc1 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
                                        </path>
                                    </svg>
                                    <span class="recharts-legend-item-text" style="color: rgb(78, 204, 193);">
                                        <span class="text-color-darker">Diesel</span>
                                    </span>
                                </li>
                                <li class="recharts-legend-item legend-item-2" style="display: block; margin-right: 10px;">
                                    <svg aria-label="Maut legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                        <title>
                                        </title>
                                        <desc>
                                        </desc>
                                        <path fill="#a1daa3 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
                                        </path>
                                    </svg>
                                    <span class="recharts-legend-item-text" style="color: rgb(161, 218, 163);">
                                        <span class="text-color-darker">Maut</span>
                                    </span>
                                </li>
                            </ul>
                        </div>
                        <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
                            <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
                                <p class="recharts-tooltip-label" style="margin: 0px;">
                                </p>
                            </div>
                        </div>
                        <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="426" height="268" viewBox="0 0 426 268" style="width: 100%; height: 100%; display: block;">
                            <title>
                            </title>
                            <desc>
                            </desc>
                            <g tabindex="-1" class="recharts-zIndex-layer_-100">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_-50">
                            </g>
                            <defs>
                                <clipPath id="recharts3-clip">
                                    <rect x="5" y="5" height="258" width="335.921875">
                                    </rect>
                                </clipPath>
                            </defs>
                            <g tabindex="-1" class="recharts-zIndex-layer_100">
                                <g class="recharts-layer recharts-pie" tabindex="0">
                                    <g class="recharts-layer">
                                        <g class="recharts-layer recharts-pie-sector" tabindex="-1">
                                            <g class="recharts-layer recharts-shape">
                                                <path cx="172.9609375" cy="134" fill="#67abc5 " stroke="#fff" name="Basistarif" color="color-coldplay-fountain" tabindex="-1" data-recharts-item-index="0" data-recharts-item-id="recharts-pie-:r2:" class="recharts-sector" d="M 276.1609,134
    A 103.2,103.2,0,
    0,0,
    98.1764,62.8838
  L 172.9609,134 Z">
                                                </path>
                                            </g>
                                        </g>
                                        <g class="recharts-layer recharts-pie-sector" tabindex="-1">
                                            <g class="recharts-layer recharts-shape">
                                                <path cx="172.9609375" cy="134" fill="#4eccc1 " stroke="#fff" name="Diesel" color="color-coldplay-turquoise" tabindex="-1" data-recharts-item-index="1" data-recharts-item-id="recharts-pie-:r2:" class="recharts-sector" d="M 98.1764,62.8838
    A 103.2,103.2,0,
    0,0,
    76.3462,170.2745
  L 172.9609,134 Z">
                                                </path>
                                            </g>
                                        </g>
                                        <g class="recharts-layer recharts-pie-sector" tabindex="-1">
                                            <g class="recharts-layer recharts-shape">
                                                <path cx="172.9609375" cy="134" fill="#a1daa3 " stroke="#fff" name="Maut" color="color-coldplay-moos" tabindex="-1" data-recharts-item-index="2" data-recharts-item-id="recharts-pie-:r2:" class="recharts-sector" d="M 76.3462,170.2745
    A 103.2,103.2,0,
    0,0,
    116.3465,220.2847
  L 172.9609,134 Z">
                                                </path>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_200">
                            </g>
                            <g tabindex="-1" class="recharts-zIndex-layer_300">
                            </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>
```

#### Props: PieChart

### PieChart

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| width | Number | — | The width of chart container. |
| height | Number | — | The height of chart container. |
| innerRadius | String \| Number | 60 | The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |
| outerRadius | String \| Number | 80 | The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |
| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the PieChart. |
| dataUnit | String \| Number | — | The unit of data displayed in the PieChart. |
| nameKey | String | name | The key of each sector name. |
| color | Function | — | Overwrite the way the color is taken from the data input array. Use this, if you had to rename the color prop in your data or if you want to provide the corresponding color in another way. Take the color name from the charts colors page. |
| filled | Boolean | false | Set to "true" if the chart should be filled. This will set the "innerRadius" and the "paddingAngle" to 0. |
| labels | Function \| Boolean | true | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If set a function, the function will be called to render customized label. |
| innerLabels | Boolean | false | Set to "true" if the built in inner label shall be used. This makes only sense when labels are enabled, and the chart is filled or the inner radius is set to 0. |
| paddingAngle | Number | 3 | The angle between two sectors. |
| pieOptions | Object | — | Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie |
| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
| legend | Legend \| Boolean | <Legend /> | Shows the provided Legend component otherwise shows nothing. |
| ... |  | — | Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart |

#### Props: Legend

### Legend

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| iconType | String | square | Defines the type of the leading icon. |
| iconSize | String | 12 | Defines the size of the leading icon. |
| layout | String | vertical | Defines the layout of the legend. |
| align | String | right | Defines the alignment of the legend relative to the chart. |
| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |

### Example: Basistarif

PieChart with custom legend Basistarif
Diesel
Maut
Zuschläge

#### React (tsx)

```tsx
import { useState } from 'react';

import classNames from '@rio-cloud/rio-uikit/classNames';
import PieChart, { type PieSectorDataItem } from '@rio-cloud/rio-uikit/PieChart';
import Sector from '@rio-cloud/rio-uikit/Sector';
import Legend, { type LegendPayload } from '@rio-cloud/rio-uikit/Legend';

type CustomData = {
    label: string;
    color: string;
    costs: number;
};

export default () => {
    const [activeIndex, setActiveIndex] = useState<number>(0);

    const handleLegendMouseEnter = (_payload: LegendPayload, index: number) => {
        setActiveIndex(index);
    };

    const handlePieMouseEnter = (_: unknown, index: number) => {
        setActiveIndex(index);
    };

    const renderShape = (props: PieSectorDataItem, index: number) => {
        const {
            cx,
            cy,
            midAngle = 0,
            innerRadius,
            outerRadius,
            startAngle,
            endAngle,
            fill,
            payload,
            percent = 0,
            value,
        } = props;

        const RADIAN = Math.PI / 180;
        const sin = Math.sin(-RADIAN * midAngle);
        const cos = Math.cos(-RADIAN * midAngle);
        const sx = cx + (outerRadius + 10) * cos;
        const sy = cy + (outerRadius + 10) * sin;
        const mx = cx + (outerRadius + 30) * cos;
        const my = cy + (outerRadius + 30) * sin;
        const ex = mx + (cos >= 0 ? 1 : -1) * 22;
        const ey = my;
        const textAnchor = cos >= 0 ? 'start' : 'end';

        if (index !== activeIndex) {
            return (
                <Sector
                    cx={cx}
                    cy={cy}
                    innerRadius={innerRadius}
                    outerRadius={outerRadius}
                    startAngle={startAngle}
                    endAngle={endAngle}
                    fill={fill}
                />
            );
        }

        return (
            <g>
                <text x={cx} y={cy} dy={8} textAnchor='middle' fill={fill}>
                    {payload?.name}
                </text>
                <Sector
                    cx={cx}
                    cy={cy}
                    innerRadius={innerRadius}
                    outerRadius={outerRadius}
                    startAngle={startAngle}
                    endAngle={endAngle}
                    fill={fill}
                />
                <Sector
                    cx={cx}
                    cy={cy}
                    startAngle={startAngle}
                    endAngle={endAngle}
                    innerRadius={outerRadius + 6}
                    outerRadius={outerRadius + 10}
                    fill={fill}
                />
                <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill='none' />
                <circle cx={ex} cy={ey} r={2} fill={fill} stroke='none' />
                <text
                    x={ex + (cos >= 0 ? 1 : -1) * 12}
                    y={ey}
                    textAnchor={textAnchor}
                    fill='#333'
                >{`${payload?.label}:${value} €`}</text>
                <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill='#999'>
                    {`(Rate ${(percent * 100).toFixed(2)}%)`}
                </text>
            </g>
        );
    };

    return (
        <div className='max-width-600'>
            <label>PieChart with custom legend</label>
            <div className='panel panel-default panel-body margin-bottom-0 height-400'>
                <PieChart
                    data={data}
                    dataKey='costs'
                    nameKey='label'
                    dataUnit='%'
                    innerRadius={90}
                    outerRadius={110}
                    pieOptions={{
                        label: false,
                        labelLine: false,
                        shape: renderShape,
                        onMouseEnter: handlePieMouseEnter,
                    }}
                    legend={
                        <Legend
                            iconType='square'
                            iconSize={0}
                            onMouseEnter={handleLegendMouseEnter}
                            formatter={(value: string | number, entry: LegendPayload, index: number) => {
                                const isActive = index === activeIndex;

                                const legendWrapperClasses = classNames(
                                    'display-inline-flex',
                                    'align-items-center',
                                    'gap-5',
                                    'cursor-pointer',
                                    'padding-y-3 padding-x-5',
                                    'rounded',
                                    isActive && 'bg-lightest'
                                );

                                return (
                                    <span className={legendWrapperClasses}>
                                        <span
                                            className='rounded height-15 width-15'
                                            style={{ backgroundColor: entry.color }}
                                        />
                                        <span className='text-color-dark'>{value}</span>
                                    </span>
                                );
                            }}
                        />
                    }
                />
            </div>
        </div>
    );
};

const data: CustomData[] = [
    {
        label: 'Basistarif',
        color: 'color-coldplay-fountain',
        costs: 46.8,
    },
    {
        label: 'Diesel',
        color: 'color-coldplay-turquoise',
        costs: 22.0,
    },
    {
        label: 'Maut',
        color: 'color-coldplay-moos',
        costs: 12.4,
    },
    {
        label: 'Zuschläge',
        color: 'brand-warning',
        costs: 3.88,
    },
];
```

#### HTML (html)

```html
<div class="max-width-600">
    <label>PieChart with custom legend</label>
    <div class="panel panel-default panel-body margin-bottom-0 height-400">
        <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
            <div style="width: 0px; height: 0px; overflow: visible;">
                <div width="568" height="368" class="recharts-wrapper" style="position: relative; cursor: default; width: 568px; height: 368px;">
                    <div class="recharts-legend-wrapper" style="position: absolute; width: auto; height: auto; right: 5px; top: 5px;">
                        <ul class="recharts-default-legend" style="padding: 0px; margin: 0px; text-align: left;">
                            <li class="recharts-legend-item legend-item-0" style="display: block; margin-right: 10px;">
                                <svg aria-label="Basistarif legend icon" class="recharts-surface" width="0" height="0" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                    <title>
                                    </title>
                                    <desc>
                                    </desc>
                                    <path fill="#67abc5 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M-16,-16h32v32h-32Z">
                                    </path>
                                </svg>
                                <span class="recharts-legend-item-text" style="color: rgb(103, 171, 197);">
                                    <span class="display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded bg-lightest">
                                        <span class="rounded height-15 width-15" style="background-color: rgb(103, 171, 197);">
                                        </span>
                                        <span class="text-color-dark">Basistarif</span>
                                    </span>
                                </span>
                            </li>
                            <li class="recharts-legend-item legend-item-1" style="display: block; margin-right: 10px;">
                                <svg aria-label="Diesel legend icon" class="recharts-surface" width="0" height="0" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                    <title>
                                    </title>
                                    <desc>
                                    </desc>
                                    <path fill="#4eccc1 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M-16,-16h32v32h-32Z">
                                    </path>
                                </svg>
                                <span class="recharts-legend-item-text" style="color: rgb(78, 204, 193);">
                                    <span class="display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded">
                                        <span class="rounded height-15 width-15" style="background-color: rgb(78, 204, 193);">
                                        </span>
                                        <span class="text-color-dark">Diesel</span>
                                    </span>
                                </span>
                            </li>
                            <li class="recharts-legend-item legend-item-2" style="display: block; margin-right: 10px;">
                                <svg aria-label="Maut legend icon" class="recharts-surface" width="0" height="0" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                    <title>
                                    </title>
                                    <desc>
                                    </desc>
                                    <path fill="#a1daa3 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M-16,-16h32v32h-32Z">
                                    </path>
                                </svg>
                                <span class="recharts-legend-item-text" style="color: rgb(161, 218, 163);">
                                    <span class="display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded">
                                        <span class="rounded height-15 width-15" style="background-color: rgb(161, 218, 163);">
                                        </span>
                                        <span class="text-color-dark">Maut</span>
                                    </span>
                                </span>
                            </li>
                            <li class="recharts-legend-item legend-item-3" style="display: block; margin-right: 10px;">
                                <svg aria-label="Zuschläge legend icon" class="recharts-surface" width="0" height="0" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                    <title>
                                    </title>
                                    <desc>
                                    </desc>
                                    <path fill="#ff8e3c " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M-16,-16h32v32h-32Z">
                                    </path>
                                </svg>
                                <span class="recharts-legend-item-text" style="color: rgb(255, 142, 60);">
                                    <span class="display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded">
                                        <span class="rounded height-15 width-15" style="background-color: rgb(255, 142, 60);">
                                        </span>
                                        <span class="text-color-dark">Zuschläge</span>
                                    </span>
                                </span>
                            </li>
                        </ul>
                    </div>
                    <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
                        <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
                            <p class="recharts-tooltip-label" style="margin: 0px;">
                            </p>
                        </div>
                    </div>
                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="568" height="368" viewBox="0 0 568 368" 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>
                        <defs>
                            <clipPath id="recharts4-clip">
                                <rect x="5" y="5" height="358" width="458.859375">
                                </rect>
                            </clipPath>
                        </defs>
                        <g tabindex="-1" class="recharts-zIndex-layer_100">
                            <g class="recharts-layer recharts-pie" tabindex="0">
                                <g class="recharts-layer">
                                    <g class="recharts-layer recharts-pie-sector" tabindex="-1">
                                        <g class="recharts-layer recharts-shape">
                                            <g>
                                                <text x="234.4296875" y="184" dy="8" text-anchor="middle" fill="#67abc5 ">
                                                </text>
                                                <path cx="234.4296875" cy="184" fill="#67abc5 " class="recharts-sector" d="M 344.4297,184
    A 110,110,0,
    1,0,
    125.6928,200.6218
  L 145.4631,197.5997
            A 90,90,0,
            1,1,
            324.4297,184 Z">
                                                </path>
                                                <path cx="234.4296875" cy="184" fill="#67abc5 " class="recharts-sector" d="M 354.4297,184
    A 120,120,0,
    1,0,
    115.8076,202.1329
  L 119.7617,201.5284
            A 116,116,0,
            1,1,
            350.4297,184 Z">
                                                </path>
                                                <path d="M222.48574496401073,64.59588685184674L220.4950878746792,44.695201327154535L198.4950878746792,44.695201327154535" stroke="#67abc5 " fill="none">
                                                </path>
                                                <circle cx="198.4950878746792" cy="44.695201327154535" r="2" fill="#67abc5 " stroke="none">
                                                </circle>
                                                <text x="186.4950878746792" y="44.695201327154535" text-anchor="end" fill="#333">Basistarif:46.8 €</text>
                                                <text x="186.4950878746792" y="44.695201327154535" dy="18" text-anchor="end" fill="#999">(Rate 55.01%)</text>
                                            </g>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-pie-sector" tabindex="-1">
                                        <g class="recharts-layer recharts-shape">
                                            <path cx="234.4296875" cy="184" fill="#4eccc1 " class="recharts-sector" d="M 126.7117,206.2899
    A 110,110,0,
    0,0,
    254.2717,292.1956
  L 250.6641,272.5237
            A 90,90,0,
            0,1,
            146.2968,202.2372 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-pie-sector" tabindex="-1">
                                        <g class="recharts-layer recharts-shape">
                                            <path cx="234.4296875" cy="184" fill="#a1daa3 " class="recharts-sector" d="M 259.907,291.0089
    A 110,110,0,
    0,0,
    332.7756,233.2756
  L 314.8945,224.3164
            A 90,90,0,
            0,1,
            255.2748,271.5527 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-pie-sector" tabindex="-1">
                                        <g class="recharts-layer recharts-shape">
                                            <path cx="234.4296875" cy="184" fill="#ff8e3c " class="recharts-sector" d="M 335.2197,228.0611
    A 110,110,0,
    0,0,
    343.3674,199.2507
  L 323.5605,196.4778
            A 90,90,0,
            0,1,
            316.8942,220.05 Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                        <g tabindex="-1" class="recharts-zIndex-layer_200">
                        </g>
                        <g tabindex="-1" class="recharts-zIndex-layer_300">
                        </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>
```

#### Props: PieChart

### PieChart

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| width | Number | — | The width of chart container. |
| height | Number | — | The height of chart container. |
| innerRadius | String \| Number | 60 | The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |
| outerRadius | String \| Number | 80 | The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |
| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the PieChart. |
| dataUnit | String \| Number | — | The unit of data displayed in the PieChart. |
| nameKey | String | name | The key of each sector name. |
| color | Function | — | Overwrite the way the color is taken from the data input array. Use this, if you had to rename the color prop in your data or if you want to provide the corresponding color in another way. Take the color name from the charts colors page. |
| filled | Boolean | false | Set to "true" if the chart should be filled. This will set the "innerRadius" and the "paddingAngle" to 0. |
| labels | Function \| Boolean | true | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If set a function, the function will be called to render customized label. |
| innerLabels | Boolean | false | Set to "true" if the built in inner label shall be used. This makes only sense when labels are enabled, and the chart is filled or the inner radius is set to 0. |
| paddingAngle | Number | 3 | The angle between two sectors. |
| pieOptions | Object | — | Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie |
| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
| legend | Legend \| Boolean | <Legend /> | Shows the provided Legend component otherwise shows nothing. |
| ... |  | — | Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart |

#### Props: Legend

### Legend

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| iconType | String | square | Defines the type of the leading icon. |
| iconSize | String | 12 | Defines the size of the leading icon. |
| layout | String | vertical | Defines the layout of the legend. |
| align | String | right | Defines the alignment of the legend relative to the chart. |
| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |

### Example: Customer Satisfaction

PieChart with a needle

Customer Satisfaction

#### React (tsx)

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

export default () => (
    <>
        <label>PieChart with a needle</label>
        <div className='panel panel-default panel-body margin-bottom-0 '>
            <div className='display-flex flex-column position-relative width-250 height-250 max-width-500'>
                <PieChart
                    data={data}
                    dataKey='value'
                    filled={false}
                    paddingAngle={1}
                    innerRadius={90}
                    outerRadius={98}
                    labels={false}
                    legend={false}
                    tooltip={false}
                    containerOptions={{ height: '50%' }}
                    pieOptions={{
                        startAngle: 180,
                        endAngle: 0,
                        cy: 120,
                    }}
                />
                <div className='position-absolute top-25pct left-50pct'>
                    <ChartNeedle rotation={67} height='80px' y='-30%' />
                </div>
                <div className='margin-20 text-center'>
                    <div className='text-color-dark text-size-16'>Customer Satisfaction</div>
                </div>
            </div>
        </div>
    </>
);

const data = [
    {
        color: 'color-rating-1',
        value: 20,
    },
    {
        color: 'color-rating-2',
        value: 20,
    },
    {
        color: 'color-rating-3',
        value: 20,
    },
    {
        color: 'color-rating-4',
        value: 20,
    },
    {
        color: 'color-rating-5',
        value: 20,
    },
];
```

#### HTML (html)

```html
<label>PieChart with a needle</label>
<div class="panel panel-default panel-body margin-bottom-0 ">
    <div class="display-flex flex-column position-relative width-250 height-250 max-width-500">
        <div class="recharts-responsive-container" style="width: 100%; height: 50%; min-width: 100px; min-height: 100px;">
            <div style="width: 0px; height: 0px; overflow: visible;">
                <div width="250" height="125" class="recharts-wrapper" style="position: relative; cursor: default; width: 250px; height: 125px;">
                    <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="250" height="125" viewBox="0 0 250 125" style="width: 100%; height: 100%; display: block;">
                        <title>
                        </title>
                        <desc>
                        </desc>
                        <g tabindex="-1" class="recharts-zIndex-layer_-100">
                        </g>
                        <g tabindex="-1" class="recharts-zIndex-layer_-50">
                        </g>
                        <defs>
                            <clipPath id="recharts5-clip">
                                <rect x="5" y="5" height="115" width="240">
                                </rect>
                            </clipPath>
                        </defs>
                        <g tabindex="-1" class="recharts-zIndex-layer_100">
                            <g class="recharts-layer recharts-pie" tabindex="0">
                                <g class="recharts-layer">
                                    <g class="recharts-layer recharts-pie-sector" tabindex="-1">
                                        <g class="recharts-layer recharts-shape">
                                            <path cy="125" cx="125" fill="#e22837 " stroke="#fff" name="0" color="color-rating-1" tabindex="-1" data-recharts-item-index="0" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 27,125
    A 98,98,0,
    0,1,
    44.9198,68.5096
  L 51.457,73.1211
            A 90,90,0,
            0,0,
            35,125 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-pie-sector" tabindex="-1">
                                        <g class="recharts-layer recharts-shape">
                                            <path cy="125" cx="125" fill="#ff8e3c " stroke="#fff" name="1" color="color-rating-2" tabindex="-1" data-recharts-item-index="1" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 45.9179,67.1206
    A 98,98,0,
    0,1,
    93.742,32.1187
  L 96.2937,39.7008
            A 90,90,0,
            0,0,
            52.3736,71.8455 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-pie-sector" tabindex="-1">
                                        <g class="recharts-layer recharts-shape">
                                            <path cy="125" cx="125" fill="#f8c575 " stroke="#fff" name="2" color="color-rating-3" tabindex="-1" data-recharts-item-index="2" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 95.3678,31.5873
    A 98,98,0,
    0,1,
    154.6322,31.5873
  L 152.2133,39.2128
            A 90,90,0,
            0,0,
            97.7867,39.2128 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-pie-sector" tabindex="-1">
                                        <g class="recharts-layer recharts-shape">
                                            <path cy="125" cx="125" fill="#5cb85c " stroke="#fff" name="3" color="color-rating-4" tabindex="-1" data-recharts-item-index="3" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 156.258,32.1187
    A 98,98,0,
    0,1,
    204.0821,67.1206
  L 197.6264,71.8455
            A 90,90,0,
            0,0,
            153.7063,39.7008 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-pie-sector" tabindex="-1">
                                        <g class="recharts-layer recharts-shape">
                                            <path cy="125" cx="125" fill="#4b924c " stroke="#fff" name="4" color="color-rating-5" tabindex="-1" data-recharts-item-index="4" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 205.0802,68.5096
    A 98,98,0,
    0,1,
    223,125
  L 215,125
            A 90,90,0,
            0,0,
            198.543,73.1211 Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                        <g tabindex="-1" class="recharts-zIndex-layer_200">
                        </g>
                        <g tabindex="-1" class="recharts-zIndex-layer_300">
                        </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 class="position-absolute top-25pct left-50pct">
            <div class="position-relative">
                <div class="position-absolute bg-dark " style="width: 5px; height: 80px; transform-origin: center bottom; transform: translate(-50%, -30%) rotate(67deg); border-radius: 100% 100% 4px 4px; display: inline-block;">
                </div>
            </div>
        </div>
        <div class="margin-20 text-center">
            <div class="text-color-dark text-size-16">Customer Satisfaction</div>
        </div>
    </div>
</div>
```

#### Props: PieChart

### PieChart

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| width | Number | — | The width of chart container. |
| height | Number | — | The height of chart container. |
| innerRadius | String \| Number | 60 | The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |
| outerRadius | String \| Number | 80 | The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |
| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the PieChart. |
| dataUnit | String \| Number | — | The unit of data displayed in the PieChart. |
| nameKey | String | name | The key of each sector name. |
| color | Function | — | Overwrite the way the color is taken from the data input array. Use this, if you had to rename the color prop in your data or if you want to provide the corresponding color in another way. Take the color name from the charts colors page. |
| filled | Boolean | false | Set to "true" if the chart should be filled. This will set the "innerRadius" and the "paddingAngle" to 0. |
| labels | Function \| Boolean | true | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If set a function, the function will be called to render customized label. |
| innerLabels | Boolean | false | Set to "true" if the built in inner label shall be used. This makes only sense when labels are enabled, and the chart is filled or the inner radius is set to 0. |
| paddingAngle | Number | 3 | The angle between two sectors. |
| pieOptions | Object | — | Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie |
| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
| legend | Legend \| Boolean | <Legend /> | Shows the provided Legend component otherwise shows nothing. |
| ... |  | — | Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart |

#### Props: Legend

### Legend

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| iconType | String | square | Defines the type of the leading icon. |
| iconSize | String | 12 | Defines the size of the leading icon. |
| layout | String | vertical | Defines the layout of the legend. |
| align | String | right | Defines the alignment of the legend relative to the chart. |
| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |