Pie and Donut Charts
A pie chart is a visual display of numerical proportions split between data series. With a pie chart you can quickly:
- Compare the differences between multiple data series
- See the numerical total of a single data series against the whole
- Identify the largest and smallest items within a data set
Chart is an interactive content type in the WCMS. Go to the examples at the bottom of this page to see “live” pie charts.
- photo iconGo to ExamplesTo experience a "live" chart, go to the examples at the end of this page.
- tools iconBuilding in the WCMSSee key tips and guidelines for working with pie charts in the WCMS.
- photo iconTP4 UX Best Practices ppt icon[PPT - 14 MB]For general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.
Interacting with the labels in the legend will highlight or isolate the selected data series. Each data series can be toggled on and off individually, allowing users to view a wide variety of combinations.
Sorting: Selecting the top row of a column sorts the entire table by the content within the selected column. Selecting the same column multiple times rotates the sorting feature between three states: Descending, Ascending and Off. Only a single column can be sorted at one time.
Source: When referencing information from outside of the current page, you should provide a source link. Source link text should be short and descriptive; it should not be the full URL. Source links are always displayed directly above the table. Source information can be added to the “Description” box under the “General” section of the “Configure” tab.
Pie charts are used to display a comparison between multiple data series. Pie charts are best when focused on 3-6 data series with clear differences between their numerical proportions. Pie charts are not recommended if the user is expected to compare or analyze precise information.
- To compare multiple data series
- To easily showcase largest & smallest series in a data set
- When displaying data series that are very similar to each other
- When showing data the user is expected to analyze precisely
- Chart Title: Good titles are invaluable. Your chart title should be long enough so that your audience can make sense of the chart. A glance at the title should clearly convey what the chart contains. A good title requires a balance between a short title and one with enough descriptive information to describe the chart clearly.
- Number of Series: Too many series slices result in visual clutter and make the chart difficult to interpret. One to four slices with a maximum of six is recommended. The Chart Builder supports up to nine different colored slices in a pie chart. However, if you have more than six sets of quantitative values, consider breaking them into multiple charts.
- Data Source: The data source makes your graphic more reputable. It also allows those who are interested to dig deeper.
Variation: Donut Chart
A donut chart is recommended for use when comparing very few slices where there is an large difference in the relationship between elements.
- To showing a single portion of a whole value (1/2, 1/4, etc.)
- When 2-3 points of data are being compared
- For displaying subtle differences in quantitative values.
Chart Color Palettes
Chart is an interactive content type. In the examples below, try selecting and deselecting data series in the legends. Also try hovering over the visualization areas (if using a mouse).
See a sample sample CSV data file excel icon[XLS – 68 B].
See a sample CSV data file excel icon[XLS – 34 B].
Pie Chart Soft Color
See a sample CSV data file excel icon[XLS – 79 B].