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.

Examples

Conical / Polar gradient	Multiple gauges	Countdown circle

These are GIFs, therefore FPS is low.

Installation

npm install gauge-chart-js

Basic usage

import { cubicBezier, Gauge } from 'gauge-chart-js';

const gauge = new Gauge({
  container: document.querySelector('.root'),
  color: '#0f0'
});

gauge.setValue(50);

Customise easing

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

Options

Programmatic API

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.

How to integrate it with framework X?

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();
    });
  }
}

Run examples:

• 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