Switch branches/tags
Nothing to show
Clone or download
Matt Lewis
Latest commit d5b19a9 May 5, 2018


angular gauge

Build Status codecov npm version devDependency Status GitHub issues GitHub stars GitHub license



Table of contents


A tiny angular 5.0+ wrapper for https://github.com/naikus/svg-gauge


Install through npm:

npm install --save angular-gauge

Then include in your apps module:

import { Component, NgModule } from '@angular/core';
import { GaugeModule } from 'angular-gauge';

  imports: [
export class MyModule {}

By default no styling is included with the gauge so you need to define some global styles:

mwl-gauge {
  width: 150px;
  height: 150px;
  display: block;
  padding: 10px;
mwl-gauge > .gauge > .dial {
  stroke: #eee;
  stroke-width: 2;
  fill: rgba(0,0,0,0);
mwl-gauge > .gauge > .value {
  stroke: rgb(47, 227, 255);
  stroke-width: 2;
  fill: rgba(0,0,0,0);
mwl-gauge > .gauge > .value-text {
  fill: rgb(47, 227, 255);
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1em;

Finally use in one of your apps components:

import { Component } from '@angular/core';

  template: `
export class MyComponent {}

You may also find it useful to view the demo source.

This lib is just a tiny wrapper over the excellent svg-gauge library.

Usage without a module bundler

<script src="node_modules/angular-gauge/bundles/angular-gauge.umd.js"></script>
    // everything is exported `angular-gauge` namespace


All documentation is auto-generated from the source via compodoc and can be viewed here: https://mattlewis92.github.io/angular-gauge/docs/


Prepare your environment

  • Install Node.js and NPM (should come with)
  • Install local dev dependencies: npm install while current directory is this repo

Development server

Run npm start to start a development server on port 8000 with auto reload + tests.


Run npm test to run tests once or npm run test:watch to continually run tests.


npm run release