Pie Chart

Best Practices

Print
Related Pages

Overview

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.

Visualization
Pie chart visualization
Legend

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.

Pie chart legend
Table

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.

Pie chart table

Usage

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.

Use:

  • To compare multiple data series
  • To easily showcase largest & smallest series in a data set

Don’t Use:

  • When displaying data series that are very similar to each other
  • When showing data the user is expected to analyze precisely

Other Guidance

  • 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.
  • Label Placement: Pie chart labels can be placed inside or outside the chart visualization. The more data series in the chart, the less room for the labels inside. Labels are best placed outside the chart when there are more than six chart series to ensure that there is enough space on the page for the visualization.
  • The “Donut” Style Option:  The ring, or “donut,” option for pie charts introduces a more modern appearance of the pie chart. We recommend not using this style when there is a high number of series, as the donut display will make it more difficult for users to distinguish colors visually.
  • Social Media Sharing:  The Chart Configuration tool allows you to specify a URL, title, and description for social media posts.  It also supports display of the chart embed code for copying.

Chart Color Palettes

The four chart color palettes
  • Go to Examples
    To experience a "live" chart, go to the examples at the end of this page.
Related Topics

Examples

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).

Top of Page

Pie Chart Based on Series Averages

The source data for the following chart has multiple values for each of the three data series.  When mapping the source data, we selected “Average” as the calculation method for the pie segments.  The chart to the right uses the “Add” method.  View source data file [XLS – 98 B].

Pie Chart Based on Series Totals

The following chart uses the same source data file as the chart to the left, but when mapping the data, we selected the “Add” calculation method for the pie segments (instead of “Average”).  Note the table values in comparison to the table values in the first chart.   View source data file [XLS – 98 B].

Pie Chart with Soft Palette