Chart

Usage

Chart types

Simplified bar chart

The simplified bar chart displays a single, primary metric (e. g., current year energy consumption), compares that metric to one or more other metrics, and displays it in the context of qualitative performance ranges (e. g., poor, satisfactory, and good).

The simplified bar chart is a simple bar that combines the three visual characteristics of length, color, and position to provide the viewer with a variety of information at a glance. It serves as a replacement for gauges and meters to overcome their basic problems: They usually display too little information, take up a lot of space, and are cluttered with useless and distracting elements.

When to use

Use a chart in the following cases:

• To see what part of the whole my metric represents.
• evaluate my key figure.
• comparing my metric with a reference value.

When not to use

Charts are not intended to be used:

• For datasets with very large numerical differences between the included metrics.
• For datasets with more than 5 different key figures.

Single & stacked values

If the context is clear the legend underneath is obsolete. This may be achieved through a self-explanatory headline or if the overall page content conveys coherence.

A simplified stacked bar chart displays a total value of the bar (all the segment values added together).

A simplified 100% stacked bar chart displays part to whole relationship.

Do’s and don’ts

Line graph

Line graphs display information as a series of data points called ‘markers’ connected by straight line segments.

Line graphs are like scatter plots except the measurement points are ordered (typically by their x-axis value) and joined with straight line segments. Line graphs show how a data changes at equal intervals of time.

When to use

Line graphs are ideal to:

• Visualize trends over time.
• Compare several data sets.
• Show continuous data.
• Show minor deviations in data.

When not to use

Line graphs not the tool of choice when comparing more than 5-7 lines at a time.

Column chart (vertical) and bar chart (horizontal)

Column charts and bar charts use rectangles known as bars to represent proportional values. One axis of the chart shows the specific categories being compared and the other axis represents a discrete value.

When to use

Use a vertical column chart when:

• Visualizing categories for comparison.
• Showing numerical comparisons, relationships, and trends between categories.
• Tracking changes over time but only when those changes are significant.

The number of bars in a chart depends on the size of the chart area. On charts that fill the entire main region, more bars can be displayed than on a small chart. If the chart area is small and there are many bars, consider following options:

• Split the chart into two or more charts
• Horizontal scrolling
• Zooming or other view options to reduce the amount of shown data

When not to use

Avoid column and bar charts when visualizing metrically continuous data.

Do’s and don’ts

Stacked bar chart

Stacked bar charts display multiple data sets on top of each other (or alongside one another for horizontal orientations,) showing how larger data categories are divided into the smaller segments.

The proximity of the stacked bars emphasizes the bars relations to the total amount, as well as, across segments. Bars on the chart may be arranged in any order. However, the legend items should be placed in the same order as in the chart. This enables a faster visual perception.

When to use

Stacked bar charts are ideal for visualizing a total, however, it can be hard to compare the sizes of individual categories.

Pie chart

When to use

Pie charts are suitable for:

• Visualizing percentage or proportional data.
• Showing parts of whole.

When not to use

It is not recommended to compare more than 5-6 slices.

Do’s and don’ts

Rose chart (polar area chart)

Rose charts or polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment is different depending on the value. They are a hybrid of pie charts and histograms. Longer sections are highlighted more than they should due to their larger area. As a result, increases in value are shown disproportionately, tempting the reader to exaggerate the differences.

When to use

Rose charts should be used to:

• Visualize and compare cyclic data.
• Show a trend over time.

When not to use

Avoid Rose charts when accurately displaying increases in value use for example a bar chart instead.

Do’s and don’ts

Donut chart

When to use

Donut charts are ideal for:

• Visualizing percentage or proportional data.
• Showing parts of whole.

When not to use

It is not recommended to compare more than 5-6 slices.

Do’s and don’ts

Gauge chart

When to use

Gauge charts shall be used for:

• Visualizing speed, satisfaction, volume, temperature etc.
• Projecting progress or deadlines.
• Showing changes for a linear metric.
• Visualizing whether a value is within a valid range (when used together with limits).

When not to use

Avoid using gauge charts to display trends over time.

Heat map

A heat map is a graphical representation of data that uses a color-coding system to represent different values. Typically, darker colours mean greater values and lighter colours represent lower values. However, use cases where a mental model with semantic colors exists should use those instead. Heatmaps are used in various forms of analysis.

With heat maps, the color coding represents a hierarchy within the variables. Heat maps are good for showing comparison, correlation, distribution, and trends over time.

When to use

Heatmaps are suitable for:

• Visualizing variance across multiple variables to display patterns in comparison, correlation,distribution, or trends over time.
• Visualizing complex data.

When not to use

Do not use heatmaps when you need to represent (social, contextual, ..) connections or hierarchies.

Scatter plot

Scatter plots use horizontal and vertical axes to plot data points which shows how much one variable is affected by another. The relationship between two variables is called their correlation.

Scatter plots usually consist of a large body of data. The closer the data points come when plotted to making a straight line, the higher the correlation between the two variables, or the stronger the relationship. If the data points make a straight line going from the origin out to high x- and y-values, then the variables are said to have a positive correlation. If the line goes from a high-value on the y-axis down to a high-value on the x-axis, the variables have a negative correlation.

When to use

Scatter Plots are ideal for:

• Visualizing correlation between two variables.
• Comparing large numbers of data points.

When not to use

Avoid the usage of scatter plots:

• When your data is not at all related.
• When you have too large a set of data that it clogs up the entire graph.
• Comparing too many relationships or trends.

General construction

Rectangular charts

1. Chart title (optional), 2. Subtitle or timestamp (optional), 3. Tick label, 4. Axis title (optional), 5. Axes, 6. Legends, 7. Actions (optional), 8. Plot area, 9. Tooltip

Circular charts

1. Chart title (optional), 2. Subtitle or timestamp (optional), 3. Label, 4. Legends, 5. Actions (optional), 6. Tooltip, 7. Big number (optional)

Options

Tick labels

• Tick labels should be placed at (relatively) round numbers.
• We recommend to rotate tick labels on the x axis if they are too long (e. g. by 45 degree as shown above).

Plot area

• Plot areas have by default one horizontal (X-axis ) and one vertical (Y-axis) axis.
• Grid intervals have an equal spacing.
• Grid lines, if present, should stand out from the background but should always be muted.

Multi axis chart

When to use

Use multiple axes in the following cases:

• If you have limited space and want to quickly establish the relationship between two variables.
• To show two data series with the same measure, but different magnitudes. See image above with domestic sales and international sales.
• To show two data series that show the relative and the absolute values of something. For example GDP per capita in comparison to absolute GDP of a country.
• To show two data series for totally different values. For example GDP of a country in comparison to life expectation.
• To show one data series, but the y-axis shows different scales. For example values in Fahrenheit and in Celsius.

Best practice

• Make sure that your Y-axis are related to each other. Charts with two axes should be related in a meaningful way so that the two axes help tell your story effectively.
• Place the primary Y-axis on the left side. The y-axis on the left side is often viewed first. Make sure your most important variable is placed there.
• Try to use contrasting colors so that they can be easily distinguished from each other.
• Use primarily units as axis labels. If a semantic label is shown, add the unit in brackets, and take longer labels into account (e. g. max-width with truncation).

Difficulties with diagrams with two axes

• It is often not immediately clear which data series belongs to which axis.
• Crossing lines can be misleading.
• It may appear that two datasets are moving at the same rate.
• Zero baselines at different heights can be misleading.

Behavior

Optional behavior for highlighting single categories

When you hover over the legend, the corresponding axis is highlighted and the associated grid lines are displayed. When you hover over the tick labels, the axis is highlighted and the associated grid lines are displayed, as well as the corresponding curves.

Tooltip

Tooltips are the labels that appear when users hover over data points in the chart. They appear by default on all charts and can display any combination of data values, text, and/or tokens.

Legends

A legend helps the user make the necessary associations so that the diagram makes sense.

When to use

Use tooltips in your visualization in the following cases:

• To help users understand what is being displayed.
• To identify data in visualizations by their color, size, or other distinguishing characteristics.
• Use a legend only if you cannot assume that there is enough space to attach labels directly.
• Legends are usually used in data visualizations when more than one color or line type is used.
• To reduce clutter and make your data visualization more user-friendly.

Legend anatomy

1. Legend title (optional), 2. Legend indicator, 3. Legend label, 4. Legend subtext (optional)

Placement

By default, legends are positioned at the bottom of a chart. Depending on the layout and context of the page, you can position legends at the top, below the chart title/subtitle, to the left, or to the right of the chart in relation to the plot area.

When using sequential or divergent data, make sure that the legend is displayed in a vertical format next to the visualization so that the data can be properly ordered.

1. top, 2. left, 3. bottom, 4. right

Long legend labels

Ordering elements

When using sequential data, the highest number should appear at the beginning of the legend and the lowest number at the end.

For divergent data, a vertical legend is recommended, with the most extreme values appearing at opposite ends of the legend.

Interactions

Hover over the legend of a category

When hovering the mouse pointer over the legend of a category, the opacity of all other categories in the diagram is reduced to 30%.

Click to toggle a value

When clicking on the legend of a category, the information is toggles and the category is hidden. The legend changes to a deselected state. Toggling the category again shows the hidden item again and the legend changes to selected state.

Legend overflow

Hidden legend

Hide legends when there is not enough space to show a legend like on small cards. When legends are hidden, a “Show Legends” button is added to allow users to view the legend by tapping on it.