General guidelines
Charts and graphs are the most common way that we visualize data on Pinterest. Since all graphs are charts, we just refer to everything as “charts” for simplicity’s sake. Use the following guidelines to create accurate, coherent and responsive charts.
Chart use cases
The type of chart you use depends on how you are analyzing and monitoring data. Below are our most common use cases:
- Trends: to see how data changes over time
- Parts-to-whole: to see how a breakdown adds up to a total
- Comparison: to see how multiple data sets compare to each other
- Connection: to see the relationship between variables
For a great resource on understanding when to use what type of chart, download the Financial Times Visual Vocabulary PDF.
Chart types
Currently, we are mainly concerned with looking at categorical data. We do it via the following charts:
- Bar graphs for Comparison
- Line graphs for Trends
- Combo graphs for Trends + Comparison
- Donut charts for Parts-to-whole
- Funnel charts for Connection
Additional charts
Though not currently supported, you can find information on additional charts and visualizations here:
Visual elements
Charts share a number of visual elements like axis lines and labels. Use the guide below to make sure charts are stylistically cohesive across surfaces. For styles specific to a particular chart, see the chart's guideline."
Axis lines
Axis lines should help a person follow the flow of the data and anchor them to the primary increments that are important to pay attention to.
All linear charts are anchored to a clear baseline starting point to show either categories or time ranges, with another clear baseline to show values. In line and bar charts, additional grid lines are shown that follow the flow of information—horizontal for line charts and vertical for row bar charts. Though funnel chart info is read horizontally, axis lines are arranged vertically to more clearly show where one process ends and the next begins.
Shape
Shapes in all graphs should be flat, 2D and minimally styled so that they are as accurate as possible.
Keep corners closer to a rectangular shape so that the accuracy of the data is clear.
Overly round corners so that it’s hard to tell where the true start and end is of a category or amount.
Patterns
Use consistent pattern language on lines and bars to avoid ambiguity.
Layout
Follow the hierarchy and spacing below when adding headings, text and other UI elements to a chart.
Order
The order of categories and values in a chart should be inherent. If there is no clear order, place categories from the largest to the smallest amounts. If multiple data sets are being compared, stick to the same order for all data sets. For example, if an advertiser is comparing the types of devices used for one ad campaign, then opens another ad campaign to compare, use the same order.
Empty states
No data available
When there is no data to show, use an illustration, coupled with descriptive text.
User input needed
When there is data to show because a user needs to interact first, show the graph axis lines and be sure to announce that interaction is required in order to display data.
Full error states
No data available
When all of the data in a chart can’t be loaded, use an illustration coupled with an error status icon and descriptive text. Include a way to reload the data. Inline errors vary by the type of chart.
Interactions
Desktop web
The most important data should be read at a glance, with additional information surfaced via mouse hovers or via keyboard navigation. There shouldn’t be a lag when interacting; tooltips should appear as soon as the mouse cursor enters an area where more information is needed. For example interactions, see ChartGraph Tooltip.
Mobile and touch
For touch interfaces, additional information is shown when pressing and holding down in the graph area. Since fingers can often obstruct information, tooltips on mobile are always shown at the very top of the chart, and don’t move around like they do on desktop surfaces.
Accessibility
Data visualizations are a very powerful way to interpret and analyze data, but they aren’t for everyone. Keep the following best practices in mind when creating charts and other visualizations.
A note on using patterns and shapes
Keep in mind that charts are not viewed in isolation, but are often part of a page with other dense content on it that is read in a distracting environment—other windows and browser tabs can be open, and the office may be noisy. This can lead to cognitive overload and then make it harder for people with other impairments to interpret the data.
If you add shapes, patterns or high-contrast colors to help with accessibility, be sure to allow people to turn those on and off as needed.