How to Select Charts for Effective Data Display

by | Aug 18, 2016 | General BI

Reading Time: 16 minutes

effective data displayToday’s dashboard environments provide dashboard designers with a rich set of indicators and charts, ranging from bullet graphs to spark lines to bar charts to bubble graphs. Additionally, numerous formatting options such as splines and 3D displays add even more complexity.

Tweet: How to select charts for effective data display

To the casual observer, charts may appear to be largely interchangeable and are simply left to the discretion of the dashboard designer. But as the art and science of effective dashboard design has evolved, data visualization gurus have established some guidelines regarding which charts and indicators to use for various types of data and how to present those charts most effectively. This matter is receiving increasing media attention as dashboards migrate to the limited display “real estate” found on mobile devices, placing a premium on efficient dashboard-based information delivery. Here we’ll examine the best ways for effective data display so your users clearly understand the data.

Basic charts

This category includes line, bar, point, linear bubble, and pie charts. These charts are simple to construct and very easy for users to comprehend, because they display exactly one data element alongside one or more quantitative metrics describing that element.

Bar charts

In Figure 1 below, the bar chart displays the product brand for a supply chain company. There are two metrics describing that dimension: total cases sold and total revenue. Depending on how much dashboard space is available, the designer could have displayed several additional metrics. Although this bar chart is displayed in a 3D format, it adds no additional information content. However, it may increase the visual impact of your dashboard depending on the style preferences of your users. Don’t use fancy display options just because your BI tool provides them. Instead, ask yourself what, if any, additional benefit these options provide.

3D bar chart

Figure 1 – 3-D bar chart

Line chart comparisons

While line and point charts might appear to be interchangeable with bar charts, these two charts are most effective when used to display time or date-based dimensions. As with bar charts, you can display multiple quantitative metrics in a single chart, provided that the chart does not get too crowded. In Figure 2 below, the mean statistic is superimposed over each metric. This can alert dashboard users when a particular metric has deviated too far from expected behavior, which can be either good or bad, depending on the metric.

If statistics such as mean, median or regression lines are requested by end users or help to convey important information that is not immediately obvious by looking at the chart, then display it. If not, don’t clutter your charts with the extra information. Most importantly, make sure the statistic is valid. Displaying a regression line through only 3 points is not only statistically invalid, but it also implies a trending relationship that probably does not exist. Don’t mislead your users by displaying erroneous information.

Line chart comparison

Figure 2 – Line chart comparison against mean

Point chart

A point chart is simply a line chart without the connecting lines. Point charts are useful for displaying a single quantitative metric, but become confusing when multiple metrics are displayed. The point chart in Figure 3 below would be easier to understand as an area chart, because the cost and revenue metrics would be clearly differentiated.

Point chart

Figure 3 – Point chart

Spline chart

The spline chart, shown in Figure 4 below, is probably one of the most misused formatting options found in dashboards. Intended to make boring line charts more visually appealing by turning lines into curves, splines should rarely if ever be used, since they imply that the underlying data can be modeled by a polynomial relationship. This error is similar to the regression line mentioned previously, and should be used only when a polynomial relationship truly exists.

Spline chart

Figure 4 – Spline chart

Two line charts

With their limited display real estate, dashboards present designers with the dual challenges of maximizing the information content displayed while avoiding clutter and end-user confusion. One way to meet this challenge is to display multiple data series in a single graph as shown in Figure 5. But pay close attention to scaling. The revenue metric has relatively little variance compared to the cost metric. Therefore, using a single vertical scale makes the revenue metric appear as a nearly flat line.

2-line charts

Figure 5 – 2 line charts may require separate horizontal axis

Linear bubble chart

By scaling cost separately on the right side of the chart and using a smaller chart increment, this chart brings variability to the user’s attention.

When dashboard space is at a premium, an additional quantitative metric can be displayed on a chart without using a separate data series. In this linear bubble chart, the revenue metric is displayed by varying the diameter of the bubbles, rather than cluttering the chart with a third set of revenue bubbles. Be sure that your chart legend makes users aware that the bubble diameter is being used for this purpose.

Linear bubble chart

Figure 6 – Linear bubble chart

Pie chart

Pie charts are a compact tool for displaying data elements that have relatively few components and only one quantitative metric. They require that the component values sum to 100% and that no component is negative. By using a “catch-all” category labeled “Other”, the smallest (and likely least significant) data points are consolidated. This avoids graph clutter and draws the user’s attention to the important data points on the pie chart. Depending on the size of a pie chart, display a maximum of 7 to 10 data points. For example, if the distribution of data is severely skewed, such as 80%, 10%, 5%, 1%, 1%, 1%,1%,1%, it makes more sense to consolidate the 1% data points into an “Other” category. That is, unless specificity of the break down is a necessary part of the information delivery. In such cases, a list or table may work more effectively.

"Figure

This illustrates another potential problem to plan for when selecting dashboard chart types: high variability in the underlying data series. What happens when your prototype data resembles the 8 relatively similar categories shown in the chart above, but varies from update to update, at times resembling a severely skewed distribution? Dashboard designers obviously can’t anticipate every nuance of their future data feeds, but enough existing data should be run through your dashboard during the design phase to see what your charts look like at the extremes.

Displaying two data elements in a single chart

You can adapt basic charts such as bar, line, point, and bubble charts to display the intersection of two data elements. The following three charts display revenue for the dual elements of fiscal quarter and salesperson. If your end user is more interested in intra-quarter comparisons between sales people, the bar chart (Figure 8) is the clearest presentation of data. On the other hand, the line chart (Figure 9) does a better job of illustrating quarter-to-quarter revenue variations for each salesperson. The point chart (Figure 10) is the least desirable option, because several data points are hidden underneath others. The point chart does, however, provide the clearest display of salesperson ranking within each quarter.

Figure 8 – Bar chart

Figure 8 – Bar chart

Figure 9 – Stacked line chart

Figure 9 – Stacked line chart

Figure 10 – Point chart comparison of 7 items

Figure 10 – Point chart comparison of 7 items

Bar stack chart

A bar stack chart is another way to encode two data elements in a single graph. In this example (Figure 11), product family is represented by the labels on the x-axis while the colored columns represent the sales region. Staggering the x-axis labels instead of displaying them at an angle makes the graph far more readable. At a glance, dashboard users can see that the biggest revenue generators are butter, cheese, ice cream and milk, while cottage cheese and cream cheese are underperformers.

Figure 11 – Stacked bar chart

Figure 11 – Stacked bar chart

Bubble cross-plot

Just like linear bubble charts, the bubble cross-plot uses the bubble diameter to display an additional quantitative metric. In this case, it is showing units sold.

Figure 12 – Bubble cross plot

Figure 12 – Bubble cross-plot

Special purpose charts

There are some other types of charts or graphics that serve a more specialized purpose. Here, we’ll take a look at some of these special purpose charts.

Calendar chart

A calendar chart is a compact and intuitively simple vehicle for displaying time-based data. This provides visibility into cyclic events, and facilitates easy periodic comparisons, such as month to month or week to week. With calendar charts, users can quickly spot trends and answer questions such as:

  • Is revenue higher at the start or end of a month?
  • Do costs tend to rise or fall on Fridays?
  • Are these metrics impacted by seasonal fluctuations?
Figure 13 – Calendar chart

Figure 13 – Calendar chart

Maps

Maps provide a great way to display geographic data dimensions. You can use a combination of text labels, dashboard indicators, and color-coding to display quantitative metrics such as per capita income ranking and median level of education for the state dimension.

Figure 14 – Map chart

Figure 14 – Map chart

"<yoastmark

Statistical process control charts

Industries such as manufacturing and healthcare use statistical process control charts extensively. They help track key metrics such as defects on an assembly line or hospital-acquired infections. Although several variations of control charts exist, most display upper and lower control limits as well as the current time series of data.

Figure 16 – Statistical process control chart

Figure 16 – Statistical process control chart

Radar or spider charts

In radar or spider charts, you plot data radially from a center point. Each data point has a vertical component — namely its distance from the center of the chart. Radar graphs are useful for displaying cyclical data such as daily staffing levels or monthly revenue totals. Dashboard designers can overlay goals and thresholds to provide context for the quantitative metric in the radar chart. Depending on the dashboard environment, you can typically use area, line, and point formats for radar charts.

Figure 18 – Spider graph

Figure 17 – Spider chart

Pareto charts

Pareto charts are constructed by creating a sorted bar chart and overlaying a cumulative total line. This chart provides a visual interpretation of the contribution made by the “top N” values of the charted dimension. In the following graph of beverage brands, the Pareto chart illustrates that the top 6 brands were responsible for 40,000 cases sold, or more than half of total sales.

Figure 19 – Pareto chart

Figure 18 – Pareto chart

Scatter plot

In some cases, the absolute value of a data dimension’s quantitative metric is less important than its value relative to other numbers. For example, height vs. weight, cost vs. revenue, or profit vs. sales. For these situations a scatter plot is ideal. The diagonal line provides context for the displayed data points. In this case, it’s preferable to see more points below the diagonal line than to see more points above the diagonal line.

Figure 19 – Scatter plot

Figure 19 – Scatter plot

Using dashboard indicators

Before deciding which indicator to use, classify indicators based on the information they can display. Binary indicators can only communicate two information states such as acceptable/unacceptable, below/above goal, problematic/ normal. Categorical indicators take this a step further allowing the dashboard designer to encode an ordered set of categories such as poor, satisfactory, excellent. The most robust indicators are “compound indicators” that can communicate not only directionality and order, but also quantities.

Since compound indicators typically display the most information per square inch of dashboard space, it might seem logical to use them as often as possible. But understanding your target audience plays an even more important role in choosing the appropriate combination of indicators. A simple binary indicator can motivate an assembly line machine operator to take immediate action far more effectively than an indicator formatted with numerical values. On the other hand, an operations manager may need to see actual quantities and historical context when making staffing decisions.

You can use dashboard indicators such as gauges, dials, bullets, plus/minus indicators and spark lines to illustrate:

  • Actual performance versus goal
  • Current status compared to performance thresholds
  • Deviation from expected trend
  • Direction and magnitude from a benchmark value

Indicators also add context to tabular data views, providing a top-level summary for users who don’t require or have the time to examine additional detail data. You can design indicators to display both qualitative metrics, typically via the use of color or color intensity, as well as quantitative metrics which are encoded as numeric labels.

Alerts

Alerts are a single shape whose color and/or direction changes based on whether the value is above or below a specified threshold.

Figure 20 – 2 simple alerts

Figure 20 – 2 simple alerts

Spark lines

Spark lines are compact, sparsely formatted line charts. Their purpose is to show the overall trend of the displayed data and to show the most recent (rightmost) data point in the context of its history. When stacked in a dashboard, spark lines provide immediate and unambiguous trend comparisons among related data entities.

Stacked spark lines

Figure 21 – Stacked spark lines

The following example combines alerts with spark lines to enhance the information content of the outpatient utilization table. The designer positioned the red alerts immediately to the left of the text labels so the user can clearly see the entities requiring attention. Users can examine the numerical values to the right of the text labels, while the 12-month trend on the far right provides historical context as to why the three flagged areas may be exhibiting problematic behavior.

Figure 22 – Alerts and spark lines enhance information content in this table.

Figure 22 – Alerts and spark lines enhance information content in this table

Plus/minus indicators

Plus/minus indicators display both magnitude and direction from a predefined baseline for a given metric. Color provides context. In this example, the arrow is displayed in green, rather than red, to signify cost reductions from $25M to $10M. If we were displaying a drop in profits instead, red would obviously be the appropriate color.

Figure 23 – Plus/minus indicator

Figure 23 – Plus/minus indicator

Bullet indicator

The Bullet indicator is a compact and highly customizable visual dashboard building block. In its simplest form, the bullet indicator displays a quantitative value and a horizontal scale. You do not need to display any additional context or threshold.

Figure 24 – Bullet indicator

Figure 24 – Bullet indicator

Monochromatic bullet indicator

This version of the bullet indicator adds additional context by displaying a threshold via the black vertical line. It also encodes a qualitative measure using color (satisfactory, unsatisfactory).

Figure 26 – Monochromatic bullet indicator

Figure 25 – Monochromatic bullet indicator

Bullet indicator with label

The compactness of bullet indicators makes them an excellent choice for facilitating “at-a-glance” comparisons between related metrics. Note you can display the exact dollar value as text when the user requires this information. If this is not useful, then don’t clutter your dashboard with the extra labels. In fact, this concept is a good one to apply overall when selecting content for your dashboard. Work backwards starting with knowledge of the minimum information needed to motivate action. This minimum is all that is necessary to use in the dashboard layout.

Figure 26 – A variant of the bullet indicator

Figure 26 – A variant of the bullet indicator

Bullet indicator with alerts

Combining a basic bullet layout with alerts helps illustrate month-to-date auto sales and directs our attention to the month-over-month changes that are either up or down significantly. We could also have displayed this data equally effectively by incorporating the numeric columns directly into the bullet indicator as in the “Sales Per Customer” example above, thereby eliminating those columns from the dashboard.

Figure 27 – Combining bullet indicators with alerts within a table

Figure 27 – Combining bullet indicators with alerts within a table

Gauges and speedometers

Gauges and speedometers use a “needle” to indicate the current value of a metric. Red and green indicate problematic/preferred zones of performance. As with stacked bullet indicators, gauges and speedometers make visual comparisons between related metrics easy. While eye-catching, these indicators do not make optimal use of dashboard space, so use them sparingly. This is probably one of the most overused dashboard indicators. Consider using one of the bullet indicators whenever possible, especially when dashboard space is at a premium.

Figure 29 – Gauges and speedometers

Figure 28 – Gauges and speedometers

Racetrack lights

Racetrack lights are a line of 2 to 5 color-coded circles. Each circle denotes a discrete value based on its relative position in the line. Depending on context, this indicator can convey either a quantitative (customer satisfaction rating from 1 to 5) or qualitative (poor, okay, neutral, satisfactory, excellent) value.

Figure 30 – 5 circle racetrack light indicator

Figure 29 – 5 circle racetrack light indicator

Slider indicator

A slider indicator displays the selected value in a box that is positioned along the continuum from left to right depending on the value. The color gradient of the slider bar also varies to maximize visual impact.

Figure 30 – Slider indicator

Figure 30 – Slider indicator

Comparison of indicators

The following intentionally redundant example shows some of the ways you can use these indicators to encode a particular metric and the trade-offs between various indicators.

  • Colorccoded text can be as effective as graphical indicators in conveying qualitative information or calling attention to problematic data points
  • A slider is more effective than a simple tabular display of those values because it positions those values within a range
  • While the simple bullet indicator seems less cluttered than the slider, if end users require the actual numeric value then the simple bullet will fall short
  • If the relative position or category of a data entity matters, then you will need to use the racetrack indicator. If not, use a simple alert instead and save dashboard space.
Figure 31 – Side by side comparison of multiple indicators

Figure 31 – Side by side comparison of multiple indicators

Summary

This article has provided some chart and indicator selection guidelines to help with data display before launching your next dashboard project. To get the most out of the guidelines, remember to experiment with scaling orientation and other charting options by iteratively developing dashboard prototypes. You should also employ a feedback loop to uncover user opinions of the dashboard. Involve your end users early and often in the design process to make sure your dashboard employs graphs in the most effective manner to support clear communication, good decision-making and timely action.

Editor’s note: This article is a revision of a previously published Dashboard Design article. We have updated it for relevance and clarity.

Dashboard-Design-articles-button

Rose Curtis

You may also like