gauge.js
100% native and cool looking animated JavaScript/CoffeScript gauge.
- No images, no external CSS - pure canvas
- No dependencies
- Highly configurable
- Resolution independent
- Animated gauge value changes
- Works in all major browsers
- MIT License
Usage
var opts = {
angle: 0.15,
lineWidth: 0.44,
pointer: {
length: 0.9,
strokeWidth: 0.035
},
colorStart: '#6FADCF',
colorStop: '#8FC0DA',
strokeColor: '#E0E0E0'
};
var target = document.getElementById('foo');
var gauge = new Gauge(target).setOptions(opts);
gauge.maxValue = 3000;
gauge.setMinValue(0);
gauge.set(1250);
For an interactive demo and a list of all supported options please refer to the project's homepage.
Wrappers
gauge.js can be wrapped to a number of frameworks. Here are some examples:
Build instructions
Build is a two-step process. First, the CoffeeScript source gauge.coffee
is converted to gauge.js
. Next, terser produces the minified distribution file gauge.min.js
.
npm install
npm run build