Gage (Gauge) UI widget

JavaScript Gauge (or Gage) widget is a ready-made tool for developing web dashboards with color data displaying. Gauge can be dynamically updated with the new data. Changing of values runs with smooth animation the speed of which you can configure if needed.

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 Gauge charts

Do you need to specify range between, say, 0 and 125? Setting the size of range is available: define the maximum and minimum range values. In addition, you can choose the initial value of the gage.

Gauge JS label and placeholder

Set names for each of your gage charts and their measurement units, for example: “Speed”, “Pressure”, “Temperature” and “MPH, “MPa”, “°F”.

JavaScript Gauge chart with animation and custom colors

The appearance of the chart is fully configurable. You can define custom colors to be used in the chart. It's possible to set one fixed color or choose different colors for a particular range of displayed values. Also, you can adjust the animation speed using CSS.