A tiny (<2kb gzipped) library for rendering gauge charts. Supports conical/polar gradients, animation timing functions, custom labels/tooltips. No external dependencies required.
Conical (Polar) gradient | Multiple gauges + labels | Countdown circle |
---|---|---|
![]() |
![]() |
![]() |
These are GIFs, therefore FPS is low.
npm install gauge-chart-js
import { cubicBezier, Gauge } from 'gauge-chart-js';
const gauge = new Gauge({
container: document.querySelector('.root'),
color: '#0f0'
});
gauge.setValue(50);
import { cubicBezier, Gauge } from 'gauge-chart-js';
const easeIn = cubicBezier(0, 0, 0.2, 1);
const gauge = new Gauge({
// ...
easing: easeIn
})
Easing functions cheat sheet: https://cubic-bezier.com/#.17,.67,.83,.67
Name | Description | Required | Default value | Type |
---|---|---|---|---|
container |
The HTML element that act as a container for the gauge | Yes | - | HTMLElement |
fromAngle |
Gauge start angle in degrees | No | 220 | number |
toAngle |
Gauge end angle in degrees | No | 500 | number |
animationDuration |
Animation duration in milliseconds | No | 600 | number |
animationDelay |
Animation delay in milliseconds. Pass 0 for no animation. | No | 0 | number |
lineWidth |
Thickness of the gauge | No | 3.5 | number |
easing |
The easing function that will be used when animating | No | linear | (timeFraction: number) => number |
gaugeRadius |
Gauge radius | No | 35 | number |
color |
Gauge color supported by SVG's fill attribute | No | - | string |
colors |
Gauge colors supported by SVG's fill attribute | No | - | string[] |
Available methods:
setValue(value)
Sets chart value.getElementAtValue(value)
Returns SVG element for givenvalue
with additional information: angle and relative position to its parent container.insertAdjacentToRoot(where, html)
Inserts HTML to SVG root. Can be used for custom labels.dispose()
Disposes chart.
The library is framework-agnostic and do not require any framework-specific integration. If you are using Angular make sure chart is rendered outside zone.js:
class ExampleComponent implements OnInit {
constructor(private ngZone: NgZone) {}
ngOnInit() {
const gauge = new Gauge({ ... });
this.ngZone.runOutsideAngular(() => {
gauge.draw();
});
}
}
cd example
npm run dev
- Open demo Conical gauge: https://localhost:3000/conical-gradient/
- Open demo React + shadowed center: https://localhost:3000/progress-with-shadow-chart/
- Open demo Multiple gauges + labels: https://localhost:3000/multiple-gauges/
- Open demo Countdown gauge: https://localhost:3000/countdown-gauge/