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: