Bullet Charts

Overview

Bullet Chart Types

Use the type attribute to specify your chart type. We have two bullet chart types: bullet or hbullet. Using a graphset array, you can also create trellis charts.

Create your own custom bullet charts using our mixed and hmixedchart types (by combining different chart types, such as bar/bullet or bar/scatter) and bar and hbar chart types (by overlapping and stacking your bars).

Bullet Chart

Add a type attribute to your chart object and set the value to bullet or vbullet. Without further modification, a bullet chart with a single dataset looks like this:

{
  type: "bullet",
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31]
    }
  ]
}

Horizontal Bullet Chart

Horizontal bullets are specified by the hbullet value. With this chart type, the axes are switched so that the x-axis runs vertically and the y-axis runs horizontally.

{
  type: "hbullet",
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31]
    }
  ]
}

Trellis Bullet Chart

To create a trellis chart, add a graphset array and place each of your individual chart objects inside it. You can size and position each bullet chart to achieve your desired look.

{
  graphset: [
    {
      type: "bullet"
    },
    {
      type: "hbullet" 
    }
  ]
}

Custom Bullet Charts

You can create your own custom bullet charts by using several of our other chart types: mixed, hmixed, bar, and hbar. With Mixed Charts, you create a bullet chart by combining two or more chart types into a single chart. With Bar Charts, you achieve a bullet chart's appearance by overlapping and stacking multiple bars.

//shortened for brevity- click following mixed chart demos to view full configurations
{
  type: "mixed",
  plot: {
    'bars-overlap': "100%",
    stacked: true
  },
  series: [
    {
      type: 'bar'
    },
    {
      type: "bullet"
    }
  ]
}

Bar/Bullet Mixed Chart

This is a mixed chart containing three stacked bar charts and one bullet chart:

Bar/Scatter Mixed Chart

This is a mixed chart containing three stacked bar charts, an overlapping bar chart (to represent the "bar" portion of the bullet chart), and three scatter charts with rectangle, diamond, and heart-shaped markers, respectively:

Overlapping Bar Chart

Here is a bullet chart that was created using overlapping bars set to varying widths:

Data

Bullet charts support single or multiple datasets, and all data is contained inside the series array. In addition to your values, you need to provide corresponding goals. This can be done in a plot object or in individual series objects depending on whether you want your goals to apply globally or locally.

Global Goal

In your plot object, add a goals array. Provide your goal values, making sure that the number of goals matches the number of values in each of your datasets. The bullet chart below has a single goals array with three datasets:

{
  type: "bullet",
  plot: {
    goals: [25,43,30,40,21,59,35,31]
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34]
    }
  ]
}

Local Goals

Add a goals array to each of your series objects. Provide your goal values, making sure that the number of goals matches the number of values in each of your datasets.

{
  type: "bullet",
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31]
    }
  ]
}

Chart-Specific Properties

In addition to their default rectangular shape, bullet chart bars can display as cones or histograms. You can also stack datasets on top of each other to create standard stacked or 100% stacked charts, as well as group data into two or more stacks.

The following demo illustrates the different options available for the bullet chart modifications discussed below:

Aspect

The aspect attribute allows you to change the appearance of your bars and they can be applied globally to affect all plots or locally to affect specific plots. The aspect value options for bullet charts are:

To apply aspects globally, create a plot object. Insert your aspect attribute.

plot: {                /* Plot object */
    aspect: 'bar'        /* "cone" | "histogram" */
}

To apply aspects locally, add them to the chart data object you want the change to apply to.

series: [
    {    /* Chart data object */
        aspect: "bar", /* "cone" | "histogram" */
        values: [y0, y1, y2, y3, ..., yN]
    }
]

Stacked

The stacked attribute allows you to stack two or more datasets on top of each other. You can display standard stacked, 100% stacked, or multiple stacked bullet charts.

Standard Stacked Bullet Chart

In your plot object, add a stacked attribute and set the value to true. Your datasets will be placed on top of each other so that the top line represents the sum total for all of your stacked data. (By default, the value is set to false.) Optionally, you can add a stack-type attribute with a value of normal.

{
  type: "bullet",
  plot: {
    goals: [25,43,30,40,21,59,35,31],
    stacked: true
  }
}

100% Stacked Bullet Chart

With a 100% stacked bullet chart, each data layer is represented as a percentage of the whole so that the entire stack totals to 100%. In your plot object, add a stacked attribute and set the value to true. Next, add a stack-type attribute and set the value to 100%.

You'll also need to specify your minimum and maximum y-axis values. You can do so by creating a scale-y object and setting your min-value attribute to 0 and your max-value attribute to 100. Alternatively, you can add a values attribute and include your min and max value as string separated by colons- values: "0:100".

{
  type: "bullet",
  plot: {
    goals: [25,43,30,40,21,59,35,31],
    stacked: true,
    'stack-type': "100%"
  },
  'scale-y': {
    values: "0:100:25",
    format: "%v%"
  }
}

Bullet Charts and Multiple Stacks

In your plot object, add a stacked attribute and set the value to true. To separate your datasets into multiple stacks, you'll next go to your series array. In each series object, add a stack attribute. For datasets you want included in the first stack, set the value to 1. For datasets you want included in the second stack, set the value to 2, and so on.

In the following chart, the first two datasets were assigned to stack one and the third dataset was assigned to stack two:

{
  type: "bullet",
  plot: {
    goals: [25,43,30,40,21,59,35,31],
    stacked: true
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      stack: 1
    },
    {
      values: [5,30,21,18,59,50,28,33],
      stack: 1
    },
    {
      values: [30,5,18,21,33,41,29,15],
      stack: 2
    }
  ]
}

Further Customization

Further customize your bullet chart by configuring your scales, styling your bars and goals, adding scale markers, modifying your tooltips, and incorporating a legend.

Scales

Our Configuring Your X/Y-Axis Scales Tutorial provides detailed information on how to set up and customize your scales. We provide a brief introduction to linear and category scales here, since they are the most commonly used when it comes to bullet charts.

Linear Scale

Linear scales are our default scale type. You'll want to specify your minimum, maximum, and step scale values by adding a values attribute to your scale-x and/or scale-y object. Provide your min/max/step inside a string separated by colons.

You can format and style your scale to display currencies, percentages, abbreviated numbers, and much more.

{
  type: "bullet",
  'scale-x': {
    label: {
      text: "Bullet Chart with Linear Scale"
    }
  },
  'scale-y': {
    format: "$%v"
  }
}

Category Scale

Category scales allow you to display any word and/or number combination, such as names, dates, places, events, and more. Generally used on the x-axis, you'll want to add a labels array to your scale-x object. Add your scale labels as string values separated by commas.

{
  type: "bullet",
  'scale-x': {
    label: {
      text: "Bullet Chart with Category Scale"
    },
    labels: [ "ME", "NH", "MA", "RI", "CT", "NY", "PA", "NJ" ]
  }
}

Bar Styling

To style your bullet chart's bars, start in the applicable series object. You can change your bar fill color with a background-color attribute. For a single color fill, add one hexadecimal or RGB value. For a gradient (two color) fill, add two values separated by a space. To adjust your transparency levels, add an alpha attribute. Provide a value between 0-1, with the former being clear and the latter being opaque. Make sure to place a zero before your decimal point.

You can style your borders with border-color, border-width, border-radius (rounded corners), and/or line-style attributes. line-style accepts these values: solid (default), dotted, dashed.

{
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31],
      'background-color': "red",
      alpha: 1,
      'border-color': "green",
      'border-width': 2,
      'border-radius': "9px",
      'line-style': "solid" // "dotted" | "dashed"
    }
  ]
}

Goal Styling

By default, your goals will inherit whatever styles you specify for your bars. To provide goal-specific styling, start in your applicable series object, and create a goal object. Place your styling attributes inside.

{
  type: "bullet",
  'scale-x': {
    labels: [ "ME", "NH", "MA", "RI", "CT", "NY" ]
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      goals: [25,43,30,40,21,59,35,31],
      'background-color': "red",
      'border-color': "green",
      'border-width': 2,
      'line-style': "solid",
      goal: {
        'background-color': "green",
        'line-style': "solid" // "dotted" | "dashed"
      }
    }
  ]
}

Scale Markers

When working with individual bullet charts, you can use scale markers to set the ranges that would typically be achieved by stacking bars in a mixed chart.

In the below example, each chart was assigned its own chart object, and then the objects were placed into a graphset array.

Scale markers (typically used to highlight or emphasize specific data ranges in your chart) were used to create the range bars that appear in each bullet chart. Start by adding a markers array into your scale-y object. Inside the array, create an object for each of your range bands. Add a type attribute, and set the value to area. Next, add a range attribute, and specify your values in an array (e.g., [0,7]).

Finally, you'll want to style your scale markers using attributes such as background-color.

Tooltips

You can customize your tooltips to specify how the text and styling appear. First, add a tooltip object to your chart object. Next, add a text attribute, and provide your desired text inside a string. You can use tokens such as %v to represent your series values and %g to represent your goals.

For tooltip styling, common attributes used include: font-color, font-family, background-color, border-color, border-width, and line-style.

{
  type: "bullet",
  tooltip: {
    text: "Value: %v<br>Goal: %g",
    'font-color': "purple",
    'font-family': "Verdana, Geneva, sans-serif",
    'background-color': "white",
    'border-color': "yellow",
    'border-width': 2,
    'line-style': "dotted"
  }
}

Legend

To include a legend on your chart, place a legend object in your chart object. You can include attributes to specify your legend's layout, positioning, styling, headers/footers, and more.

{
  type: "bullet",
  legend: {}
}