angular gauge

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


Table of contents


A tiny angular 10.0+ wrapper for


angular-gauge Angular
<=3.x.x <=9
4.x.x 10


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: [GaugeModule.forRoot()],
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:


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



result-matching ""

    No results matching ""