Bullet Graph (Chart) UI widget

Bullet graph is the most informative way of data presentation. Widget that can be used for comparing the constantly changing value presented in the form of a moving horizontal bar with a static target value. Such visualization allows estimating the ranges of performance (e.g. poor, satisfactory, and good).

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Customizable properties

You can define the colors for ranges of performance to simplify the visual analysis, set the value ranges, add text labels and markers, configure the scale, bar color, etc.

Vertical Mode

You can add either a horizontal or a vertical Bullet graph whichever better fits in the layout.

Animation

The speed of animation can be adjusted by changing the value of the corresponding parameter.

Bullet chart without animation