Charts

Charts

There are a variety of chart types and configurations that can be used to build rich reporting dashboards that provide users with visualizations of their data.

Chart Types

Choosing a Chart Type

Every chart should tell a story. A common mistake in data visualization is to force a dataset into a specific chart type. To avoid this mistake, start by identifying values of interest. Then, decide what story the data should tell, and what information is important for the user to learn.

Finally, determine which chart type will be most effective for telling the story. Ask These questions to help determine the purpose of the chart:

Should the chart depict…

  • Individual parts that make up a whole? (e.g. number of customers per region)
  • Distribution of data? (e.g. average customer rating of products)
    • With positive and/or negative values:
    • With a relatively large number of categories:
  • Trends over time? (e.g. monthly revenue over the last year)
  • Compare values across categories? (e.g. number of customers in each region yearly)

Pie Charts

Pie charts are generally used to show proportional data and can help a user understand the contribution of parts to a whole. Pie charts should only be used to represent data that can be placed into distinct categories and should not consist of more than 5 slices. Always include data and category labels for the slices.

DO

Use pie charts to show proportional data

DON'T

Don’t use multiple pie charts when comparing multiple sets of data. Instead of the above example, use a line chart with categories for each year so users can easily compare values.

DON'T

Don’t use too many slices in a pie chart, as this will cause some labels to become hidden (like the red and light blue slices above). Try using broader categories or grouping those which have relatively small values into a single “Other” category.

Column Charts

Use column charts for direct comparison of data or to show data over time only when the number of time intervals is small. In addition, column charts are useful for displaying data with both positive and negative values.

DON'T

Use column charts to compare values across time-based categories with a relatively small number of intervals

DO

A column chart is useful for displaying negative and positive values because the y-axis can display numbers below zero

Bar Charts

Use bar charts to compare values across categories that are not sequential or time-based. If labels are long or if there are many categories, a bar chart is more effective than a column chart because each label will have sufficient space regardless of the number of categories.

DO

Use bar charts for categories with especially long labels

Line Charts

Line charts are best used for comparing data over time and are effective at presenting many data points. They are also effective for displaying data in scenarios where the differences between data points are small because the y-axis automatically adjusts to fit the data.

Conventionally, the x-axis contains the categories of time, and y-axis contains the frequency of the measured data.

DO

Line charts are useful for depicting time-based categories

DON'T

Charts with more than 5 lines are difficult to decipher. It is recommended to use a column chart for this scenario.

DO

A line chart’s y-axis values are automatically scaled to fit the line chart, which increases the visibility of relatively small differences in data values

DO

Leave gaps in line charts to represent missing data

Sort Order

As with all displays of aggregate data, the sort order should be meaningful and obvious to the user. Always sort chart data by magnitude or by sequential categories, such as time.

Sorting by Magnitude

Pie Chart and Bar Chart

In most scenarios, it is best to sort pie and bar chart data values in descending order to emphasize the largest value in a data set and make it easier for users to compare the relative sizes of slices and bars.

DO

Pie charts sorted in descending order make it easier to quickly compare and identify the relative size of slices

DO

A bar chart sorted in descending order will draw attention to the largest category

Column Chart

Sort column chart data in ascending order to emphasize the largest value in a data set.

DO

A column chart sorted in ascending order will draw attention to the largest column

Sorting by Category

Column Chart and Line Chart

Use a sequential sort order if categories are related to time (e.g. sorting by year).

DO

A column chart sorted by time is appropriate for displaying time-based categories

Height

Choose chart heights based on the amount of data displayed and the chart’s relationship to other page content. For example, tall charts can be used to visualize complex datasets, whereas short charts may be more appropriate for displaying simpler datasets. See the Chart Height reference page for more information on how to implement chart heights.

Visual Balance

DO

Use chart heights that are proportional to surrounding content

DO

Use an appropriate height to maintain visual balance and restrict the overall column from being too tall in comparison to the rest of the interface. In this example, a “Short” height is used to restrict the column from being significantly taller than the rest of the content on the page.

DON'T

Don’t place a chart in a card layout that is too short for the chart to fit in

DON'T

Don’t use mismatched heights for charts placed side-by-side if it results in large areas of unused whitespace

Height Proportional to Size of Data

DON'T

Don’t use a short height for charts with data that users are intended to interact with. Instead, use a taller height to provide ample screen space for the visualization and larger click targets for users to drill down into specific data points.

DON'T

When there are too many categories to display within a fixed height, the chart will automatically hide some of categories. Instead, use “Auto” so the chart height can grow and shrink according to the number of categories in the dataset.

Adapting Charts to Shorter Heights

DO

When using a micro height, the axes can be hidden to reserve more space for the data and legend

DON'T

Don’t use a micro height to display extensive data or labels

Colors

Colors can be used to enhance chart readability or reflect an organization's branding. Color schemes can be applied to charts to show meaningful associations between the colors and the data they represent. A full list of out of the box color scheme options can be found in the Chart Color Scheme reference page.

DON'T

Don’t use more than 5 colors in a single chart. The more colors there are, the more difficult it is to differentiate between colors. Instead, consider combining multiple small categories into a single “Other” category.

Consistent Colors

DON'T

Don’t use multiple color schemes in a single interface because it can be distracting

Colors to Represent Data Values

DO

Use gradient color schemes on sorted pie charts to reflect the relative size of the slices, where darker colors represent larger slices and lighter colors represent smaller slices

DO

A column chart sorted by category with a gradient color scheme shows a clear association between the colors and the values they represent

Colors for Distinct Categories

DO

Use contrasting colors to depict contrasting categories

DO

Use a bright, primary color to direct the user’s eye to the most important value or value set in a chart, and a muted color to deemphasize other, less important values

DO

Colors can be applied to individual series of data to highlight key elements in the chart. Consider the connotation of the color you choose (e.g Red implies a negative status, like “Critical”).

DON'T

Gradient color schemes should not be used for line charts with multiple lines, as the similar colors are difficult for users to map to each category. Instead, try using a color scheme that has distinct variations in color.

Text

Labels, Legends, and Tooltips

Axis labels and legends are used to provide context and help users interpret chart data more accurately. However, they can be removed depending on the purpose of the chart and how much space is available. Keep in mind that additional contextual information might need to be provided if certain elements of the chart are hidden.

DON'T

Don’t use column charts when x-axis labels are long, especially if label text is truncated or rotated. Use a bar chart instead to allow more space for labels.

DON'T

When hiding the axes, do not leave the series and category labels undefined, because they provide contextual information in the tooltip

DO

Hiding axes can enhance a visualization by reducing the amount of clutter. However, when doing so it is important to provide additional context to ensure readability like the products list does in this example.

DON'T

Although tooltips are enabled, don’t hide the axes and labels if there is enough space to display them. The labels enable users to easily understand the information on the chart.

DO

When there are too many categories, use broader category labels or group those which have relatively small values into a single “Other” category

DON'T

Don’t include a legend when there is only one data series. Instead, try using a descriptive title to indicate the data that is plotted.

DON'T

Don’t show the series label on the chart when multiple pie charts are displayed in a row or column, as it can result in inconsistent sizing across charts. Instead, use a legend to display the labels.

Open in Github

On This Page

FEEDBACK