Design Guidelines

Charts

Charts illustrate—and give us insight into—complex data relationships.

An image of a line graph on an abstract background with chart shapes

Introduction

Charts tell the story of information. They make abstract data complete; give us an intuitive grasp of patterns; and help us identify trends, make comparisons, and track progress.

Design Resources

Download Sketch Kit

Usage

To tell the story of the data you're presenting, you need to choose the chart that most clearly presents the main insight you want to share. Use the wrong chart type, and you risk misrepresenting the underlying data—and confusing or even misleading your audience.

So how do you choose the right chart for your data?

  1. First, think about intent. What is the essence of the information you want to convey?
  2. Who is your audience, and how do they prefer to consume information?
  3. Is the data used to show:
    1. Comparison: difference or similarity between different values?
    2. Trending: data that has changed over time?
    3. Relationship: correlation in data values?
    4. Composition: relative makeup of a value?
    5. Distribution: volume distribution and identification of outliers?
    6. Metric: measuring progress at a glance?
    7. Location: values on a geographical coordinate system?
    8. Pipeline: stages (or flow between stages) of a process?

Chart Types

Comparison

Comparison charts are used to show differences and similarities in data values. They include bar and column charts and dot plots.

Bar and Column Charts

The bar chart is the workhorse of analytics. Because our eyes can quickly discern differences in height and length, it's a good choice for presenting simple nominal or ordinal data. The column chart is a common variant of a bar chart, used to compare ordinal values. 

A horizontal bar chart example
Bar Chart: Sales by Account
A vertical column chart example
Column Chart: Sales by Account Size

Stacked Bar and Column Chart

Stacked bar charts are good for showing group relationships and value differences across more complex categories and subcategories. Stacked column charts can also be used to show group relationships within subsets of ordinal data.

A horizontal stacked bar chart example
Stacked Bar Chart: Sales by Account and Product
A vertical column bar chart example
Stacked Column Chart: Sales by Account Size and Product
A vertical bar chart with the chart baseline at zero.
Do use a zero baseline to represent accurate data.
A vertical bar chart with the baseline set at 100.
Don't set the baseline to any number other than zero. Doing so misrepresents the data.
A horizontal bar chart where the top is the largest value and the bottom is the lowest value
Do show ordinal data in ascending or descending order.
A horizontal bar chart where the data values are random
Don't present data in nonlinear order.
A vertical bar chart with each bar the same shade of blue
Do use a single color to represent all values compared against the same measure.
A vertical bar chart with each value a different color
Don't add purely decorative shading or colors.

Dot Plot

The dot plot uses circles to map values across x and y axes, then adds third or fourth measures in the form of dot size and color/intensity. It's a favorite of design guru Edward Tufte, due to its judicious use of ink and ability to convey complex information in a relatively uncluttered space.

A chart with blue circles representing dot plots in a linear order
Horizontal Dot Plot: Sales by Account Type
A chart with blue circles representing dot plots in a randomized order
Vertical Dot Plot: Sales by Account Size
A dot plot with a few sparse dots
Do use a dot plot to map smaller, sparser data sets with more than two variables.
A dot plot with a ton of dots
Don't use a dot plot with very large or extremely dense data sets—too many (or too-large) dots can make a dot plot hard to read.

Trending charts, such as line charts, are used to represent data that has changed over time.

Line Chart

Line charts are good for representing changes in one or more values over time, especially trending data. Overlay multiple values (up to four) in one chart to help readers visualize the relationship between values.

A blue line chart
Line Chart: Sales Growth by Month
A single line chart with two overlaying lines
Line Chart (Two Values): Sales and Open Opportunities by Month
Two lines in a line chart
Do use a line chart to represent data with four or fewer related values.
Five lines in a line chart
Don't choose a line chart for data sets with more than four values, or values of different measures.
A line chart with two lines
Do compare values using similar units, on a consistent scale.
A line chart with two lines but one has a different axis than the other
Don't use this type of chart to compare values on vastly different scales.

Relationship

Relationship charts, such as scatter plots, are used to show relationships and correlation between values in data. 

Scatter Plot

Scatter plots are useful for showing more complex data relationships, including correlation of multiple variables. For example, to illustrate correlation of revenue with number of open opportunities, plot the two measures on the x and y axis. As with the dot plot, dot size and color/intensity can convey additional information.

A chart with the same size dots representing data
Scatter Plot: Correlation of Account Sales and Number of Employees
A chart with multiple sizes of dots representing data
Scatter Plot: Correlation of Account Sales, Number of Employees, and Case Duration
A scatter plot chart with an axis that starts at 0
Do start at zero on the x and y axis.
A scatter plot chart with an axis that starts at 100
Don't show x and y axis data with starting points other than zero.
A scatter plot chart with lots of colors
Do use color and size to highlight patterns and identify outliers.
A scatter plot chart with a single color
Don't represent outliers without identifying color variations.

Compositions

Composition charts are used to show relative value, or represent relative makeup of a value, across a group. They include pie charts and treemaps.

Pie Chart

A pie chart maps relative value, or relative makeup of a value, across a data set. These charts highlight relative value (e.g., percentages) rather than absolute value.

Pie Chart: Campaigns by Source
A pie chart with three values
Do use a pie chart to represent data with between two and five values.
A pie chart with 10 values
Don't choose a composition chart for data sets with more than five values, or values of different measures.
A pie chart with five sections in descending order
Do show data in descending order, starting at the 12 o'clock point and moving clockwise.
A pie chart in with five sections in random order
Don't present data in nonlinear order.

Treemap

A treemap shows the composition of hierarchical data using nested rectangles.

A treemap chart with five sections
Treemap: Profit Composition by Product
A treemap with five sections in order
Do sort parent rectangles by size (most commonly with larger ones at the left and/or bottom of the chart).
A treemap with five sections in random order
Don't arrange rectangles without regard to size, which can make data harder to evaluate.

Distribution

Distribution charts are used to visualize volume distribution and spot outliers or anomalies. They include heatmaps and matrix charts.

Heatmap

Heatmaps use color density to show concentration patterns for a single variable. 

A Heatmap displaying Sales by Account and Product
Heatmap: Sales by Account and Product
A heatmap chart with shades of the same color
Do use color to represent data variations.
A heatmap chart where each tile a different color
Don't vary colors without reason.

Matrix Chart

Matrix charts use color density and bubble size to show concentration patterns for two variables. 

A Matrix displaying Revenue and Sales by Account and Product
Matrix: Revenue and Sales by Account and Product
A matrix chart with each dot having the same shade of blue
Do use color to represent data variations.
A matrix chart with each dot having a different color
Don't vary colors without reason.

Metric

Metric charts show progress at a glance. They include flat and polar gauges and ratings charts.

Flat Gauge

A flat gauge shows progress toward a specific metric. It's useful where space may be limited.

A flat gauge
Flat Gauge: Progress Toward Quota

Polar Gauge

A polar gauge also shows progress toward a specific metric, with the circle representing 100% of the goal.

Polar gauges can progress either by filling or draining, depending on the information conveyed.

A polar gauge showing 75%
Polar Gauge: Progress Toward Quota

Ratings Chart

A ratings chart works much like a polar gauge, with the addition of comparison against a target quantity or expectation.

A ratings chart showing customer satisfaction
Ratings Chart: Customer Satisfaction
A flat gauge chart with a reference point
Do add context with a reference point representing target or average value.
A flat gauge chart without a reference point
Don't present data without a reference point.
Two flat gauges with reference points
Do use a flat gauge when space is limited.
Two polar gauges that are very small
Don't address limited space with a too-small polar gauge.

Location

Location charts show values using a geographical or coordinate map. Variations include bubble maps and geo maps.

Map

A standard location chart maps data values to a map or other geographical component. Areas of the map are shaded in proportion to related values, highlighting high- or low-value areas.

A map of sales by state
Map: Sales by State

Bubble Map Variation

A bubble map functions much like a location chart. As in the dot plot, dot size and color/intensity can convey additional information about each plotted point.

A bubble map that shows open opportunities by state
Bubble Map: Open Opportunities by State

Geo Map Variation

Geo maps help readers visualize data that contains geographical coordinates (latitude and longitude). The coordinates allow more precise connection of data elements to locations.

A geo map showing sales, profit, and open opportunities by state
Geo Map: Sales, Profit, and Open Opportunities by State
Do choose maps showing regions reflected in your data.
Don't include regions in your map that don't exist in your data.
Do use color and size to represent data variations.
Don't add purely decorative shading or colors.

Pipeline

Pipeline charts show stages of a process, and the flow between those stages. They include funnel, waterfall, origami, and sankey charts.

Funnel Chart

A funnel chart is used to represent stages in the sales or marketing process, with a value for each stage. 

A funnel chart showing opportunity by stage
Funnel Chart: Opportunity by Stage
A funnel chart showing three sections
Do use a funnel chart to represent multiple stages in a process, with related values appearing in ascending or descending order.
A funnel chart showing four sections
Don't use this chart type to show data without sequential stages.

Waterfall Chart

A waterfall chart is used to show starting, intermediate, and final values for the stages of a process.

A waterfall chart showing pipeline change by stage
Waterfall Chart: Pipeline Change by Stage
A waterfall chart showing four different colors
Do use contrasting or meaningful colors to show differences in data.
A waterfall chart showing seven different colors
Don't add purely decorative shading or colors.
A waterfall chart with four colors
Do use a waterfall chart to show start and end points along with intermediate stages.
A waterfall chart with seven colors
Don't use this chart type to represent decomposition or roll-up of a number.

Origami Chart

Origami charts display pop-out values in data with a single measure and grouping. You can also use them to show variability in stages whose values don’t decrease sequentially. They can work well to highlight values that are performing well relative to others in a category.

An origami chart showing pipeline change by stage
Origami Chart: Pipeline Change by Stage

Sankey Chart

Sankey charts show how values flow between two groupings, demonstrating how a given metric is distributed as it moves from one to another. A Sankey chart can display negative numbers and calculate their effect on overall totals.

A Sankey chart showing a case flow by stage
Sankey Chart: Case Flow by Stage

Color

Color is important for data visualization. Colors help tell a story, guiding the user to view alerts or outliers and take desired actions. 

Chart Color

Color plays an integral part of narrating stories through a data visualization. Our team conducted user research and came up with color themes that were accessible, easy to distinguish and had enough colors to show categories in data.

Users can select color themes from the Salesforce charting library. The default palette uses midtone hues from around the color wheel. All other themes have hues that are roughly 180 degrees from each other in the color wheel. Depending on hue chromaticity, certain hues have different RGB curves. Our accessible color-safe theme passes WCAG 2.0 guidelines for contrast accessibility. 

Default Palette: #52B7D8, #E16032, #FFB03B, #54A77B, #4FD2D2, #E287B2
Color Safe: #529EE0, #D9A6C2, #08916D, #F59B00, #006699, #F0E442
Light: #3296ED, #77B9F2, #9D53F2, #C398F5, #26ABA4, #4ED4CD
Dark: #0E70C7, #3296ED, #7719E3, #9D53F2, #067D77, #26ABA4
Bluegrass: #C7F296, #94E7A8, #51D2BB, #27AAB0, #116985, #053661
Sunrise: #F5DE98, #F5C062, #F59623, #CE6716, #762F3D, #300561
Water: #96F2EE, #68CEEE, #2D9CED, #0E6ECE, #073E92, #051C61
Watermelon: #F598A7, #F56580, #F4284E, #C11C2F, #5C3F22, #0A611B

Color Best Practices

  • Consistently match a color to value. For example, if you use blue to represent sales win rate in one chart, use it to represent that value in all other charts.
Consistently match a color to value.
Do not use different colors for the same value.
  • Use same color to show same metric for different categories in a bar chart. 
Use same color to show same metric.
Do not use different colors to show same metric.
  • Use different colors to represent categorical data points in donut or tree-map. 
Use different colors to show categorical data.
Don not use the same color or gradient to show categorical data.
  • To show continuous values, use one color, or a gradient of that color, to represent the high and low. 
Use same or gradient of color to represent high and low.
Do not use different colors to represent high and low.
  • Using too many colors defeats the purpose of associating numbers with colors. Research shows that most people's short-term memory can retain up to five pieces of information at one time, making five a good maximum for color choices. (show scatter plot)
Use 5 or less lines to show trend.
Do not use more than 5 lines to show trend.
  • Keep accessibility in mind. When using color to distinguish chart elements, always use symbols or text as well. Use color-safe themes whenever possible.
Keep accessibility in mind. When using color to distinguish chart elements, always use symbols or text as well. Use color-safe themes whenever possible.
  • Use color as a metaphor when not working across multiple cultures. For example, in western cultures, it's common to use red to show bad and green to show good. Keep in mind, however, that colors can have different meanings in different cultures.