> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# DonutChart()

- Package: [@gooddata/sdk-ui-charts](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/index.md)
- Kind: function
- Source: https://github.com/gooddata/gooddata-ui-sdk/blob/rel/11.64/libs/sdk-ui-charts/src/charts/donutChart/DonutChart.tsx
- Guides: [Donut chart](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/donut-chart/index.md)

Donut chart shows data as proportional segments of a disc and has a hollowed out center.

**Signature:**

```typescript
export declare function DonutChart(props: IDonutChartProps): import("react/jsx-runtime").JSX.Element;
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| props | [IDonutChartProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.idonutchartprops/index.md) |  |

**Returns:**

import("react/jsx-runtime").JSX.Element

## Remarks

Donut charts can be segmented by either multiple measures or an attribute, and allow viewers to visualize component parts of a whole.

Note: the donut chart slices are by default sorted from largest to smallest. There is also a limit on the number of slices that will be charted.

See [IDonutChartProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.idonutchartprops/index.md) to learn how to configure the DonutChart and [donut chart documentation](https://www.gooddata.com/docs/gooddata-ui/latest/references/visual_components/donut_chart) for more information.