Graphs

v2.0

Our graphs provide beautiful, simple, and accessible ways to understand sets of data.

Considerations

Keep it simple

Progressive disclosure is key—ensure you are using data visualization as a tool to aid in understanding, not to overwhelm users with too much information all at once.

Tell a story

Focus on what you want to communicate and who you’re communicating to. Understanding data is much easier when there is a human narrative. Think about how you would tell the story in a sentence.

Scale thoughtfully

Our charts scale seamlessly for all screen sizes and users. Use designated colors, interactive states, and scaling behaviors to ensure they are simple and accessible in all contexts.

Anatomy

Title
Tab set
Scaffolding
X-axis
Key
Controls
Y-axis
Baseline

Graphs

Stacked bar chart

Used to compare multiple part-to-whole relationships or ranking a single data set.

Side-by-side bar chart

Used to compare data across categories or two or more criteria.

Stacked area chart

Used to visualize a total over time and how each category contributes to the whole.

Line graph

Used to track changes over time for single or multiple data sets. Line graphs are better at showing smaller changes and/or longer time periods than bar charts.

Progress bar

Used to show progress toward a single goal or total. Can be either linear or circular.

Donut chart

Used to show the breakdown of a single part-to-whole relationship within a total.

Types

Single data sets

We use our primary blue when visualizing a single value, such as progress bars, or a single data set, like line graphs, bar charts, or area charts.

Three examples of different single data graphs. From left to right is progress bar, line, and bar graphs.

Part-to-whole data sets

We use shades of blue, and teal when needed, to represent part-to-whole relationships. This approach keeps the focus on a single, neutral color family, avoiding the use of hues like green and red that may carry specific meanings in other contexts.

Three examples of different part-to-whole graphs. From left to right is donut, stacked area, and bar graphs.

Content

Title

Required. Titles name the data being visualized. Use exacting language.

Use sentence case
No ending punctuation
Aim for 1-2 words

Subtitle

Optional. Use a subtitle when the title alone isn’t enough to understand the chart. Add context that the title is missing. Don’t restate the title.

Use sentence case
No ending punctuation
Aim for 1-2 lines

Primary metric

Optional. Use when one number is the main takeaway and the chart exists to support it. Don't use when there’s multiple equally important values.

Use sentence case
No ending punctuation
For money, see formatting numerals

Controls

Controls are used to change the type of data shown on a graph. They can be tabs, quick filters or drop-downs that are either left aligned or right aligned. Use clear, concise labels to name each option.

Use sentence case
No punctuation
Use parallel structure across options

Tabs

Quick filters

Dropdown

Axis

The X and Y axes help users compare data points consistently across graphs. Choose intervals that avoid overcrowding. For example, if the chart covers a full year of daily data, don't display all 365 days on the X-axis.

Axis labels

Leave at least 16px between labels and include key anchor points. Start the Y-axis at 0 for accurate proportions, and mark significant time points on the X-axis, like financial quarters or days of the week.

Use sentence case
No ending punctuation
For time periods, see formatting time
For money, see formatting numerals

Tooltips

Tooltips reveal precise data values when users hover over or interact with the chart, letting them explore specific data points. The title of the tooltip names the date or time the datapoint is from.

Use sentence case
No ending punctuation

Learn more about writing tooltips.

A stacked area chart with a title in the upper left and dropdown in the upper right. X-axis points to the labels across the bottom of the graph, as well as the marker in the middle of the graph. The marker in the middle of the graph has 3 data points and one of the data points has triggered a tooltip. Y-axis points to the labels moving up the right side.

Interactivity

Interactivity is crucial in maintaining our principles of simplicity and progressive disclosure. Graphs and charts should be simple enough to be understood at-a-glance. Progressive disclosure allows users to easily find the details they need by interacting with specific parts of the graph.

Mouse devices

On web, users can hover or click a specific point in time to see more details. This will open a tooltip above the selected time period and all other shapes on the graph fade to 30% opacity.

Touch devices

On mobile devices, users can interact with graphs through tap and long press gestures. A tap reveals the tooltip for a specific time period, and a second tap dismisses it. Alternatively, a long press reveals the tooltip, allowing users to scroll left or right while pressing to view each time period consecutively.

Tool tips

Make sure the ordering of data sets in the tooltip reflects the order of the segments on the graph from top to bottom. For example, the top segment should be the top value in the flyout, the second value should be the second segment down, etc. The key under the graph should be in the opposite order since the key represents building the segments from the bottom up to the top.

Density

Small screen

The size and number of bars in a bar chart can affect its clarity and meaning when the chart becomes too complex. If bars are narrower than 12px with less than 8px of padding, the chart starts to resemble an area chart, making the bars difficult to read. Aim to keep bars between 12px and 16px wide, with at least 8px of padding between them for optimal readability.

A bar chart containing 4 bars. There is 40px of padding between bars.

16px bars with 40px padding

A bar chart containing 6 bars. There is 32px of padding between bars.

16px bars with 32px padding

A bar chart containing 12 bars. There is 8px of padding between bars.

16px bars with 8px padding

Medium and Large screen

On medium and large screens, the increased real estate allows us to expand the X-axis to display more data in most graphs, often extending the time period and adding more bars in bar charts. However, if consistency in the time period across screen sizes is crucial for the user, you can maintain the same time period and instead adjust the bar width, spacing, and graph inset. On larger screens, bars can widen from 12px to 24px, with at least 8px of padding between them.

Maintain time frame

Increase bar width, padding, and inset.

A bar chart displayed across small, medium and large screens. As the screen size gets wider, the bars increase in amount, and bar width and padding also become wider.

Increase time frame

Increase number of bars, width, and padding.

Color

Data viz color tokens

All of the colors we use in our data visualization patterns have been vetted for accessibility and fit into three categories: trends, charts, and line graphs. You can find the colors we use throughout this page in Color Tokens.

Examples

Desktop screen showing eBay Selling Performance page which has a series of links in a left hand nav, a summary bar with 4 metrics across the top under the page title “Sales”, and a stacked bar chart underneath showing “Total sales”.

Three mobile screens. The first has a donut chart. The second has metrics tiles and a stacked area chart. The third has a top metric and a line graph.

Best practices

Axis

Do separate axis labels with at least 16px of padding.

Don’t place axis labels too closely together or angle the text. If necessary, show every other label or wrap labels onto 2 lines.

Shape

Do use 2px corner radii on outside corners of bar chart segments.

Don’t increase corner radii on bar charts. Rounded edges make the values harder to read and the bars harder to compare.

Density of bar charts

Do maintain between 12px and 24px wide bars with a minimum of 8px padding between them.

Don’t make bars smaller than 12px wide or decrease padding below 8px to show more data. Show less bars or use a different graph to achieve the density of data you are looking for.

Number of data sets

Do show a max of 3 data sets per graph by default.

Don’t show more than 3 data sets by default. A max of 5 data sets can be displayed if the user turns on more.

Interactivity

Do ensure interactive tooltips are aligned above or below all key shapes and data in the graph, even if they overlap the title, controls, or axis. Always include the value and label for each data set within the tooltip.

Don’t align interactive tooltips to the left or right where users fingers may cover important data on touch screens. And don’t rely on the order alone to express the meaning of values.

Graph color

Do use the color themes defined for each graph type and the ordering defined based on number of data sets.

Don’t use colors intended for one chart type in another, such as applying line graph colors in an area chart, and don't create new color themes for graphs that aren’t part of the system.