Waffle Chart

Best Practices

Related Pages

Overview

Waffle charts provide a visually engaging way to display a piece of data in relationship to a whole, much like a pie chart.  Waffle charts allow users to choose or calculate one value to show in terms or a portion of 100 circles, squares, or person icons.

As a reusable Data Visualization module, these waffle charts can be reused across a site and updated in a single editor.

Note: This initial release provides a technical foundation for waffle charts.  Feedback from our users will determine the functionality moving forward.

The picture below is an example featuring the elements of a waffle chart.  Go to examples at the bottom of this page to see some of the additional design and configuration options.

  • photo icon
    Go to Examples
    See examples on this page that illustrate key options.
Related Topics
Visualization

Screen Capture of A Waffle Chart with labels that correspond to features listed below

1. Waffle Chart Visual

This visually customizable chart can be displayed as circles, squares, and person icons.  This chart reflects the calculated amount of the data selections made in the Visualization Editor.  Style and location variations are available.

2. Numerical Result

This number is calculated given the data selections you’ve made in creating the waffle chart.  Many types of calculations can be made depending on the data you’ve provided

3. Supporting Text

Also customizable, this supporting text can provide context for the number and chart above.

Usage

Data Bites provide a way to aggregate data into a single value and provide manually created textual context about that value.
Use:
  • When user needs to place emphasis on parts-to-whole contribution.
  • To visualize whole number percentages. Waffle charts can show the value of a single percent more clearly than a pie or donut chart.

Don’t Use:

  • If isolating one point of data tells an incomplete perspective.
  • If the supporting text needs to be more than three lines.
  • If there are many points of data contributing to a whole.
  • For visualizing precise percentages with fractions of a percent.
  • For values that exceed 100%. (It will completely fill the Waffle Chart)

Other Guidance

  • Waffle Chart Title:  Good titles are invaluable. Your data bite title should be long enough so that your audience can make sense of the relationships between the elements.   A glance at the title should clearly convey what the data bite contains.
  • Subtext/Citation:  The data source makes your graphic more reputable. It also allows those who are interested to dig deeper.

Customization

Customizations exist for colors, font, and imagery in the Visualization Editor.  If a series of visualizations are presented together, it is recommended to make similar visual selections across the series for coherence.

Most inline styling can be applied to the Title, Message, and Subtext portions of the waffle chart text.

Examples

Data Bites are a static data visualization type, unless used in a dashboard.  Each example shows a different way visual information can be arranged through different layouts and data configurations.

Count Comparison

This waffle chart shows the graphic on left calculating the percentage of Federal inputs against total number of inputs.

Top of Page

Average Compared to Max Value

This waffle chart is calculating the average of all inputs and then compares it against the maximum number in the data column.  The vertical configuration was selected.

Top of Page

Filtered Minimum Compared to Total Amount

This waffle chart has been filtered within the module editor to reflect only data from California in the year 2019.

Top of Page
Page last reviewed: August 18, 2021
Content source: WCMS / Template Team