Press "Enter" to skip to content

Create SVG Gauges Chart In Angular

ng-gauge is an Angular 4+ wrapper for the SVG gauge library to help you create SVG-based metrics in your web application.

react svg gauge, svg dial gauge, svg gauge needle, svg gauge chart, angular gauge, angular gauge chart open source, ngx gauge chart

How to make use of it:

Installation:

npm install --save angular-gauge

1. Then include in your app module the following:

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

@NgModule({
  imports: [GaugeModule.forRoot()],
})
export class MyModule {}

2. By default, no style is included in the gauge, so you need to define some general 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;
}

3. Finally, use one of your app components:

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

@Component({
  template: `
    <mwl-gauge
      [max]="100"
      [dialStartAngle]="-90"
      [dialEndAngle]="-90.001"
      [value]="50"
      [animated]="true"
      [animationDuration]="1"
    >
    </mwl-gauge>
  `,
})
export class MyComponent {}

create svg gauges in angular, angular gauge Plugin/Github


See Demo And Download

Official Website(mattlewis92): Click Here

This superior jQuery/javascript plugin is developed by mattlewis92. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.