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?: 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.

Alexey Karpov, Maxim Maltsev.