Charts - Lightning Design System

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?

First, think about intent. What is the essence of the information you want to convey?
Who is your audience, and how do they prefer to consume information?
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 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 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.

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

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

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.

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.

Do not use different colors for the same value.

Use same color to show same metric for different categories in a bar chart.

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)

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.

Guidelines