Charts

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

When there are too many slices in a pie chart, some labels will become hidden (like the purple, red, and light blue slices above). Try using broader categories or grouping those which have relatively small values into a single “Other” category.

DO

Grouping smaller slices into an “Other” category allows users to see all relevant data labels

DON'T

Pie charts are not good for showing data over time because it is difficult to make comparisons between categories. Use a line or bar chart instead.

DON'T

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

Sort Order

In most scenarios, it is best to sort the data values in descending order.

DO

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

Colors

Sort order and chart colors can work in tandem to enhance the visual impact of charts. Keep in mind that color schemes are applied to the entire chart in the order the colors are defined, so it is best practice to sort the data before applying a color scheme. A full list of out of the box color scheme options can be found in Chart Color Scheme Best Practices.

DO

Use sequential color schemes on sorted pie charts to show visual distinctions in size, where dark colors represent large slices and light colors represent small slices

DON'T

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


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.

DO

Use column charts to compare values across time-based categories

DON'T

Don’t use column charts when labels are long, especially if label text is truncated or rotated. Use a bar chart instead.

DO

A column chart is useful for displaying negative and positive values

DON'T

Don’t use a column chart when the differences between values are small. Column charts use forced-zero scaling, which makes it difficult to distinguish similar items when their values are large. Use a line chart instead, because line charts don't use forced-zero scaling.

Sort Order

Sort in ascending order to emphasize the largest value in a data set. Use a sequential sort order if categories are related to time (e.g. sorting by year).

DO

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

DO

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

Colors

Colors can be used to enhance chart readability or display company branding. If there is more than one chart in an interface, use consistent colors across charts. A full list of out of the box color scheme options can be found in Chart Color Scheme Best Practices.

DO

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

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.


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 when labels are long or when there are many categories because the orientation of bar charts helps maintain readability of the labels

DON'T

Don’t use a bar chart for small differences in value. Use a line chart in this scenario.

Sort Order

Sort bar charts in descending order to emphasize the largest value in a data set.

DO

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

Colors

Color schemes can be applied to charts to show meaningful associations between the colors and the data they represent. If there is more than one chart in an interface, use consistent colors across charts. A full list of out of the box color scheme options can be found in Chart Color Scheme Best Practices.

DO

A sequential color scheme is used here to show the progression of statuses

DO

Colors can be applied to individual series of data to highlight key elements in the chart


Line Charts

Line charts are best used for comparing data over time and are more effective at presenting many data points. They are also more 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

DON'T

Charts with more than 5 lines tend to be confusing unless the lines are well separated. 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

Colors

Colors can be strategically applied to enhance chart comprehension or company branding. If there is more than one chart in a single interface, use consistent colors across charts. A full list of out of the box color scheme options can be found in Chart Color Scheme Best Practices.

DO

Use contrasting colors to show contrasting categories

DON'T

Don’t use colors that are too similar because it is harder to map each line to its respective category. Instead, try using a color scheme that has variations in color.

Open in Github

On This Page

FEEDBACK