jQuery Raphael Gauge

Code Climate

You can see demo here.

Why bother?

I needed this kind of Gauge "chart" for one of my projects and it was great opportunity to get some experience in both AngularJS and Raphael.js :)


via bower:

or simply download latest source code from repository: link


Include angular-raphael-gauge in your HTML file. Remember about including Raphael.js and jQuery.

Next plugin-in angular-raphael-gauge into your application:

Now all you have to do is put directive code into HTML file: javascript <raphael-gauge id="gauge1" config="gauge"></raphael-gauge>

and pass some options via config object in $scope: javascript angularDemo.controller('DemoCtrl', ['$scope', function ($scope) { $scope.gauge = { name: 'Some data', opacity: 0.55, value: 65, text: 'some cool data' }; }]);

Updating $scope.value will update gauge value and render animation.

That's it! :) See demo for working example.


Here are options available to be set during runtime:

Building / Minifing

You can build minified version yourself, by simply using Grunt in project root.


  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request
comments powered by Disqus
This page was last updated over 3 years ago.