angular 2 gauge chart – Gauge for Angular 2 – Angular 2 gauge demo and example
In this post we will show you how to implement angular 2 gauge chart and how to use angular 2 gauge chart with demo and example. we alos show you how to use angular 2 gauge chart and give source code for it.
Flexible angular 2 gauge graph created with SVG ANG Angular 2 that may be used as chart too. hear give following links give you to Demo, Download and git source code links
angular 2 gauge Installing for angular 2 gauge chart
ng-gauge is available via npm
// Import with ng-gauge npm install ng-gauge -S
Import GaugeModule in your module
// Import with GaugeModule
import { GaugeModule } from 'ng-gauge';
And the models where you need them
// import ng-gauge for Gauge Segment and Gauge Label
import { GaugeSegment, GaugeLabel } from 'ng-gauge';
Usage in html:
<!-- html for ng-gauge --> <ng-gauge></ng-gauge>
Hear we set a dimension and height for the gauge and we’ll scale consequently.
Example code is checked in src/app/app.html
GaugeLabel may be a category you’ll use and it’s the subsequent properties for angular 2 gauge:
- fontSize: string = ‘1em’ | font size of this label
- x: variety = zero | x from place to begin (center center)
- color: string | color of this label
- y: variety = zero | y from place to begin (center center)
- text: string | content of this label
GaugeSegment may be a category you need to use and it’s the subsequent properties for angular 2 gauge:
- borderWidth: variety = one hundred | dimension of the border. Gets painted within radius
- radius: variety = one hundred | outer radius of this phase (border is painted inside)
- price: variety | value to be diagrammatic
- goal: variety = one hundred | most price for given phase
- bgColor: string = ‘transparent’ | background color of this phase
- color: string | color of the segments
Options for angularjs 2 gauge:
- label: GaugeLabel[] | labels to be displayed
- rounded: mathematician = true | whether or not linecap ought to be rounded
- animationSecs: variety = zero.5 | animation of lines once dynamic values
- reverse: mathematician = false | segments ar sorted by price. whether or not drawing order ought to be sorted
- bgColor: string | color of background circle
- bgRadius: variety = one hundred | radius of background circle
- segments: GaugeSegment[] | data to be displayed
You also like Angular Gauge chart and Angularjs Image Gallery and Angularjs pie chart and Vuejs WYSIWYG Editor