Charts and Graphs
Last updated: September 11, 2015 at 22:40 pm

Styles of data presentation, ranging from simple bar charts to highly complex infographics.

Visual example of the element:

What problem does this element or pattern solve?
There are hundreds of different types and styles of charts and graphs. Use this page to define the various types of charts that can be displayed on your sites, their visual styling, and rules to help designers select the best type of chart to present various data types.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • All approved chart formats: Pie, bar, line, scatter, map, etc.
  • Approved colors for use in charts. Be sure to specify the presentation sequence of the colors (one-color charts are red only, two color charts are red and blue, three color charts are red, blue and yellow; etc.)
  • Visual stying for your chart labels and graphs. This includes line widths, line colors, fonts, font sizes, and spacing.
  • Do your charts display the actual number on or near its related segment (e.g. overlaid on the corresponding section of a pie chart)? What happens when the visual section is too small to display the number?
  • Do your charts present legends or keys? How are they formatted?
  • Are your charts flat or do they have 3-D effects? Do you permit gradients?

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
infographics, bar charts, line graphs, pie charts, data maps
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)

Owners and governance
UX or design 0wner
John Designowner
Business or marketing owner
Mary Businessowner
Development owner
Mike Devowner

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions