gauge-chart-js

gauge-chart-js   

A tiny (<2kb gzipped) library for rendering gauge charts. Supports conical/polar gradients, animation timing functions, custom labels/tooltips. No external dependencies required.

$3

| Conical / Polar gradient | Multiple gauges | Countdown circle |
| ------------- | -------------| -------------|
| | | |

These are GIFs, therefore FPS is low.

$3

npm install gauge-chart-js

$3

``typescript
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`