Data visualization

Data visualization depicts information in graphical form.

beta

Guidance in beta reflects the latest Material Design insights. It may significantly change to support new research and code.

Learn more or send us your feedback.


Principles

Data visualization is a form of communication that portrays dense and complex information in graphical form. The resulting visuals are designed to make it easy to compare data and use it to tell a story – both of which can help users in decision making.

Data visualization can express data of varying types and sizes: from a few data points to large multivariate datasets.

Accurate

Prioritize data accuracy, clarity, and integrity, presenting information in a way that doesn’t distort it.

Helpful

Help users navigate data with context and affordances that emphasize exploration and comparison.

Scalable

Adapt visualizations for different device sizes, while anticipating user needs on data depth, complexity, and modality.


Types

Data visualization can be expressed in different forms. Charts are a common way of expressing data, as they depict different data varieties and allow data comparison.

The type of chart you use depends primarily on two things: the data you want to communicate, and what you want to convey about that data. These guidelines provide descriptions of various different types of charts and their use cases.

Types of charts

Change over time charts show data over a period of time, such as trends or comparisons across multiple categories. Common use cases include: Category comparison...

Change over time

Change over time charts show data over a period of time, such as trends or comparisons across multiple categories.

Common use cases include:

  • Stock price performance
  • Health statistics
  • Chronologies
Change over time charts include:

1. Line charts
2. Bar charts
3. Stacked bar charts
4. Candlestick charts
5. Area charts
6. Timelines
7. Horizon charts
8. Waterfall charts

Category comparison

Category comparison charts compare data between multiple distinct categories.

Use cases include:

  • Income across different countries
  • Popular venue times
  • Team allocations
Category comparison charts include:

1. Bar charts
2. Grouped bar charts
3. Bubble charts
4. Multi-line charts
5. Parallel coordinate charts
6. Bullet charts

Ranking

Ranking charts show an item’s position in an ordered list.

Use cases include:

  • Election results
  • Performance statistics
Ranking charts include:

1. Ordered bar charts
2. Ordered column charts
3. Parallel coordinate charts

Part-to-whole

Part-to-whole charts show how partial elements add up to a total.

Use cases include:

  • Consolidated revenue of product categories
  • Budgets
Part-to-whole charts include:

1. Stacked bar charts
2. Pie charts
3. Donut charts
4. Stacked area charts
5. Treemap charts
6. Sunburst charts

Correlation

Correlation charts show correlation between two or more variables.

Use cases include:

  • Income and life expectancy
Correlation charts include:

1. Scatterplot charts
2. Bubble charts
3. Column and line charts
4. Heatmap charts

Distribution

Distribution charts show how often each values occur in a dataset.

Use cases include:

  • Population distribution
  • Income distribution
Distribution charts include:

1. Histogram charts
2. Box plot charts
3. Violin charts
4. Density charts

Flow

Flow charts show movement of data between multiple states.

Use cases include:

  • Fund transfers
  • Vote counts and election results
Flow charts include:

1. Sankey charts
2. Gantt charts
3. Chord charts
4. Network charts

Relationship

Relationship charts show how multiple items relate to one other.

Use cases include

  • Social networks
  • Word charts
Relationship charts include:

1. Network charts
2. Venn diagrams
3. Chord charts
4. Sunburst charts

Selecting charts

Multiple types of charts can be suitable for depicting data. The guidelines below provide insight into how to choose one chart over another.

Showing change over time

Change over time can be expressed using a time series chart, which is a chart that represents data points in chronological order. Charts that express...

Change over time can be expressed using a time series chart, which is a chart that represents data points in chronological order. Charts that express change over time include: line charts, bar charts, and area charts.

Type
of
chart
Usage Baseline
value *
Quantity of time
series
Data type
Line chart To express minor variations in data Any value Any time series (works well for charts with 8 or more time series) Continuous
Bar chart To express larger variations in data, how individual data points relate to a whole, comparisons, and ranking Zero 4 or fewer Discrete or categorical
Area chart To summarize relationships between datasets, how individual data points relate to a whole Zero (when
there’s more than one series)
8 or fewer Continuous

* The baseline value is the starting value on the y-axis.


Bar and pie charts

Both bar charts and pie charts can be used to show proportion, which expresses a partial value in comparison to a total value. Bar charts,...

Both bar charts and pie charts can be used to show proportion, which expresses a partial value in comparison to a total value.

  • Bar charts express quantities through a bar’s length, using a common baseline
  • Pie charts express portions of a whole, using arcs or angles within a circle

Bar charts, line charts, and stacked area charts are more effective at showing change over time than pie charts. Because all three of these charts share the same baseline of possible values, it’s easier to compare value differences based on bar length.

DoUse bar charts to show changes over time or differences between categories.
Don'tDon’t use multiple pie charts to show changes over time. It’s difficult to compare the difference in size across each slice of the pie.

Area charts

Area charts come in several varieties, including stacked area charts and overlapped area charts: Overlapping area charts are not recommended with more than two time...

Area charts come in several varieties, including stacked area charts and overlapped area charts:

  • Stacked area charts show multiple time series (over the same time period) stacked on top of one another
  • Overlapped area charts show multiple time series (over the same time period) overlapping one another

Overlapping area charts are not recommended with more than two time series, as doing so can obscure the data. Instead, use a stacked area chart to compare multiple values over a time interval (with time represented on the horizontal axis).

DoUse a stacked area chart to represent multiple time series and maintain a good level of legibility.
Don'tDon’t use overlapped area charts as it obscures data values and reduces readability.

Style

Data visualizations use custom styles and shapes to make data easier to understand at a glance, in ways that suit the user’s needs and context.

Charts can benefit from customizing the following:

  • Graphical elements
  • Typography
  • Iconography
  • Axes and labels
  • Legends and annotations

Styling different types of data

Visual encoding is the process of translating data into visual form. Unique graphical attributes can be applied to both quantitative data (such as temperature, price,...

Visual encoding is the process of translating data into visual form. Unique graphical attributes can be applied to both quantitative data (such as temperature, price, or speed) and qualitative data (such as categories, flavors, or expressions).

These attributes include:

  • Shape
  • Color
  • Size
  • Area
  • Volume
  • Length
  • Angle
  • Position
  • Direction
  • Density

Expressing multiple attributes

Multiple visual treatments can be applied to more than one aspect of a data point. For example, a bar color can represent a category, while a bar’s length can express a value (like population size).

Shape can be used to represent qualitative data. In this chart, each category is represented by a specific shape (circles, squares, and triangles), which makes it easy to compare data both within a specific range or against other categories.

Shape

Charts can use shapes to display data in a range of ways. A shape can be styled as playful and curvilinear, or precise and high-fidelity,...

Charts can use shapes to display data in a range of ways. A shape can be styled as playful and curvilinear, or precise and high-fidelity, among other ways in between.

Level of shape detail

Charts can represent data at varying levels of precision. Data intended for close exploration should be represented by shapes that are suitable for interaction (in terms of touch target size and related affordances). Whereas data that’s intended to express a general idea or trend can use shapes with less detail.

DoThe bars in this chart have subtle rounded corners, ensuring that the top of the bar precisely measures the bar’s length.
Don'tDon’t use shapes that make it hard to read a chart, such as bars with imprecise top edges.

Color

Color can be used to differentiate chart data in four primary ways: Color can highlight an area of focus, when it is used sparingly. It’s...

Color can be used to differentiate chart data in four primary ways:

  • Distinguishing categories from one another
  • Representing quantity
  • Highlighting specific data
  • Expressing meaning

Color distinguishes categories

Color is used to define categories in a donut chart.

Color represents quantity

Color is used to represent data values in a map.

Color highlights data

Color is used to highlight specific data in a scatterplot.

Areas of focus

Color can highlight an area of focus, when it is used sparingly. It’s not recommended to use a substantial amount of color highlights, as they can distract and hinder user focus.

DoUse a combination of color highlights and neutral colors to provide contrast and emphasis.
CautionMany colors in a single chart can hinder focus.

Color indicates meaning

DoReinforce the meaning of chart colors with other visual cues, like icons.
Don'tDon’t use color alone to indicate meaning.

Accessibility

To accommodate users who don’t see color differences, you can use other methods to accentuate data, such as high-contrast shading, shape, or texture.

Applying text labels to data also helps clarify its meaning, while eliminating the need for a legend. See more in color contrast.


Line

Chart lines can express qualities about data, such as hierarchy, highlights, and comparisons. Line styles can be styled in different ways, such as using dashes...

Chart lines can express qualities about data, such as hierarchy, highlights, and comparisons. Line styles can be styled in different ways, such as using dashes or varied opacities.

Lines can be applied to specific elements, including:

  • Annotations
  • Forecasting elements
  • Comparative tools
  • Confidence intervals
  • Anomalies
DoVary a line’s texture to represent different data types.
Don'tDon't use different colors to show periodical variation for the same data category.

Typography

Text can be used to label different chart elements, including: The text with the highest level of hierarchy is usually the chart title, with axis...

Text can be used to label different chart elements, including:

  • Chart titles
  • Data labels
  • Axis labels
  • Legend

The text with the highest level of hierarchy is usually the chart title, with axis labels and the legend having the lowest level of hierarchy.

Scale category Typeface Font Size
1. Chart title Roboto Regular 18pt
Chart subtitle Roboto Regular 14pt
2. Data label Roboto Regular 22pt
Sub-label Roboto Regular 14pt
3. Axis labels Roboto Regular 12pt
4. Legend labels Roboto Regular 12pt

Text weight

Headings and varying font weights can communicate which content is more (or less) important than other content in the hierarchy. However, these treatments should be used sparingly, with a limited number of typographic styles.

DoBold used just for one or two key elements creates a balanced design.
Don'tBold used on too many elements can make it harder to identify important elements.

Iconography

Iconography can represent different types of data in a chart and improve a chart’s overall usability. Iconography can be used for: When placing icons in...

Iconography can represent different types of data in a chart and improve a chart’s overall usability.

Iconography can be used for:

  • Categorical data to differentiate groups or categories
  • UI controls and actions, such as filter, zoom, save, and download
  • States, such as errors, no data, completed states, and danger

When placing icons in a chart, it’s recommended to use universally recognizable symbols, particularly when representing actions or states, such as: save, download, completed, error, and danger.

DoUse labels along with icons to clearly represent key information.
Don'tAvoid using solely icons and symbols to represent important information.
Icons supplement color in conveying meaning.

Labelled axis

A labelled axis, or multiple axes, indicates the scale and scope of the data displayed. For example, line charts display a range of values along...

A labelled axis, or multiple axes, indicates the scale and scope of the data displayed. For example, line charts display a range of values along both horizontal and vertical labelled axes.

Bar charts should always start at the x-axis baseline value of zero.
Consider removing axes altogether to keep the data as the focal point. You can place values directly on their corresponding chart elements.

Bar chart baseline

Bar charts should start at a baseline (the starting value on the y-axis) of zero. Starting at a baseline that isn’t zero can cause the data to be perceived incorrectly.

DoA bar chart starting at the zero baseline
Don'tDon’t start the baseline at values other than zero. This baseline starts at 20%, making the bar differences look more dramatic.

Axis labels

Label usage should reflect the most important data insights in a chart. Axis labels should be used as needed, and in consistent ways across a UI. Their presence should not inhibit reading the chart.

DoSupport legibility by using a balanced number of axis labels.
Don'tDon’t overload the chart with numerous axis labels.

Text orientation

Text labels should be placed horizontally on the chart so that they are easy to read.

Text labels should not:

  • Be rotated
  • Stacked vertically
DoOrient text horizontally on bar charts, rotating the bars if needed to make space.
CautionDon’t rotate bar labels, as it makes them difficult to read.

Legends and annotation

Legends and annotations describe a chart’s information. Annotations should highlight data points, data outliers, and any noteworthy content. On desktop, it’s recommended to place a...

Legends and annotations describe a chart’s information. Annotations should highlight data points, data outliers, and any noteworthy content.

1. Annotation
2. Legend

On desktop, it’s recommended to place a legend below a chart. On mobile, place the legend above the chart to keep it visible during interactions.

Labels and legends

Chart elements can be labeled directly in simple charts. However, charts that are dense (or part of a larger group of charts) can display labels in a legend.

A line chart using direct labeling
A line chart using a legend

Small displays

Charts displayed on wearables (or other small screens) should be a simplified version of the mobile or desktop chart.

Charts displayed on wearables (or other small screens) should be a simplified version of the mobile or desktop chart.

DoAnnotate key points on the graph to describe the data. In this example, the highest and lowest data values are displayed.
CautionDon’t place key data points off-screen, as it requires the user to scroll to see them.
Threshold lines give users context about the data displayed.

Behavior

Charts provide interaction patterns that give users control over the data displayed. These patterns let users focus on a chart’s specific values or ranges.

The following recommended interaction patterns, styles, and effects (like haptic feedback) can improve user understanding of chart data:

  • Progressive disclosure provides a clear path to unveiling details, accessible on demand.
  • Direct manipulation allows users to directly act on UI elements, minimizing the number of actions needed on a screen, including: zooming and panning, pagination, and data controls.
  • Changing perspective enables one design to work for different users and data types, such as data controls and motion.

Progressive disclosure

Reveal chart details using progressive disclosure, which allows users to view specific data points as needed.

Reveal chart details using progressive disclosure, which allows users to view specific data points as needed.

Revealing details (Desktop)

On desktop, a hover state can reveal more detailed data.
Revealing details (Mobile)

On mobile, a touch and hold gesture displays a tooltip placed above the chart.

Zooming and panning

Zooming and panning are popular chart interactions that affect how closely users can study data and explore the chart UI. Zooming changes whether the UI...

Zooming and panning are popular chart interactions that affect how closely users can study data and explore the chart UI.

Zooming

Zooming changes whether the UI is shown from either nearer or farther away. The device type determines how zooming is performed.

  • On desktop, zoom occurs through clicking and dragging, or scrolling
  • On mobile, zooms occurs using pinch to zoom

When zooming isn’t the primary action, it can be implemented via clicking and dragging (on desktop) or double tapping (on mobile).

Panning

Panning allows the user to explore the UI that expands beyond the screen. It should be constrained in ways that make sense for the data displayed. For example, if one dimension of a chart is more important than another, the direction of panning can be restricted to only that direction.

The act of panning is often paired with zooming.

On mobile, panning is often implemented via gestures, such as one-finger swiping.

Zooming on desktop
Panning on desktop

Pagination

On mobile, pagination is a common pattern that allows users to view the previous or next chart by swiping right or left.

On mobile, pagination is a common pattern that allows users to view the previous or next chart by swiping right or left.

On mobile, a user can swipe to the right to view the previous day.

Data controls

Data can be filtered or changed using toggle controls, tabs, and drop-downs. These controls can also display metrics, while users adjust the controls.

Data can be filtered or changed using toggle controls, tabs, and drop-downs.

These controls can also display metrics, while users adjust the controls.

Toggle controls, tabs, and dropdown menus can change or filter data.

Motion

Motion can enhance and reinforce the relationship between data and how users interact with it. Motion should be used purposefully (not decoratively), expressing the connection...

Motion can enhance and reinforce the relationship between data and how users interact with it. Motion should be used purposefully (not decoratively), expressing the connection between different states and spaces.

Motion should feel logical, smooth, and responsive, without obstructing the user's journey.

In this example, data animates between being displayed by day and then by week. Data outside of the selected date range isn’t displayed during the transition, reducing complexity.
Animation shows how two different diagrams are related.

Empty states

Empty graphs and charts can display content that suggests what to expect when data is available. Where applicable, character animations can be shown to provide...

Empty graphs and charts can display content that suggests what to expect when data is available.

Where applicable, character animations can be shown to provide delight and encouragement.

Characterful animations enhance an otherwise empty graph.

Dashboards

Data visualization can be displayed across a series of multiple charts, in UIs called dashboards. Multiple, separate charts can sometimes better communicate a story, rather than one complex chart.

Dashboard design

A dashboard’s purpose should be reflected in its layout, style, and interaction patterns. Its design should suit how it will be used, whether it’s a...

A dashboard’s purpose should be reflected in its layout, style, and interaction patterns. Its design should suit how it will be used, whether it’s a tool for making a presentation or deeply exploring data.

A dashboard should:

  • Prioritize the most important information (using layout)
  • Display a focal point that prioritizes information according to hierarchy (using color, position, size, and visual weight)
Information should be prioritized and arranged based on the questions asked of the data. In this example operations dashboard, the following user questions are considered:
1. Issues that need attention
2. Time that issue occurred
3. Location that issues occurred
4. Other variables affected by the issue

Analytics dashboards

Analytics dashboards enable users to explore multiple sets of data and discover trends. Usually these dashboards include complex charts that enable the discovery of data...

Analytics dashboards enable users to explore multiple sets of data and discover trends. Usually these dashboards include complex charts that enable the discovery of data insights.

Use cases include:

  • Highlighting trends over time
  • Answering “why” and “what if” questions
  • Forecasting
  • Creating in-depth reports

Analytics dashboard examples:

  • Tracking ad campaign performance over time
  • Tracking the sales and revenue generated by a product through its lifecycle
  • Showing city population trends over time
  • Tracking climate data over time
Analytics dashboard displaying climate data

Operations dashboards

Operations dashboards are designed to answer a predefined set of questions. They are typically used to complete monitoring-related tasks. In most cases, these types of...

Operations dashboards are designed to answer a predefined set of questions. They are typically used to complete monitoring-related tasks.

In most cases, these types of dashboards feature current information arranged in a set of simple charts.

Use cases include:

  • Tracking current progress against a goal
  • Tracking system performance in real time

Operations dashboard examples:

  • Tracking call center activities such as call volume, wait times, call length, or call types
  • Monitoring the health of an app running on Cloud.
  • Displaying stock market performance
  • Monitoring telemetry data on a race car
Operations dashboard displaying device storage metrics

Presentation dashboards

Presentation dashboards provide a curated snapshot on a topic of interest. These dashboards typically include a few small charts or a scorecard, with dynamic headlines...

Presentation dashboards provide a curated snapshot on a topic of interest.

These dashboards typically include a few small charts or a scorecard, with dynamic headlines that explain the trends and insights provided in each supporting chart.

Use cases include:

  • Providing an overview of key performance indicators
  • Creating a high-level executive summary

Presentation dashboard examples:

  • Providing an overview of investment account performance
  • Providing a summary of product sales and market share data
Presentation dashboard displaying website usage data

Up next