10 Best Gauge Plugins In jQuery And Pure JavaScript/CSS

by jQueryScript,

A gauge meter (also known as gauge chart, gauge graph) is an online tool which can be used to represent data values in full-radial, semi-radial & arch dials.

In this post you will find the 10 best jQuery, Vanilla JavaScript, and Pure CSS gauge plugins to help web developers generate dynamic gauge meters for dashboard, resume, study, scientific paper, and much more. Enjoy!

Table of contents:

jQuery Gauge Plugins:

Customizable & Animated jQuery / HTML5 Gauge Meter Plugin

GaugeMeter.js is a versatile jQuery gauge plugin which takes advantage of HTML5 canvas to render animated gauge meters and dials with plenty of customization options.

Customizable & Animated jQuery / HTML5 Gauge Meter Plugin

[Demo] [Download]


Creating Animated Gauges Using jQuery and Raphael.js - kumaGauge

kumaGauge is an easy jQuery plugin used to draw an animated & vector shaped semi-circular meter (Gauge) using Raphaël library.

Creating Animated Gauges Using jQuery and Raphael.js - kumaGauge

[Demo] [Download]


Creating An Animated Speedometer with jQuery and CSS3

A jQuery plugin helps you create an animated & highly customizable speedometer representing the number you type into an input field.

Creating An Animated Speedometer with jQuery and CSS3

[Demo] [Download]


Simple jQuery Plugin For Creating SVG Based Gauges

A lightweight (~5kb minified) jQuery plugin which allows you to draw a simple customizable gauge using SVG element.

Simple jQuery Plugin For Creating SVG Based Gauges

[Demo] [Download]


Creating A Dynamic Speedometer with jQuery and TweenLite - Speedometer

Vroom is a jQuery & TweenLite based gauge plugin for creating a realistic speedometer that dynamically updates according to user inputs.

Creating A Dynamic Speedometer with jQuery and TweenLite - Speedometer

[Demo] [Download]


jQuery Plugin To Generate Animated Dynamic Gauges - dynameter

Dynameter is a tiny jQuery plugin used to generate & animate semicircular gauges/meters with support for real-time value updates.

jQuery Plugin To Generate Animated Dynamic Gauges - dynameter

[Demo] [Download]


Vanilla JS Gauge Libraries:

Canvas Based HTML5 Gauge Library – Gauge.js

Gauge.js is a pure JavaScript library used to generate animated, dynamic, highly configurable linear/radial gauges using HTML5 canvas element.

Canvas Based HTML5 Gauge Library – Gauge.js

[Demo] [Download]


Material Design Style Gauge Control With JavaScript and CSS3

A simple, Material Design styled, semicircular gauge control built using pure HTML, CSS and CSS3 transforms.

Material Design Style Gauge Control With JavaScript and CSS3

[Demo] [Download]


Two-dimensional Gauge Component With JS And SVG – DoubleGauge

DoubleGauge is an animated, SVG based, Vanilla JS gauge component which can be used to visualize Overall Equipment Efficiency values in percentage.

Two-dimensional Gauge Component With JS And SVG – DoubleGauge

[Demo] [Download]


Pure CSS Gauge:

Creating Fast and Responsive Gauges with Pure CSS

A pure CSS solution to create pretty, fast and responsive bar gauges which can be used for counter, progress bar, or anything else.

Creating Fast and Responsive Gauges with Pure CSS

[Demo] [Download]


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome gauges on the web & mobile? Check out the jQuery Gauge and JavaScript/CSS Gauge sections.

See also: