ChartGraph and graph 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.
ChartGraph types
Currently, we are mainly concerned with looking at categorical data. We do it via the following charts:
- Bar charts
- Line charts
- Funnel charts
- Donut charts
ChartGraph 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
Bar charts
A bar chart plots numeric values for categorical data as bars in a graph. The numeric amounts are shown on a common baseline in order to easily compare values across categories. Bar charts are useful for comparing large amounts of data, for example, a wide range of audience categories and interests.
Bars are generally arranged vertically in columns. But, when space is an issue, they can be arranged vertically in rows so that it’s easier to scroll. When comparing subsets, of larger categories, bars are grouped with tighter space between them and looser space between groups.
Stacked bar charts
Stacked bar charts break bars into smaller categories so that their relationship to the whole amount can be seen.
Line charts
A line chart plots numeric values for categorical data as a line that shows a progression through time. They can be useful for showing and comparing trends. A common example is showing how ad campaigns perform throughout the year.
Donut charts
Donuts are a quick way to see parts of a whole as percentages. An example is breaking up an audience by gender.
Funnel charts
Funnel charts visualize data that goes through linear, sequential stages. An example is showing a customer’s journey from visiting a page to adding to their cart to checking out. The diminishing size of the value helps us gauge how much customer drop-off there is throughout the entire journey.
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.
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.
Keep axis lines minimal and light since other more important visual information may be inside of a chart and its surrounding area.
Add too many dark axis lines that can make information hard to read or overwhelming.
Show axis lines only within the area that includes data, so there is a clear start and end.
Extend axis lines to the edge of the chart container making it seem like there’s a continuation beyond the edges of the container.
Labels
Values and amounts
Labels should be placed at key intervals on axis lines.
- Desktop and large areas: Use a maximum of 5 labels
- Mobile and small areas (576px and smaller): Use a maximum of 3 labels horizontally.
Categories
This will depend on the number of categories you need to compare. But, in general, be mindful of the space provided when comparing categories.
Keep labels short and only for the main intervals in the graph so that there is enough space between them to easily group data sets.
Add too many labels or rotate the orientation of the labels so that they fit. In these cases, consider using a table, or starting with a small overview graph that opens to a larger, more granular view.
Legend
The default placement for legends is directly underneath the chart. Start-align legends for rectangular charts like bar, line and funnel; center-align legends below a donut.
Symbols representing categories should look like the type of visualization that’s in the chart. For example, use short lines to depict a line chart and boxes to represent a bar chart.
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, on a single line chart it should happen as soon as the mouse enters the area between both axis. On a bar chart, multi-line chart or donut chart, when someone hovers over a segment of the bar, line or donut.
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.
Provide a tabular alternate
Some people may find it hard to process complex visual information due to either visual or cognitive impairments. Motor impairments may also make it difficult to navigate a chart, and some charting libraries may not have robust keyboard controls. Therefore, it’s good to allow people to also view chart data as a text-only table. Open the table in a modal or another page if the data can’t fit in the space that the chart is currently in.
Use accessible color combinations
Our color palette is optimized for current AA color guidelines for graphics, with a 3:1 contrast ratio between visuals and a light background. We also recommend sticking to our standard color combinations so that people that are colorblind can also read charts.
Provide accessible settings and modes
Charts can be adjusted to help people with vision impairments by using shapes and patterns in addition to color.
However, 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.
Coming updates
We plan to add chart components in the near future. In the component documentation we will go further into chart-specific guidelines, properties and variants. Stay tuned!