<h2>When to use</h2>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Pie chart</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/donut-chart/">Donut chart</a></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/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":"The three elements of a pie chart.","caption":"Pie 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: 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/data-visualization/pie-chart/223f16289b32b157121a83938c27363f781d9a1d.png"}]' data-numberofcolumns='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

## Usage

Pie charts, like donut charts, are used to show proportions of categorical data. They are one of the most recognized data visualizations for dashboards and reporting for general or qualitative reporting purposes. Pie charts should not be used for cycle tracking, consumption, or comparative purposes, as the slices are not reliable indicators for quantitative measurement.\
\
Note that pie charts are not meant for large sets of data, where small slices can be difficult to see among larger slices. They are better suited for smaller data sets, with a recommended limit of eight (8) categories. It is recommended to combine multiple, extremely narrow slices into an “other” or “miscellaneous” category. By default, the chart will combine these segments if they are under a certain size threshold. You can turn off this option in code, but the click targets for small segments may fully overlap and therefore cause accessibility compliance issues.

<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/data-visualization/pie-chart/6a44d856cf016634fa49f858172e05bc2710b3d0.png"}]' data-numberofcolumns='1'></details>

## Layout

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

Regarding 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":"","caption":"","url":"https://dds.dell.com/site/data-visualization/pie-chart/3c928276799339646dd15288c87d843276bea927.png"}]' data-numberofcolumns='1'></details>

### Responsive

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

Currently, it should be noted that the pie 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/data-visualization/pie-chart/51eedaba93e98e5bc090043e522bd4672f05bcf3.png"}]' data-numberofcolumns='1'></details>

## Interaction

Hovering or focusing each slice 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/data-visualization/pie-chart/5e84f47bf292630491785862b09a1c3acf33928f.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.

## Live demo

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

<details data-name='live-demo' data-link='https://vanilla-dv.delldesignsystem.com/iframe.html?args=&id=components-pie-chart--basic&viewMode=story' data-codeBlock='%60%60%60html%0A%3Cdiv%20class%3D%22ddv__root%22%3E%0D%0A%20%20%3Cdiv%20class%3D%22dds__container-fluid%22%3E%0D%0A%20%20%20%20%3Cdiv%20class%3D%22dds__row%22%3E%0D%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22dds__col-12%20dds__col--md-12%20dds__col--lg-12%20dds__mb-3%22%3E%0D%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22dds__card%22%20role%3D%22figure%22%20aria-labelledby%3D%22ddvChartTitle%20ddvChartSubtitle%20pie_1773564357_sr%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22dds__card__content%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22dds__card__header%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22dds__card__header__text%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch5%20id%3D%22ddvChartTitle%22%20class%3D%22dds__card__header__title%22%20tabindex%3D%220%22%3EPie%20chart%3C%2Fh5%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20id%3D%22ddvChartSubtitle%22%20class%3D%22dds__card__header__subtitle%22%20tabindex%3D%220%22%3EOptional%20subtitle%3C%2Fspan%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fspan%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22dds__card__body%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22pie_1773564357%22%20data-ddv%3D%22pie%22%3E%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%3C%2Fdiv%3E%0D%0A%3C%2Fdiv%3E%0D%0A%0D%0A%3Cscript%3E%0D%0A%20%20DDV.Pie(%7B%0D%0A%20%20%20%20target%3A%20%22%23pie_1773564357%22%2C%0D%0A%20%20%20%20fieldId%3A%20%22category%22%2C%0D%0A%20%20%20%20valueId%3A%20%22value%22%2C%0D%0A%20%20%20%20data%3A%20%5B%0D%0A%20%20%20%20%20%20%7B%20category%3A%20%22Dell%20Education%22%2C%20value%3A%20273%20%7D%2C%0D%0A%20%20%20%20%20%20%7B%20category%3A%20%22UltraSharp%22%2C%20value%3A%20255%20%7D%2C%0D%0A%20%20%20%20%20%20%7B%20category%3A%20%22Precision%22%2C%20value%3A%20291%20%7D%2C%0D%0A%20%20%20%20%20%20%7B%20category%3A%20%22UltraSharp%22%2C%20value%3A%208%20%7D%2C%0D%0A%20%20%20%20%20%20%7B%20category%3A%20%22Alienware%22%2C%20value%3A%204%20%7D%2C%0D%0A%20%20%20%20%20%20%7B%20category%3A%20%22APEX%22%2C%20value%3A%205%20%7D%2C%0D%0A%20%20%20%20%20%20%7B%20category%3A%20%22Vostro%22%2C%20value%3A%209%20%7D%2C%0D%0A%20%20%20%20%5D%2C%0D%0A%20%20%20%20group%3A%20true%2C%0D%0A%20%20%20%20legend%3A%20%7B%20inactive%3A%20false%2C%20position%3A%20%22bottom-center%22%2C%20useDefaultMarker%3A%20true%2C%20trend%3A%20false%2C%20total%3A%20false%20%7D%2C%0D%0A%20%20%20%20pieChart%3A%20%7B%7D%2C%0D%0A%20%20%20%20sort%3A%20%22descending%22%2C%0D%0A%20%20%20%20tooltip%3A%20%7B%20content%3A%20%22concise%22%2C%20unit%3A%20%22%22%2C%20unitSr%3A%20%22%22%2C%20prefix%3A%20%22%22%2C%20prefixSr%3A%20%22%22%2C%20marker%3A%20true%20%7D%2C%0D%0A%20%20%20%20translations%3A%20%7B%7D%2C%0D%0A%20%20%7D)%3B%0D%0A%3C%2Fscript%3E%0A%60%60%60' data-heightInPixels='650' data-title='Pie chart' data-scroll='true'></details>

<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit Storybook","path":"https://vanilla-dv.delldesignsystem.com/index.html?path=/story/components-pie-chart--basic","type":"External"},"title":"Vanilla","subtitle":"","description":"View pie chart demo and code in Vanilla.","icon":"metadata"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>

Organizes data as a part of a whole, visualized as a circle. 

Pie Chart

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
