Pie and Donut Charts

Best Practices


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.

Example of a pie chart using generic data

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.

Demonstration of five generic types of data in a pie graph legend

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.

Example of 5 points of generic data in a data table associated with a pie chart


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

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.

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

Don’t Use:

  • For displaying subtle differences in quantitative values.

Chart Color Palettes

Examples of Color Palettes that can be selected for Charts in WCMS
  • photo icon
    Go to ExamplesTo experience a "live" chart, go to the examples at the end of this page.


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

Pie Chart Soft Color

See a  sample CSV data file excel icon[XLS – 79 B].

Page last reviewed: May 16, 2019
Content source: WCMS / Template Team