Bullet Graph

In data visualization we are often faced with situations where we have to feature a single measure, compare it to a target value and also indicate if it is good, bad or ugly, and all this in a limited space. For example, let's say in a single graph you want to display your YTD revenue, compare it against your target revenue and also indicate whether the achieved revenue is good or bad, depending on predefined parameters. Sounds difficult?

Try Stephen Few's bullet graph which takes its inspiration from the traditional bar graph but packs in additional context for the user. According to Few, the bullet graph can serve as a replacement for gauges and meters in dashboards because of its ability to convey a lot of information in a compact space.


Image source: Stephen Few, Bullet Graph Design Specification, July 16, 2013


The Bullet graph consists of 5 primary components:

  1. Text label: Your chart caption which defines what your chart is about and the unit of measurement.
  2. Quantitative Scale: Measures the value of your metric on a linear axis.
  3. The Featured Measure: The bar that displays the primary performance measure (eg: Revenue YTD).
  4. Comparative Measure: The measure against which you want to compare your featured measure (eg: Target revenue).
  5. Qualitative Scale: The background fill that encodes qualitative ranges like bad, satisfactory, and good.
Check out live examples of Bullet Graph in our charts gallery and JSFiddle gallery.

Types of Bullet graph:

A bullet graph can be either horizontal or vertical depending on the alignment of the quantitative scale. The choice of vertical or horizontal alignment depends on the available space for the visualization.

FusionCharts will render here
FusionCharts will render here

Usability tips for the bullet graph:

When a set of bullet graphs are displayed together and they include some measures that are considered good when they are high (eg: revenue) and others that are considered good when they are low (eg: expenses)

While plotting single measures, we often consider target as the point which a measure should reach or exceed. While this works for measures like revenue and profit, for other measures like expenses, the situation is reversed. Expenses have to stay below target to be optimum.

In the chart below, the background fill uses the darkest gray for poor performance and the lightest gray for best performance. It works for revenue, new customers and avg. order size but not for expenses.

FusionCharts will render here
FusionCharts will render here
FusionCharts will render here
FusionCharts will render here

To overcome this, ensure the qualitative scale (sequence of the background fill) is in sync with the metric being displayed.

FusionCharts will render here
FusionCharts will render here
FusionCharts will render here
FusionCharts will render here

However, in certain scenarios, this may not be sufficient. Users, in hurry, may overlook the reversed background fill.

For such scenarios, Few suggests that for the specific measure (expenses) we reverse the direction in which the bar extends as well as the quantitative scale.

FusionCharts will render here
FusionCharts will render here
FusionCharts will render here
FusionCharts will render here

A reversed bar provides a stronger visual cue to the user to spot out the difference. Expenses are funds that are lost so their being on the negative scale makes sense too.

Color coding the qualitative scale:

While color coding the qualitative scale, use distinct intensities from dark to light of a single hue. Use the darker color intensities for the poor states and the lighter color intensities for the favorable states.

FusionCharts will render here
FusionCharts will render here

More examples of bullet graphs:

In addition to the scenarios mentioned above, bullet graphs can be used in dashboards for all measures which need to be compared against a target value.

Bullet graph in a Call Center dashboard

FusionCharts will render here

In a call center dashboard, a Bullet graph can be used to measure metrics like Call Volume, Call Answer Speed and Percentage of Abandoned calls.

Bullet graph in a Fitness dashboard

FusionCharts will render here

In a Fitness dashboard, a Bullet graph can be used to measure metrics like Steps taken and Calories burnt.

Bullet graph in a Manufacturing dashboard

FusionCharts will render here

In a Manufacturing dashboard, a Bullet chart can be used to track metrics like number of defects and Orders shipped. However, for measures like defects which are considered good when they are low and below the target, ensure that this difference is highlighted by reversing the direction of the scales.

Want to include Bullet Graph in your project?
Developers

Download free trial to start creating charts you want.

Business Users

Contact us using the form below and we'll be happy to assist you!

If you see this, leave this form field blank and invest in CSS support.