<h2>When to use</h2>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Donut chart</td>
<td>Used to show the proportions of categorical data through arcs within a circle. Donut charts are similar to pie charts, but contain a hollow center used to show values or totals.</td>
</tr>
<tr>
<td><a href="/data-visualization/pie-chart/">Pie chart</a></td>
<td>Organizes data as a percentage of a whole, visualized as a circle. Each slice represents a category within the whole. Pie charts are excellent for showing relative, categorical makeup of small datasets.</td>
</tr>
<tr>
<td><a href="/data-visualization/utilization-chart/">Utilization chart</a></td>
<td>Utilization charts display the distribution and composition of data for a specific resource. This chart improves readability for composition style graphs through a more readable, linear display. Use utilization charts for part-to-whole comparison in larger datasets or for multiple series.</td>
</tr>
<tr>
<td><a href="/data-visualization/gauge-chart/">Gauge chart</a></td>
<td>Used to indicate a single metric’s progress toward a target or goal through an arced slice.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"3 elements of the donut chart.","caption":"Donut charts are comprised of the following three elements:\n\n1. Header: includes the chart’s title and optional subtitle. Subtitles are used to provide additional context if it’s necessary to do so.\n2. Slice or arc: used to represent a category or part of a whole.\n3. Container: houses the chart and all accompanying elements including the legend. The container aligns to the grid to determine the chart’s size within it.","url":"https://dds.dell.com/site/v2/data-visualization/donut-chart/Donut_Chart_Anatomy_1_8a672c168d.png"}]' data-numberofcolumns='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

## Usage

Donut charts are used to show proportions of categorical data. They are one of the most recognized data visualization for dashboards and reporting. While donut charts can be used for real-time cycle tracking, such as data consumption, they are limited to single categories in this use case. For use cases where you wish to show composition, consider a [utilization chart](/data-visualization/utilization-chart/?tab=Design) with stacked bars.

Note that donut charts are not meant for large sets of data, where segments can be difficult to see among larger arcs. They are better suited for smaller data sets, with a recommended limit of eight (8) categories. It is recommended to combine multiple, extremely narrow segments into an “other” or “miscellaneous” category. By default, the chart will combine these segments if they are under a certain size threshold. Though not recommended, you can turn off this option in code.

<details data-name='image-block' data-images='[{"alt":"Image showing correct and incorrect number of slices side by side.","caption":"","url":"https://dds.dell.com/site/v2/data-visualization/donut-chart/Donut_Chart_Usage_20adb30608.png"}]' data-numberofcolumns='1'></details>

## Layout

To maintain amCharts’ approach on assembling donut charts and also to appeal users’ familiarity with reading clocks, the first slice is drawn from the “12 AM position”, growing clockwise.

Regarding slice display, the chart sorts its slices in descending value order by default, to facilitate quantitative data analysis. This behavior can be toggled off through code, thus allowing for customized data ordering.

<details data-name='image-block' data-images='[{"alt":"Image showing default layout of data versus customized layout.","caption":"","url":"https://dds.dell.com/site/v2/data-visualization/donut-chart/Donut_Chart_Layout_20b95af9d3.png"}]' data-numberofcolumns='1'></details>

### Responsive

The donut shape and its slices maintain their size and proportions when the chart’s container is expanded or shrunk. Additionally, the donut and its legend maintain both their placement and center alignment within the chart container.

Currently, it should be noted that the donut shape will crash into its container at the container’s smallest possible width. This is an initial release behavior regarding corner-case responsiveness and will be enhanced in future releases.

<details data-name='image-block' data-images='[{"alt":"Shows transition from desktop to mobile sizes.","caption":"","url":"https://dds.dell.com/site/v2/data-visualization/donut-chart/Donut_Chart_Responsive_afe39fc02d.png"}]' data-numberofcolumns='1'></details>

## Interaction

Hovering or focusing each segment will add a focus ring around the selected slice and trigger a tooltip containing that slice’s data.

By default, concise tooltips are provided, showing the slice’s number only. However, it is possible to edit the tooltip to include any combination of absolute value, a percentage, or descriptive labels.

Once triggered, the tooltip is aligned to the cursor and will follow the cursor’s movements. When the cursor is close to the edge of the chart, it will neither overlap with the chart title and subtitle, nor appear outside of the chart’s container.

When tabbing through slices via keyboard navigation, the tooltip is displayed with its pointer touching the center of the focused slice.

<details data-name='image-block' data-images='[{"alt":"Shows focus ring and tooltip upon hover.","caption":"","url":"https://dds.dell.com/site/v2/data-visualization/donut-chart/Donut_Chart_Interaction_9664018eee.png"}]' data-numberofcolumns='1'></details>

## Standards

### Accessibility

**Avoid placing too many slices within the same chart**\
While there is not a maximum number of slices a chart can support, consider the chart size and visual representation when adding more slices. Note that each slice must maintain sufficient space for distinct hover and focus behavior. Too many slices within the same chart can negatively impact a chart’s readability.\
\
**All tooltips should be able to be activated and dismissed via pointer, keyboard, and touch**\
Users should have full control of the tooltip interaction regardless of device. Do not cause the tooltip to disappear or timeout after a set interval.\
WCAG 2.2: [1.4.13 Content on Hover or Focus ](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)\
\
**Data within the tooltip should correspond to its data point**\
Tooltips should show the values that correspond to the data point that activates it. Each tooltip in your application should show values in the same way.

### Content

**Chart title**\
Be brief and descriptive about the subject the chart is presenting. Optionally include a subtitle if it’s necessary to provide more context about the chart. Every chart should include a chart title, except in cases where you’re showing more than one chart in the same container or widget. In this case, a group title should suffice.\
\
**Data visualization (DV) tooltip**\
Be consistent in how you present information in data tooltips across your product experience. Each tooltip in a chart should repeat the same format of information so users don’t incorrectly read data.\
\
**Capitalization**\
Use sentence case unless providing an explanation for an acronym or referencing a proper noun.

Design

This demo lets you interact with the donut chart and view the code. To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla-dv.delldesignsystem.com/?path=/docs/components-donut--docs)

<details data-name='iframe-doc' data-link='https://vanilla-dv.delldesignsystem.com/iframe.html?args=&id=components-donut--docs&viewMode=docs&websiteFrame=true'></details>

Code

A type of pie chart that presents data in arced segments, and is used to show the relationship of parts to their whole.

Donut Chart