This is an angular wrap-over for the library gauge-chart
A library for creating nice and flexible gauge charts with Angular.
You can catch us on twitter: @recogizer or head over to our company's website.
npm install angular-gauge-chart
Import angular-gauge-chart into your module and add as a declaration.
import { GaugeChartModule } from 'angular-gauge-chart'
imports: [
GaugeChartModule,
]Create an element for positioning gauge in your html file:
<rg-gauge-chart
[canvasWidth]="canvasWidth"
[needleValue]="needleValue"
[centralLabel]="centralLabel"
[options]="options"
[name]="name"
[bottomLabel]="bottomLabel"></rg-gauge-chart>Now you're ready to draw your own gauge.
Just copy to your ts file the following code:
public canvasWidth = 300
public needleValue = 65
public centralLabel = ''
public name = 'Gauge chart'
public bottomLabel = '65'
public options = {
hasNeedle: true,
needleColor: 'gray',
needleUpdateSpeed: 1000,
arcColors: ['rgb(44, 151, 222)', 'lightgray'],
arcDelimiters: [30],
rangeLabel: ['0', '100'],
needleStartValue: 50,
}
Feel free to change or delete any of the gaugeOptions properties as long as their values are in permitted ranges.
canvasWidth: number
needleValue: number
centralLabel: string
options = { ... } :
| Name | Values Ranges | Description |
|---|---|---|
| hasNeedle | true / false | determines whether to show the needle or not |
| needleColor | value supported by CSS | colorizes needle with specified colors |
| needleUpdateSpeed | number larger than 0 | determines the speed of needle update animation |
| arcColors | array of values supported by CSS | colorizes gauge with specified color |
| arcDelimiters | array of numbers from 0 to 100 | specifies delimiters of the gauge in ascending order |
| rangeLabel | array of two strings | depicts gauge ranges on both sides of the chart |
| centralLabel | string | depicts gauge inner label |
name?: string (will be shown above the gauge)
nameFont?: number (font size of the name)
bottomLabel?: string (will be shown bellow the gauge)
bottomLabelFont?: number (font size of the bottom label)
Some examples of what you can get out of the library using different properties:
Build the library with npm run build. This will fetch all dependencies and then compile the dist files. To see the examples locally you can start a web server with npm start and go to localhost:4200.
MIT License. Copyright (c) 2017 RECOGIZER GROUP GmbH.
Angular Starter was used.
The project was generated with Angular CLI.