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:

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.

A line chart with only x-axis lines, a row bar chart with y-axis lines and one x-axis line and funnel chart with only y-axis lines.

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.


Shapes in all graphs should be flat, 2D and minimally styled so that they are as accurate as possible.

Bar and donut charts with square corners and ends.

Keep corners closer to a rectangular shape so that the accuracy of the data is clear.

A bar chart and a donut chart with fully rounded corners and ends.

Overly round corners so that it’s hard to tell where the true start and end is of a category or amount.


Use consistent pattern language on lines and bars to avoid ambiguity.

A dashed line for forecasted data. A solid line means for historical data, a diagonal pattern for unavailable data and a pulsating dot for real-time data.


Follow the hierarchy and spacing below when adding headings, text and other UI elements to a chart.

A spacing spec that shows how to use 24px spacing between Headings, Datapoints and a line chart, with 16px between a line chart and its legend.


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.

Bars in a chart in reverse chronological order.
Data is organized by centuries in reverse chronological order.
Bars in a chart ordered from largest to smallest
Data is ordered from largest to smallest amount when the order isn’t inherent.
A donut chart ordered from largest to smallest going clockwise.
In a donut chart, data is ordered from largest to smallest going clockwise.

Empty states

No data available

When there is no data to show, use an illustration, coupled with descriptive text.

An illustration of an empty spool of thread with the message, 'No data available'.

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.

A desktop web screen prompting a user to select a metric in order to see data. The graph area just shows the x and y-axis lines, but no data line.

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.

An illustration of a sad coffee cup with a small error icon next to the text 'Data didn't load' and a prompt to retry loading data.


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.


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.

A desktop screen with a multi-line graph with shapes plus a lot of other visual distractions like UI elements, browser elements and desktop operating system controls.

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.