Still have questions?
Contact support
You are looking at an outdated 7.10.0 version of this document. Switch to the 7.14.0 version to see the up to date information.

Bullet Chart

Overview

A Bullet Chart is a variation of Bar Chart designed to compare a single, primary measure (for example, current year-to-date revenue) to one or more other measures to enrich its meaning (for example, compared to a target), and displays it in the context of qualitative ranges of performance, such as poor, satisfactory, and good. The qualitative ranges are displayed as blocks of one hue but with varying intensity, making them discernible by those who are color blind and to restrict the use of colors on the dashboard to a minimum.


Bullet chart always uses only one data series, but a dashboard may contain several bullet charts at the same time. This kind of charts can be of great help in some cases as far as it provides the clearest presentation of the data using less space.

Chart

JavaScript Bullet Chart consists of a main bar of key measure and a range bar of comparative measures.

Let's create a simple Bullet Chart. The main bar represents 2005 revenue and the range bar represents maximum annual income ever been reached in the company. Data set for the chart is below

  // Create bullet chart
  var chart = anychart.bullet([
{value: 637.166}                  //2005 revenue
  ]);
  chart.range().from(0).to(750);      //maximum annual income ever 

JsFiddle Playground

Ranges

Ranges or range bars in Bullet chart are qualitative categories representations (such as bad, satisfactory and good). They are variables of color intensity rather than of hue. Ranges are controlled by .range() method and have two mandatory parameters set by .from() and .to() methods.

  chart.range(<number_of_a_range>).from(<value1>).to(<value2>);

Here is a sample with 5 ranges on one bullet chart:

JsFiddle Playground

The code for the example above is the following:

  chart.range().from(0).to(100);
  chart.range(1).from(100).to(150);
  chart.range(2).from(150).to(200);
  chart.range(3).from(200).to(250);
  chart.range(4).from(250).to(300);

Note: to avoid complexity that cannot be perceived efficiently and to maintain a clear distinction between the colors it's better to exceed no more than three ranges on one chart.

Layout

Bullet Chart was designed to represent data in the most effective way using minimum space for it. Layout is controlled by .layout() parameter. This parameter's setting code looks this way:

  chart_1.layout('vertical');
  chart_2.layout('horizontal');
Here is the sample with both horizontal and vertical layouts.

JsFiddle Playground

Axis

In AnyChart axis is an object that allows you to configure chart grid, axis line along with tick marks and labels, axis scale and settings. You can find more information about axis in Axes Basics tutorial.

In this section we will quickly demonstrate how we can adjust axis orientation, invert axis scale and control minimum and maximum values.


Note: Usually a chart has at least two axes, but Bullet Chart always represents only one data series and there is no need in two axes.

Orientation

With AnyChart you can place axis to any side of the chart, all you need to do is to adjust the orientation() parameter of .axis().


Orientation depends on the layout of a chart. For horizontal layout axis orientation parameter can be set either top or bottom. As for vertical layout, axis orientation parameter may be set in left or right.

  chart.axis().orientation('top');

Here is a sample with the data from dashboard above with an only change of axis orientation:

JsFiddle Playground

Inversion

AnyChart allows to invert any axis on a dashboard. Inversion is to be set using the scale().inverted() method:

  chart.scale().inverted(true);

Below this you can see a demonstration of a horizontal bullet chart with inverted axis.

JsFiddle Playground

Minimum and Maximum

By default AnyChart html5 charting library calculates axis minimum and maximum automatically, as you can see on the scale inversion chart sample above: minimal value on the Y Axis is 0, and maximum is 15. You can change these values by setting them for the .maximum() and .minimum() parameters:

  chart.yScale().minimum(-5).maximum(20);

Look at the demonstration of maximum and minimum values in the Single-series sample:

JsFiddle Playground

Markers

Marker is an object with a specified shape, size and color or an image used to represent any comparative measures. Markers are controlled through the data. You will find a plenty of examples with different types of markers below.

Types

Bullet charts have 4 marker types: bar, X, line, ellipse. Note that the bar type is the same as the main bar in the Bullet Chart, so it's only three types you can really use as markers.

Here is the sample with all 4 marker types:

JsFiddle Playground

Note: This chart contains all markers in one data set. It was done for demonstration purpose. It's highly recommended to limit markers number to two to avoid complexity.

Style

For clearer distinction between markers it is very useful to adjust style settings of markers. There are three things in a marker you can control and adjust: fill, stroke and gap. Fill method is responsible for inner color of a marker, stroke is responsible for the color of a border line and gap method is responsible for the size of a marker.


Here is the sample of an ellipse sharped marker with blue stroke, gold inner color and a size 0.7 size of a chart.

  var chart = anychart.bulletChart([
{value: 225},
{value: 290,          // set marker position
      type: 'ellipse',    // set ellipse as marker type
      fill: 'gold',       // set gold inner color 
      stroke: '2 blue',   // set border width 2px and border color
      gap: 0.3            // set marker size 
}
  ])

Note: The .gap() value represents the distance from the border of the chart to the marker's border, not the exact size of the marker. So, the more this value is, the less is the diameter of the ellipse (the line's or rectangular's height).

JsFiddle Playground

Colors

Bullet Chart ranges use variables of color intensity rather than of hue. Ranges' colors are controlled using .rangePalette() method:

  chart.rangePalette([
'#ffa058',  // first range color
'#ffb082',  // second range color
'#ffc0a8',  // third range color
'#ffd0c2',  // forth range color
'#ffe0e6'   // fifth range color
  ]);

JsFiddle Playground

Samples

You can see a lot of other samples in AnyChart Web Bullet Charts Gallery.