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.

An example of a bar chart.

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.

An example of a column chart.
A column chart for small amounts of data, or larger horizontal spaces
An example of a row chart, where bars stack vertically.
A row chart for when you have limited space for labels and bars
An example of a grouped or dodged column chart, with bars grouped into smaller categories.
Bars are laid out in groups when representing multi-set data. Here, it is okay to use multiple colors as long as you keep to a max of 4 to increase readability.

Stacked bar charts


Stacked bar charts break bars into smaller categories so that their relationship to the whole amount can be seen.

An example of a stacked bar chart.
Use stacked bar charts only with a small number of categories as they can easily become hard to read. Also, keep in mind that the segments of the bar don’t align with a set baseline, so these are mainly for comparing whole amounts.

Line charts

Trends; Comparison

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.

An example of a line chart.

Donut charts


Donuts are a quick way to see parts of a whole as percentages. An example is breaking up an audience by gender.

An example of a donut chart.
Use donuts and pie charts only with 2–3 categories and percentage values as they can easily become hard to read. Donut charts aren’t good for conveying more complex information and allowing you to drill down; a bar chart is better.

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.

An example of a funnel chart.

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.

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.

A line chart with graph 5 x-axis graph lines, a dot on one of the graph line points and a tooltip.

Keep axis lines minimal and light since other more important visual information may be inside of a chart and its surrounding area.

A line chart with many dark x and y-axis graph lines plus a tooltip and a dot one of the graph line points.

Add too many dark axis lines that can make information hard to read or overwhelming.

A card with graph axis lines that stop before they reach the edge of the card.

Show axis lines only within the area that includes data, so there is a clear start and end.

A card with graph axis lines that go all the way to the edge of the card.

Extend axis lines to the edge of the chart container making it seem like there’s a continuation beyond the edges of the container.


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.


This will depend on the number of categories you need to compare. But, in general, be mindful of the space provided when comparing categories.

A graph with five short y-axis labels and 3 short x-axis labels.

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.

A graph with too many labels scrunched together and labels that are diagonal.

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.


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.

A line chart with a legend in the bottom left corner.

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.

A line chart with a legend in the bottom left corner.


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


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.

An example of a multi-line chart different shapes on each line end-point.
Shapes can be used on line graphs to help people with severe colorblindness or other visual impairments tell categories apart.
A bar chart with different patterns on each bar to better distinguish between chategories.
Patterns can be used in addition to color to help better tell bars apart.

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.

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.

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!