Angular Gauge Chart

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.

Demo | Docs

Installation

  npm install angular-gauge-chart

Usage

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,
}

Result:

Gauge Example

Feel free to change or delete any of the gaugeOptions properties as long as their values are in permitted ranges.

Options

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)

Examples

Some examples of what you can get out of the library using different properties:

Gauge Examples

Contributing

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.

License

Angular Starter was used.

The project was generated with Angular CLI.

Authors

Alexey Karpov, Maxim Maltsev.

greetclock / angular-gauge-chart

readme