A tiny library for rendering gauge charts. Supports conical/polar gradients, animation timing functions, custom labels/tooltips.
npm install gauge-chart-jsA tiny (<2kb gzipped) library for rendering gauge charts. Supports conical/polar gradients, animation timing functions, custom labels/tooltips. No external dependencies required.
|
|
|These are GIFs, therefore FPS is low.
npm install gauge-chart-jstypescript
import { cubicBezier, Gauge } from 'gauge-chart-js';const gauge = new Gauge({
container: document.querySelector('.root'),
color: '#0f0'
});
gauge.setValue(50);
`$3
`typescript
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
$3
| 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[] |$3
Available methods:
- setValue(value) Sets chart value.
- getElementAtValue(value) Returns SVG element for given value 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.$3
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:
`typescript
class ExampleComponent implements OnInit {
constructor(private ngZone: NgZone) {} ngOnInit() {
const gauge = new Gauge({ ... });
this.ngZone.runOutsideAngular(() => {
gauge.draw();
});
}
}
`$3
- cd examples
- npm run example conical-gradient/conical-gradient.html
- npm run example countdown-gauge/countdown-gauge.html
- npm run example multiple-gauges/multiple-gauges.html`