Skip to content

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

License

Notifications You must be signed in to change notification settings

kubk/gauge-chart-js

Repository files navigation

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 + labels 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

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

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:

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published