Blog Help & Support Contact About Login

 Show Nav

JavaScript Bullet Charts

Overview

A bullet chart or bullet graph allows users to compare data against a projected target or goal. Sharing similarities with column and bar charts, as well as linear gauge charts, our bullet charts are highly versatile. They can be customized to display ranges (e.g., poor, fair, good) and multiple goal markers. They can also display as stacked or charts with cones or histograms in lieu of bars. We explain how to configure your bullet chart's scales, as well as how to style your bars and goals, customize your tooltips, and add a legend. Browse our ZingChart Gallery for further ideas on what you can achieve with a bullet chart.

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 create trellis charts. We also explain how to create your own custom bullet charts using our "mixed" and "hmixed" chart 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).

Note: You can further modify your charts to create stacked (standard stacked, 100% stacked, and multiple stacks) and/or charts with different aspects (bars, cones, histograms), which we explain in the Chart-Specific Properties section below.

Bullet Chart

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

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "hbullet",
  "series": [
    {
      "values": [20,40,25,50,15,45,33,34],
      "goals": [25,43,30,40,21,59,35,31]
    }
  ]
}

Trellis Bullet Chart

Trellis bullets consist of a series of smaller charts that are organized into a panel or grid. Start by adding a graphset array, and then place each of your individual chart objects inside it. You can size and position each bullet chart to achieve your desired look. Read our Adding Additional Charts page for further information on graphset arrays and trellis charts.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "graphset": [
    {
      "type": "bullet",
      "series": [
        {
          "values": [20,40,25,50,15,45,33,34],
          "goals": [25,43,30,40,21,59,35,31]
        }
      ]
    },
    {
      "type": "hbullet",
      "series": [
        {
          "values": [5,30,21,18,59,50,28,33],
          "goals": [21,35,23,29,61,55,33,30]
        }
      ]
    },
    {
      "type": "hbullet",
      "series": [
        {
          "values": [30,5,18,21,33,41,29,15],
          "goals": [36,17,20,19,24,49,33,18]
        }
      ]
    },
    {
      "type": "bullet",
      "series": [
        {
          "values": [31,16,29,59,40,7,37,35],
          "goals": [37,15,30,55,47,15,30,43]
        }
      ]
    }
  ]
}

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.

Bar/Bullet Mixed Chart

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

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed",
  "plot": {
    "bars-overlap": "100%",
    "stacked": true
  },
  "scale-x": {
    "labels": ["Superior","Michigan","Huron","Erie","Ontario"],
    "guide": {
      "visible": false
    }
  },
  "scale-y": {
    "values": "0:50:10",
    "guide": {
      "visible": false
    }
  },
  "series": [
    {
      "type": "bar",
      "values": [25,30,15,20,25],
      "stack": 1,
      "background-color": "gray",
      "alpha": 0.7,
      "hover-state": {
        "visible": false
      },
      "max-trackers": 0
    },
    {
      "type": "bar",
      "values": [20,10,30,25,15],
      "stack": 1,
      "background-color": "gray",
      "alpha": 0.5,
      "hover-state": {
        "visible": false
      },
      "max-trackers": 0
    },
    {
      "type": "bar",
      "values": [5,10,5,5,10],
      "stack": 1,
      "background-color": "gray",
      "alpha": 0.3,
      "hover-state": {
        "visible": false
      },
      "max-trackers": 0
    },
    {
      "type": "bullet",
      "values": [35,42,40,43,36],
      "goals": [38,39,43,35,41],
      "background-color": "#FFFF00 #FFCCCC",
      "stack": 2,
      "goal": {
        "background-color": "#333399 #00FFFF"
      },
      "tooltip": {
        "text": "Actual: %v<br>Goal: %g",
        "font-color": "black",
        "background-color": "white"
      }
    }
  ]
}

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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed",
  "plot": {
    "bars-overlap": "100%",
    "stacked": true,

  },
  "scale-x": {
    "labels": ["Superior","Michigan","Huron","Erie","Ontario"],
    "guide": {
      "visible": false
    }
  },
  "scale-y": {
    "values": "0:50:10",
    "guide": {
      "visible": false
    }
  },
  "series": [
    {   //Range Bar 1
      "type": "bar",
      "values": [25,30,15,20,25],
      "stack": 1,
      "background-color": "gray",
      "alpha": 0.7,
      "hover-state": {
        "visible": false
      },
      "max-trackers": 0,

    },
    {   //Range Bar 2
      "type": "bar",
      "values": [20,10,30,25,15],
      "stack": 1,
      "background-color": "gray",
      "alpha": 0.5,
      "hover-state": {
        "visible": false
      },
      "max-trackers": 0,

    },
    {   //Range Bar 3
      "type": "bar",
      "values": [5,10,5,5,10],
      "stack": 1,
      "background-color": "gray",
      "alpha": 0.3,
      "hover-state": {
        "visible": false
      },
      "max-trackers": 0,

    },
    {   //Bullet Bar
      "type": "bar",
      "values": [35,42,40,43,36],
      "bar-width": "50%",
      "stack": 2,
      "background-color": "black gray",
      "hover-state": {
        "visible": false
      },
      "tooltip": {
        "text": "Actual: %v",
        "font-color": "black",
        "background-color": "white"
      }
    },
    {   //Goal 1 (rectangle)
      "type": "scatter",
      "values": [21,33,25,30,12],
      "marker": {
        "type": "rectangle",
        "background-color": "#333399",
        "border-color": "none",
        "height": "7%",
        "width": "60%"
      },
      "tooltip": {
        "text": "Rectangle Goal: %v",
        "font-color": "black",
        "background-color": "white"
      }
    },
    {   //Goal 2 (diamond)
      "type": "scatter",
      "values": [30,37,30,37,25],
      "marker": {
        "type": "diamond",
        "background-color": "#FF99CC",
        "border-color": "#33CCFF",
        "border-width": 3,
        "size": 8
      },
      "tooltip": {
        "text": "Diamond Goal: %v",
        "font-color": "black",
        "background-color": "white"
      }
    },
    {   //Goal 3 (heart)
      "type": "scatter",
      "values": [39,45,36,45,40],
      "marker": {
        "background-image": "https://www.zingchart.com/resources/heart.png",
        "background-color": "none",
        "border-color": "none",
        "background-repeat": "no-repeat",
        "shadow": false,
        "size": 12
      },
      "tooltip": {
        "text": "Heart Goal: %v",
        "font-color": "black",
        "background-color": "white"
      }
    }
  ]
}

Horizontal Bar/Bullet Mixed Chart

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

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "hmixed",
  "plot": {
    "bars-overlap": "100%",
    "stacked": true
  },
  "scale-x": {
    "labels": ["Superior","Michigan","Huron","Erie","Ontario"],
    "guide": {
      "visible": false
    }
  },
  "scale-y": {
    "values": "0:50:10",
    "guide": {
      "visible": false
    }
  },
  "series": [
    {
      "type": "hbar",
      "values": [25,30,15,20,25],
      "stack": 1,
      "background-color": "gray",
      "alpha": 0.7,
      "hover-state": {
        "visible": false
      },
      "max-trackers": 0
    },
    {
      "type": "hbar",
      "values": [20,10,30,25,15],
      "stack": 1,
      "background-color": "gray",
      "alpha": 0.5,
      "hover-state": {
        "visible": false
      },
      "max-trackers": 0
    },
    {
      "type": "hbar",
      "values": [5,10,5,5,10],
      "stack": 1,
      "background-color": "gray",
      "alpha": 0.3,
      "hover-state": {
        "visible": false
      },
      "max-trackers": 0
    },
    {
      "type": "hbullet",
      "values": [35,42,40,43,36],
      "goals": [38,39,43,35,41],
      "background-color": "black",
      "stack": 2,
      "tooltip": {
        "text": "Actual: %v<br>Goal: %g",
        "font-color": "black",
        "background-color": "white"
      }
    }
  ]
}

Horizontal Bar/Scatter Mixed Chart

This is a horizontal mixed chart containing three stacked horizontal bar charts, an overlapping horizontal bar chart (to represent the "bar" portion of the bullet chart), and three horizontal scatter charts with cross, target, and star-shaped markers, respectively.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "hmixed",
  "plot": {
    "bars-overlap": "100%",
    "stacked": true
  },
  "scale-x": {
    "labels": ["Superior","Michigan","Huron","Erie","Ontario"],
    "guide": {
      "visible": false
    }
  },
  "scale-y": {
    "values": "0:50:10",
    "guide": {
      "visible": false
    }
  },
  "series": [
    {   //Range Bar 1
      "type": "hbar",
      "values": [25,30,15,20,25],
      "stack": 1,
      "background-color": "gray",
      "alpha": 0.7,
      "hover-state": {
        "visible": false
      },
      "max-trackers": 0
    },
    {   //Range Bar 2
      "type": "hbar",
      "values": [20,10,30,25,15],
      "stack": 1,
      "background-color": "gray",
      "alpha": 0.5,
      "hover-state": {
        "visible": false
      },
      "max-trackers": 0
    },
    {   //Range Bar 3
      "type": "hbar",
      "values": [5,10,5,5,10],
      "stack": 1,
      "background-color": "gray",
      "alpha": 0.3,
      "hover-state": {
        "visible": false
      },
      "max-trackers": 0
    },
    {   //Bullet Bar
      "type": "hbar",
      "values": [35,42,40,43,36],
      "bar-width": "50%",
      "stack": 2,
      "background-color": "#99CCFF",
      "hover-state": {
        "visible": false
      },
      "tooltip": {
        "text": "Actual: %v",
        "font-color": "black",
        "background-color": "white"
      }
    },
    {   //Goal 1 (cross)
      "type": "hscatter",
      "values": [21,33,25,30,12],
      "marker": {
        "type": "cross",
        "line-color": "red",
        "size": 5
      },
      "tooltip": {
        "text": "Cross Goal: %v",
        "font-color": "black",
        "background-color": "white",

      }
    },
    {   //Goal 2 (target)
      "type": "hscatter",
      "values": [30,37,30,37,25],
      "marker": {
        "background-image": "https://www.zingchart.com/resources/target.png",
        "background-color": "none",
        "border-color": "none",
        "background-repeat": "no-repeat",
        "shadow": false,
        "size": 12
      },
      "tooltip": {
        "text": "Target Goal: %v",
        "font-color": "black",
        "background-color": "white"
      }
    },
    {   //Goal 2 (star)
      "type": "hscatter",
      "values": [39,45,36,45,40],
      "marker": {
        "type": "star5",
        "background-color": "#FFFF00",
        "border-color": "#99CCFF",
        "border-width": 1,
        "size": 7
      },
      "tooltip": {
        "text": "Star Goal: %v",
        "font-color": "black",
        "background-color": "white"
      }
    }
  ]
}

Overlapping Bar Chart

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

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bar",
  "plot": {
    "bars-overlap": "100%",

  },
  "series": [
    {
      "values": [70,50,75,51,70,73,67,46],
      "background-color": "#2B2836",
      "alpha": 0.5,
      "hover-state": {
        "visible": false
      },
      "max-trackers": 0
    },
    {
      "values": [73,77,91,86,67,76,88,96],
      "background-color": "#C42E53",
      "alpha": 0.9,
      "bar-width": "40%"
    }
  ]
}

Overlapping Horizontal Bar Chart

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

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "hbar",
  "plot": {
    "bars-overlap": "100%",

  },
  "series": [
    {
      "values": [70,50,75,51,70],
      "background-color": "#B22C12",
      "bar-width": "70%",
      "hover-state": {
        "visible": false
      },
      "max-trackers": 0
    },
    {
      "values": [73,77,91,86,67],
      "background-color": "#8BC79E",
      "bar-width": "30%"
    }
  ]
}

Series Data

Bullet charts support single or multiple data sets, 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 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 data sets. The below bullet chart has a single "goals" array with three data sets.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bullet",
  "plot": {
    "goals": [25,43,30,40,21,59,35,31]
  },
  "series": [
    {
      "values": [20,40,25,50,15,45,33,34]
    },
    {
      "values": [5,30,21,18,59,50,28,33]
    },
    {
      "values": [30,5,18,21,33,41,29,15]
    }
  ]
}

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 data sets. The below bullet chart has three data sets with corresponding "goals" arrays for each.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bullet",
  "series": [
    {
      "values": [20,40,25,50,15,45,33,34],
      "goals": [25,43,30,40,21,59,35,31]
    },
    {
      "values": [5,30,21,18,59,50,28,33]
      "goals": [21,35,23,29,61,55,33,30]
    },
    {
      "values": [30,5,18,21,33,41,29,15]
      "goals": [36,17,20,19,24,49,33,18]
    }
  ]
}

Chart-Specific Properties

You can modify the appearance of your bullet chart's bars. In addition to their default rectangular shape, they can display as cones or histograms. You can also stack data sets on top of each other to create standard stacked or 100% stacked, as well as group data into two or more stacks.

Aspect

The "aspect" attribute allows you to change the appearance of your bars from rectangular (default "bar") to conical ("cone") to histograms ("histogram"). To apply the change globally, place the attribute in your "plot" object. To apply the change locally, place the attribute in a specific series object.

Bar Bullet Chart

Rectangular bars are our default aspect, and so specifying their type as shown below is optional.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bullet",
  "plot": {
    "aspect": "bar"
  },
  "series": [
    {
      "values": [20,40,25,50,15,45,33,34],
      "goals": [25,43,30,40,21,59,35,31]
    },
    {
      "values": [5,30,21,18,59,50,28,33]
      "goals": [21,35,23,29,61,55,33,30]
    }
  ]
}

Cone Bullet Chart

To display your data as cones, set your "aspect" attribute's value to "cone".

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bullet",
  "plot": {
    "aspect": "cone"
  },
  "series": [
    {
      "values": [20,40,25,50,15,45,33,34],
      "goals": [25,43,30,40,21,59,35,31]
    },
    {
      "values": [5,30,21,18,59,50,28,33]
      "goals": [21,35,23,29,61,55,33,30]
    }
  ]
}

Histogram Bullet Chart

To display your data as histograms, set your "aspect" attribute's value to "histogram".

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bullet",
  "plot": {
    "aspect": "histogram"
  },
  "series": [
    {
      "values": [20,40,25,50,15,45,33,34],
      "goals": [25,43,30,40,21,59,35,31]
    },
    {
      "values": [5,30,21,18,59,50,28,33]
      "goals": [21,35,23,29,61,55,33,30]
    }
  ]
}

Stacked

The "stacked" attribute allows you to stack two or more data sets 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. Set the value to true. Your data sets will be placed on top of each other so that the top line represents the sum total for all of your stacked data.

Note: When working with stacked bullet charts, take into consideration your "goals" array. Your goal values may need to be adjusted accordingly.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bullet",
  "plot": {
    "goals": [25,43,30,40,21,59,35,31],
    "stacked": true
  },
  "scale-y": {
    "values": "0:150:25"
  },
  "series": [
    {
      "values": [20,40,25,50,15,45,33,34]
    },
    {
      "values": [5,30,21,18,59,50,28,33]
    },
    {
      "values": [30,5,18,21,33,41,29,15]
    }
  ]
}

100% Stacked Bullet Chart

In your "plot" object, add a "stacked" attribute. Set the value to true. Next, add a "stack-type" attribute. Set the value to "100%". (By default, the value is set to "normal".) 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%.

Note: With 100% stacked bullet charts, each stack always totals at 100%. Therefore, you'll want to specify your y-axis scale's minimum and maximum values. Create a "scale-y" object. Add a "min-value" and "max-value" attribute. Set the values to 0 and 100, respectively.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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%"
  },
  "series": [
    {
      "values": [20,40,25,50,15,45,33,34]
    },
    {
      "values": [5,30,21,18,59,50,28,33]
    },
    {
      "values": [30,5,18,21,33,41,29,15]
    }
  ]
}

Bullet Charts and Multiple Stacks

In your "plot" object, add a "stacked" attribute and set the value to true. To separate your data sets into multiple stacks, you'll next go to your series array. In each series object, add a "stack" attribute. For data sets you want included in the first stack, set the value to 1. For data sets you want included in the second stack, set the value to 2, and so on. In the below chart, the first two data sets were assigned to stack one and the third data set was assigned to stack two.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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 likely the most commonly used when it comes to bullet charts.

Note: While the following sections display scale configurations on the more commonly used axis ("scale-x" or "scale-y"), you can generally make the same changes to either axis.

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. See our Scales Tutorial for further information on scale formatting, styling, and customization.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bullet",
  "scale-x": {
    "label": {
      "text": "Bullet Chart with Linear Scale"
    }
  },
  "scale-y": {
    "format": "$%v"
  },
  "series": [
    {
      "values": [20,40,25,50,15,45,33,34],
      "goals": [25,43,30,40,21,59,35,31]
    },
    {
      "values": [5,30,21,18,59,50,28,33],
      "goals": [21,35,23,29,61,55,33,30]
    },
    {
      "values": [30,5,18,21,33,41,29,15],
      "goals": [36,17,20,19,24,49,33,18]
    }
  ]
}

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. For more on category scales, including how to specify text wrapping, angle rotation, and character limits, see our Scales Tutorial.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bullet",
  "scale-x": {
    "label": {
      "text": "Bullet Chart with Category Scale"
    },
    "labels": ["ME","NH","MA","RI","CT","NY","PA","NJ"]
  },
  "series": [
    {
      "values": [20,40,25,50,15,45,33,34],
      "goals": [25,43,30,40,21,59,35,31]
    },
    {
      "values": [5,30,21,18,59,50,28,33],
      "goals": [21,35,23,29,61,55,33,30]
    },
    {
      "values": [30,5,18,21,33,41,29,15],
      "goals": [36,17,20,19,24,49,33,18]
    }
  ]
}

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. Browse our Plot/Series JSON Attributes/Syntax page for additional styling options.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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",
      "alpha": 1,
      "border-color": "green",
      "border-width": 2,
      "border-radius": "9px",
      "line-style": "solid"
    },
    {
      "values": [5,30,21,18,59,50,28,33],
      "goals": [21,35,23,29,61,55,33,30],
      "background-color": "orange",
      "alpha": 1,
      "border-color": "blue",
      "border-width": 2,
      "line-style": "dotted"
    },
    {
      "values": [30,5,18,21,33,41,29,15],
      "goals": [36,17,20,19,24,49,33,18],
      "background-color": "yellow",
      "alpha": 1,
      "border-color": "purple",
      "border-width": 2,
      "line-style": "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. You can use the same ones discussed above, as well as go through our Plot/Series JSON Attributes/Syntax page for additional styling options.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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"
      }
    },
    {
      "values": [5,30,21,18,59,50,28,33],
      "goals": [21,35,23,29,61,55,33,30],
      "background-color": "orange",
      "border-color": "blue",
      "border-width": 2,
      "line-style": "dotted",
      "goal": {
        "background-color": "blue",
        "line-style": "solid"
      }
    },
    {
      "values": [30,5,18,21,33,41,29,15],
      "goals": [36,17,20,19,24,49,33,18],
      "background-color": "yellow",
      "border-color": "purple",
      "border-width": 2,
      "line-style": "dashed",
      "goal": {
        "background-color": "purple",
        "line-style": "solid"
      }
    }
  ]
}

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". For a more comprehensive list of related attributes, see our Scale Markers JSON Attributes/Syntax page.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "graphset": [
    {   //Chart 1
      "type": "bullet",
      "height": "100%",
      "width": "33.33%",
      "x": "0%",
      "y": "0%",
      "scale-x": {
        "labels": ["California"],
        "guide": {
          "visible": false
        },
        "tick": {
          "visible": false
        }
      },
      "scale-y": {
        "markers": [    //Specify your scale markers for each bullet chart.
          {
            "type": "area",
            "range": [0,7],
            "background-color": "red"
          },
          {
            "type": "area",
            "range": [7,21],
            "background-color": "orange"
          },
          {
            "type": "area",
            "range": [21,30],
            "background-color": "yellow"
          }
        ],
        "guide": {
          "visible": false
        }
      },
      "series": [
        {
          "values": [20],
          "goals": [23],
          "background-color": "black",
          "bar-width": "80%"
        }
      ]
    },
    {   //Chart 2
      "type": "bullet",
      "height": "100%",
      "width": "33.33%",
      "x": "33.33%",
      "y": "0%",
      "scale-x": {
        "labels": ["Oregon"],
        "guide": {
          "visible": false
        },
        "tick": {
          "visible": false
        }
      },
      "scale-y": {
        "markers": [    //Specify your scale markers for each bullet chart.
          {
            "type": "area",
            "range": [0,10],
            "background-color": "blue",
            "alpha": 1
          },
          {
            "type": "area",
            "range": [10,20],
            "background-color": "green",
            "alpha": 1
          },
          {
            "type": "area",
            "range": [20,30],
            "background-color": "orange",
            "alpha": 1
          }
        ],
        "guide": {
          "visible": false
        }
      },
      "scale-y-2": {
        "values": "0:30:10",
        "guide": {
          "visible": false
        }
      },
      "series": [
        {
          "values": [9],
          "goals": [21],
          "background-color": "white"
        }
      ]
    },
    {   //Chart 3
      "type": "bullet",
      "height": "100%",
      "width": "33.33%",
      "x": "66.66%",
      "y": "0%",
      "scale-x": {
        "labels": ["Washington"],
        "guide": {
          "visible": false
        },
        "tick": {
          "visible": false
        }
      },
      "scale-y": {
        "placement": "opposite",
        "markers": [    //Specify your scale markers for each bullet chart.
          {
            "type": "area",
            "range": [0,13],
            "background-color": "yellow",
            "alpha": 1
          },
          {
            "type": "area",
            "range": [13,18],
            "background-color": "purple",
            "alpha": 1
          },
          {
            "type": "area",
            "range": [18,30],
            "background-color": "green",
            "alpha": 1
          }
        ],
        "guide": {
          "visible": false
        }
      },
      "series": [
        {
          "values": [15],
          "goals": [25],
          "background-color": "gray",
          "bar-width": "80%"
        }
      ]
    }
  ]
}

Tooltips

You can customize your tooltips to specify how the text and styling appear. 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". See our Tooltips JSON Attributes/Syntax page for additional styling options.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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"
  },
  "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",
      "goal": {
        "background-color": "green"
      }
    },
    {
      "values": [5,30,21,18,59,50,28,33],
      "goals": [21,35,23,29,61,55,33,30],
      "background-color": "orange",
      "goal": {
        "background-color": "blue"
      }
    },
    {
      "values": [30,5,18,21,33,41,29,15],
      "goals": [36,17,20,19,24,49,33,18],
      "background-color": "yellow",
      "goal": {
        "background-color": "purple"
      }
    }
  ]
}

Legend

Our legends are highly customizable. To add one, place a "legend" object in your chart object. You can specify your legend's layout, positioning, styling, headers/footers, and more. See our Legends Tutorial and Legends JSON Attributes/Syntax page for further information.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bullet",
  "legend": {},
  "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"
  },
  "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],
      "text": "September",
      "background-color": "red",
      "goal": {
        "background-color": "green"
      }
    },
    {
      "values": [5,30,21,18,59,50,28,33],
      "goals": [21,35,23,29,61,55,33,30],
      "text": "October",
      "background-color": "orange",
      "goal": {
        "background-color": "blue"
      }
    },
    {
      "values": [30,5,18,21,33,41,29,15],
      "goals": [36,17,20,19,24,49,33,18],
      "text": "November",
      "background-color": "yellow",
      "goal": {
        "background-color": "purple"
      }
    }
  ]
}

Summary

Got a question about how bullet charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.