Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

gauge-chart-js

1.1.0 • Public • Published

gauge-chart-js NPM version Build Status code style: prettier

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

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({
  ...
  easingeaseIn
})

Easing functions cheat sheet: https://matthewlein.com/tools/ceaser

Options

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[]

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

Install

npm i gauge-chart-js

DownloadsWeekly Downloads

31

Version

1.1.0

License

ISC

Unpacked Size

443 kB

Total Files

40

Last publish

Collaborators

  • avatar