ashish-chopra / ngx-gauge

A highly customizable Gauge component for Angular apps and dashboards

ngx-gauge

A highly customizable Gauge component for Angular apps and dashboards. It provides many configurationable options to customize according to your needs. Checkout the live demo here. (For older versions of Angular, check out the compatibility matrix below).

In version v5.0.0, we introduced markers, ticks and background opacity for gauge as shown below. Checkout the documentation below.

Getting Started

Angular Version Compatibility Table

Angular Version	ngx-gauge Version
6.0	-
7.0	-
8.0	1.0.0-beta.12
9.0	1.1.0
10.x.x	2.0.0
11.x.x	3.0.0
12.x.x	4.0.0
13.x.x	5.0.0
14.x.x	6.0.0
15.x.x	7.0.0
16.x.x	8.0.0
17.x.x	9.0.0

Step 1: Install npm module

For latest version use the command:

npm install ngx-gauge

For a specific version for an older Angular version as per Compatibility table above, use command:

npm install --save ngx-gauge@<version>

Step 2: Import the NgxGaugeModule

import { NgxGaugeModule } from 'ngx-gauge';

@NgModule({
    ...
    imports: [NgxGaugeModule],
    ...
})
export class AppModule { }

Be sure to import NgxGaugeModule after Angular's BrowserModule, as the import order matters for NgModules.

Step 3: Use gauge component in HTML

NgxGaugeModule provides a <ngx-gauge> component which can be used in any angular template to render a gauge. It's configuration properties can be bind to a typescript variable as shown below:

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

@Component({
    selector: 'app-component',
    templateUrl: 'app.html'
})
export class AppComponent {
    
    gaugeType = "semi";
    gaugeValue = 28.3;
    gaugeLabel = "Speed";
    gaugeAppendText = "km/hr";
}

<ngx-gauge [type]="gaugeType" 
           [value]="gaugeValue" 
           [label]="gaugeLabel"  
           [append]="gaugeAppendText">
</ngx-gauge>

Checkout the extensive list of configuration properites given below and try them to acheive your desired customization. In case you face any problem, then raise an issue here.

Configuration Properties

There are plenty of configurable properties available to tune the gauge as per your needs.

Name	Description	Required	Default value	Possible values
size	Specifies the size of the canvas in which Gauge will be drawn. It is used as width and height both.	No	200	Positive Integer
type	Specifies the gauge's type.	No	"full"	"full", "semi", "arch"
min	Specifies the minimum numeric value for gauge's scale.	No	0	Any numeric value
max	Specified the maximum numeric value for gauge's scale.	No	100	Any numeric value
value	Specifies the current value of the Gauge in the range specified by min and max. It is a required attribute.	Yes	undefined	Any numeric value
cap	The style of line ending at the gauge's end.	No	"butt"	"round", "butt"
thick	Specified the thickness of the gauge's bar.	No	6	Any Positive Integer
label	Specifies the text to display below the Gauge's reading.	No	undefined	Any String
foregroundColor	Specifies the foreground color of the Gauge's scale.	No	rgba(0, 150, 136, 1)	Any color value string
backgroundColor	Specifies the background color of the Gauge's scale.	No	rgba(0, 0, 0, 0.1)	Any color value string
append	Specifies a string appended to the Gauge's reading. For example "%" most commonly used.	No	undefined	Any string
prepend	Specifies a string prepended to the Gauge's reading. For example "$" in case of financial data displayed in Gauge.	No	undefined	Any String
duration	Specifies the duration (in milliseconds) of the Gauge's animation	No	1500	Positive Integer
thresholds	Specifies an object of threshold values at which the gauge's color changes. Checkout an example here.	No	none	{}
markers	Specifies an object of marker values at which value to place a marker. Can be a line or triangle and optionally may specify color, size and label. Note if you use labels you should add to margin value to the gauge using the margin option	No	A special object of the format shown. Currently type supports "line" or "triangle" marker. { "50": { color: "#555", type: "triangle", size: 8, label: "Goal", font: "12px arial" } , ... }	{}
margin	Specifies an optional margin for the gauge.	No	0	Positive Integer
animate	toggles the gauge animation.	No	true	boolean
aria-label	Specifies the label used by screen readers	No	undefined	Any String
aria-labelledby	Specifies the ID of any external element to be used as label by screen readers	No	null	Any ID String

Configure Threshold Color Ranges

You can customize the colors of the gauge based on the current value being shown. In order to show different colors when gauge crosses certain value, use property thresholds. It takes an object with the threshold value as key and an object with color property as value. For example:

@Component({ ... })
export class AppComponent {
    ...

    thresholdConfig = {
        '0': {color: 'green'},
        '40': {color: 'orange'},
        '75.5': {color: 'red'}
    };

    ...
}

<ngx-gauge ...  [thresholds]="thresholdConfig"></ngx-gauge>

The keys in the threshold object signifies the minimum value at which the color will be applied. For instance, if the gauge's current value is 53.2, then orange color will be applied because after point 40 every value will be displayed as orange, until next threshold is encountered. In this example 75.5 is the next threshold.

Custom Directives for display text

Sometimes setting a property value on <ngx-gauge> does not solve your purpose. You may want to add custom HTML for displaying value,append, prepend and label texts. In order to provide custom templates for these properties display following directives can be used.

<ngx-gauge [value]="currentValue">
    <ngx-gauge-append>
        <!-- custom append text or HTML goes here -->
    </ngx-gauge-append>
    <ngx-gauge-label>
        <!-- custom label text or HTML goes here -->
    </ngx-gauge-label>
    <ngx-gauge-prepend>
        <!-- custom prepend text or HTML goes here -->
    </ngx-gauge-prepend>
    <ngx-gauge-value>
        {{ currentValue * Math.PI | number }}
    </ngx-gauge-value>
</ngx-gauge>

Note that value attribute is still required on <ngx-gauge> even when you are providing custom template using <ngx-gauge-value>. Because value attribute is responsible for calculating the gauge's drawing on a scale.

Contribution Welcome!

The project is continously evolving with every new release. Give it a star, if you like it. For contribution, setup the development environment as follows:

1. clone and setup the project dependencies

$> git clone https://github.com/ashish-chopra/ngx-gauge.git
$> npm install

2. Use following commands based on what you'd like to do:

$> npm start             # builds the project and watch for changes. 
$> npm test              # runs test suite once and exit.
$> npm run test:watch    # starts the test framework and watch for changes in code.
$> npm run build         # triggers a manual build for library, outputs at `/dist` directory.

3. To add a new feature or fix a bug, make sure to create a new branch from master.

First thing first, explore the issue tracker to find something to contribute. There are tons of other project setup related issues and activities in which you can help. Your feedback could also be a great contribution.

If you face any problem, then raise an issue here.

License

MIT License

ngx-gauge's Issues

gauge threshold bug

Hi,
I'm using ngx-gauge in my angular application. I have a gauge which max value is 200 and current value is 150 with these thresholds

gaugeValue = 150;
gaugeMax = 200;
gaugeThresholds = {
 '0': { color: 'green' },
 '80': { color: 'orange' },
 '100': { color: 'red' } 
};

In this case, value is greater than 100 but the second threshold is chosen. If i change from 100 to 99 the right color is selected. This is very strange, can someone help me?

Thanks.

Custom directives not being imported (ngx-gauge-*)

First off, thanks for the library - it's been a huge help.

About

I'm currently having an issue where I am able to use the ngx-gauge component, but the associated directives do not work.

Scope

The following works without a problem

component.html

<ngx-gauge [cap]="'round'" [value]="item.value"></ngx-gauge>

module.ts

import { NgxGaugeModule } from 'ngx-gauge'

...

imports [ NgxGaugeModule ],

...

Reproduction

The following throws an error in the browser.

component.html

<ngx-gauge [cap]="'round'" [value]="item.value">
    <ngx-gauge-value> Test </ngx-gauge-value>
</ngx-gauge>

module.ts

import { NgxGaugeModule } from 'ngx-gauge'

...

imports [ NgxGaugeModule ],

...

Expected result

Gauge value is changed to text '

Actual result

Error is produced

Error: Template parse errors: 'ngx-gauge-value' is not a known element:
    1. If 'ngx-gauge-value' is an Angular component, then verify that it is part of this module.

Gauge Meter is not Updated

While updating the value, only the label alone gets updated, drawing is not happening.

Cannot read property 'clearRect' of undefined

I am using ngx-gauge inside ngu-carousel.
I have made gauges inside carousel, which moves left and right. When the page loads for the first time, everything works perfectly. But, when I filter the carousel, I get errors relating to gauge.

ERROR TypeError: Cannot read property 'clearRect' of undefined
at NgxGauge.push../node_modules/ngx-gauge/fesm5/ngx-gauge.js.NgxGauge._clear (ngx-gauge.js:326)

Could you tell me the cause and suggest any solution for this?

HTML Code:

<div class="row">
  <div class="col-lg-12 col-md-12" id="gauge-wrapper">
    <ngu-carousel #myCarousel [inputs]="carouselTile" [dataSource]="carouselTileItems">
      <ngu-tile *nguCarouselDef="let item; let i = index">
        <div class="tile">
          <ngx-gauge [type]="gaugeConfig.gaugeType" [value]="item?.headroom_percent" [label]="gaugeConfig.gaugeLabel"
            [append]="gaugeConfig.gaugeAppendText" [foregroundColor]="item?.colour" [size]=160>
          </ngx-gauge>
          <h6>{{ item?.name }}</h6>
        </div>
      </ngu-tile>
      <button NguCarouselPrev id="leftBtn" class="leftRs" [style.opacity]="myCarousel.isFirst ? 0.5:1">&lt;</button>
      <button NguCarouselNext id="rightBtn" class="rightRs" [style.opacity]="myCarousel.isLast ? 0.5:1">&gt;</button>
    </ngu-carousel>
  </div>
</div>

Not able to load ngx-gauge directive

After importing NgxGaugeModule(imported after BrowserModule), trying to use the directive ngx-gauge throws the below error in my component.

`Error: Template parse errors:
'ngx-gauge' is not a known element:

1. If 'ngx-gauge' is an Angular component, then verify that it is part of this module.

2. If 'ngx-gauge' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
   

          [ERROR ->]<ngx-gauge >
   
          </ngx-gauge>
   

"): ng:///xxx/xxx.html@xx:xx
at syntaxError (http://localhost:8100/build/vendor.js:130393:34)
at TemplateParser.parse (http://localhost:8100/build/vendor.js:141631:19)
at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:155825:39)
at http://localhost:8100/build/vendor.js:155744:62
at Set.forEach ()
at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:155744:19)
at http://localhost:8100/build/vendor.js:155631:19
at Object.then (http://localhost:8100/build/vendor.js:130382:133)
at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:155630:26)
at JitCompiler.compileModuleAsync (http://localhost:8100/build/vendor.js:155559:37)`

Adding more then one label inside gauge

What if i want to add more than one label inside gauge???

Animation interrupted causes a bug

Hello,

When we interrupt a gauge animation, for example when we navigate to another page before the animation ended, an error is displaying:

I think the problem comes because the component (where the gauge is used) is destroyed and doesn't exist anymore.

[Enhancement] Show value as string

I'm using gauges to show values about something like "usage", for example "10/15Gb used". It could be useful to set shown value as string so will be possible to show "16k/20k" because if values are very large you can see it followed by "..." and it isn't good i think.
What do you think about this?

Gauge line width resets on chart resize

If gauge is resized once it rendered, it loses linewidth and linecap set.

Reproduction: https://codesandbox.io/s/zk03075y53

gauge display not updating when tab is not active

I just figured that the gauge is not updating the display when we change tabs.

If you have: thresholds = { '20': {color: 'orange'}, '30': {color: 'orangeRed'}, '40': {color: 'red'} };

For example if the value of the gauge is 20, you change to another tab for 1-2 minutes and you come back then the displayed value is 50 but the color of the gauge is still orange and at the same level as 20. Hope it's clear enough.

Cannot add the component to Angular 7 project

When I added the dependency, the following error was displayed:

ERROR in node_modules/ngx-gauge/gauge/gauge-directives.d.ts(3,35): error TS2694: Namespace '".../node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDefWithMeta'.

Looking at the declaration files of different versions of @angular/core, the exported members (such as ɵɵDirectiveDefWithMeta) at the mentioned gauge-directives.d.ts file did not exist before version 8.0.x.

https://github.com/angular/angular/blob/6.1.x/tools/public_api_guard/core/core.d.ts
https://github.com/angular/angular/blob/7.2.x/tools/public_api_guard/core/core.d.ts
https://github.com/angular/angular/blob/8.0.x/tools/public_api_guard/core/core.d.ts

[aria-*] attributes do not match their roles

When we run audits in chrome using light house, the score of acceessability decreasing because of aria attributes provided in ngx-gauge are mismatching. Can you please provide the correct aria attributes.

Thank you.

Bar redrawn to 0 if animation.duration is > 10 (ms)

Hi!

Bar redrawn to 0 but the value is set. This problem only occurs if the animation is true and duration > 10 (ms). I want to use duration ~3000 (s3 seconds), but the bar is crashing. This problem is present in Angular 7.3.1 with [email protected]. Can you help me to fix this without remove the animation?

Thanks!

Value is always redrawn from 0

Can we do something so that value should draw from its last position rather than from zero always.

how To change the value of the AppendedText font

I need to make the text smaller to make it fit inside the gauge :

I managed to find where it's located using inspect but don't know how to change it in the code so it would persist :

forgotten console.log

In gauge.ts line 105 there is a console.log('thick value', this.thick); that wasn't removed. It's nothing major but it is annoying seeing it in my console all the time. If you could remove it, that would be great.

Get the end of the radius

How can I get the end of the progress bar of the gauge to set an additional element as a ball for example or an icon, is possible to get this coordinates.

Regards

Value drops to 0 after animation

I have an strange effect where my gauge animation drops to 0 when the value is changed. I was able to reproduce the effect (I forked an existing stackblitz from another issue :)
https://stackblitz.com/edit/angular-n1vmyv?file=app%2Fapp.component.ts

The effect only occurs the first time when the value changes asynchronously from 0 to another value and it only affects the gauge bar, but not the text.

Adding threshold marker,min,max value

it would be more helpful if u add threshold marker,min,max values in gauge and it would be a great addition...

guage type full not working

home.component.html

<ngx-gauge
[type]="gaugeType"
[value]="gaugeValue"
[label]="gaugeLabel"
[append]="gaugeAppendText"
>

home.component.ts

import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

import { HomeComponent } from './home.component';
import { HomeRoutingModule } from './home-routing.module';
import { NgxGaugeModule } from 'ngx-gauge';

@NgModule({
imports: [
HomeRoutingModule,
ChartsModule,
BsDropdownModule,
NgxGaugeModule
],
declarations: [HomeComponent]
})
export class HomeModule {

public gaugeType = "full";
public gaugeValue = 28.3;
public gaugeLabel = "Speed";
public gaugeAppendText = "km/hr";
}

it always taking semi type..

Gauge filling is not working

• I created a separate component for this gauge graph. I'm calling this component via a selector in another component and I'm passing the value of the graph via Input "@input() decorator".

<app-gauge [gauge_value]="gauge_level"></app-gauge>

• I'm using this selector 8 times in component. Gauge value is passed correctly but the filling inside the arc is not working for a few gauges. Is there any refresh function needed when the component is initiated or reloaded?

Thanks in advance!

HighlightJS dependency

angular2-highlight-js seems like an unnecessary and unused dependency. Is there some reason it's included?

Is it possible to remove the thousands separator (comma)

Hello,
I use high values like 12000 sheets/hour in that gauge,but in Germany we use no thousands seperator or maybe a point instead the comma. Is it possible to select a point for separating or even remove that char? Thank you.

Regards, Dominik

Release Empty

Fix your release package there is nothing in there. It doesn't install anything

Updating gauge value is causing a flicker on safari

The gauges are working great on chrome but there seems to be a visual issue while updating the value of the gauge on safari (v11.1). There's some sort of flickering going on (see https://stackblitz.com/edit/angular-aeuw9o). This stops after removing the call to _clear() in _update() though I haven't really looked into why this is :-) Not sure if there's an issue or I'm making some sort of mistake! I've been using beta 4

how to modify the foregroundColor

I couldn't find a way to edit the foregroundColor and backgroundColor
when I affect a value to them , it tells me that rgba( ...) unknown
please help me

Use value from firebase

I want to use data from firebase set to [value]
Help me please.

my code
home.ts
myitems: FirebaseObjectObservable<any[]>; this.myitems= this.fbd.object('/Arduino');

Add option to size fit parent

We need to add this to control the size if the parent size changes

Missing null check on Canvas context

Sometimes I get this error
ERROR TypeError: "this._context is null" _clearwebpack-internal:///../../../../ngx-gauge/ngx-gauge.es5.js:209:9_drawShellwebpack-internal:///../../../../ngx-gauge/ngx-gauge.es5.js:195:9animatewebpack-internal:///../../../../ngx-gauge/ngx-gauge.es5.js:296:13requestIDwebpack-internal:///../../../../ngx-gauge/ngx-gauge.es5.js:298:88invokeTaskwebpack-internal:///../../../../zone.js/dist/zone.js:421:17onInvokeTaskwebpack-internal:///../../../core/esm5/core.js:4952:24invokeTaskwebpack-internal:///../../../../zone.js/dist/zone.js:420:17runTaskwebpack-internal:///../../../../zone.js/dist/zone.js:188:28invokeTaskwebpack-internal:///../../../../zone.js/dist/zone.js:496:24invokewebpack-internal:///../../../../zone.js/dist/zone.js:485:28timerwebpack-internal:///../../../../zone.js/dist/zone.js:2025:17 core.js:1448

I think the problem is a missing null check when _context is initialized and used

ngx-gauge/libs/ngx-gauge/src/gauge/gauge.ts

Line 205 in 74a9fd0

this._context = (this._canvas.nativeElement as HTMLCanvasElement).getContext('2d');

After I get the error, the gauges work anyway. Maybe Angular reloads them

Angular 8+ peer dependencies fix

Hi,

could you please fix the following warnings when using angular 8+:

npm WARN [email protected] requires a peer of @angular/common@^7.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^7.1.0 but none is installed. You must install peer dependencies yourself.

Thank you!

Problem with example from read.me not working in ionic

Hi i'm doing exactly the code you gave in the read me file. But nothing appears. Even when i hard code the data in the html only the value is working, but no gauge.
Please help me figure this out. Do you think your module works on ionic 3 ?

Link to demo does not work

https://github.com/ashish-chopra/ngx-gauge

has no exported member 'ɵɵDirectiveDefWithMeta'

After integrating ngx-gauge library my app throws exception below

ERROR in node_modules/ngx-gauge/gauge/gauge-directives.d.ts(3,35): error TS2694: Namespace has no exported member 'ɵɵDirectiveDefWithMeta'.

Kindly guide me to solve this issue

Gauge Label can be customised to the fore ground colour of the gauge

When we customise the gauge to multiple colours based through the threshold functionality, there could also be a feature to add customise the colour of the gauge label to the fore ground colour of the gauge.

How to add icon in middle of guage if value is 100% complete

add Gradient in foreground

While adding foreground value it is better to have an option to make it as a gradient.

Hide Gauge Value Text

Hello, thanks for this fantastic library. Curious if there is a way to remove the text for the gauge value on this component? (See Photo)

reading-label container overlaps elements below it (with example)

Hi,

the reading-label div which is created by ngx-gauge when a label is used will overlap elements below it . As an example this results in buttons which are not clickable anymore. I made an example to show the behaviour I mean.

Example:

https://codesandbox.io/embed/angular-vohdo

Pictures from chrome dev tools

overlapped:

not overlapped:

Adding ticks on the gauge

I know this is somehow related to issue #27 almost a year ago but does anyone know how to add and display those ticks on the gauge to so it would look like the sample image below.

Thickness becomes super thin on resize, still. (With example)

The chart thickness going thin/removing on dynamic resizing is not solved I think. Maybe this is on me, but I think this is not intended to happen.

https://codesandbox.io/s/angular-puvvt?fontsize=14

Incompatible peer dependencies found

I am trying to update angular version from 6 to 7. So I execute the following command:

ng update @angular/cli @angular/core

I receive an error saying Incompatible peer dependencies found.

              Package "ngx-gauge" has an incompatible peer dependency to "@angular/core" (requires ">=6.0.0-rc.0 <7.0.0||>=4.3.6 <5.0.0||>=5.0.0 <6.0.0", would install "7.0.4").
              Package "ngx-gauge" has an incompatible peer dependency to "@angular/common" (requires ">=6.0.0-rc.0 <7.0.0||>=4.3.6 <5.0.0||>=5.0.0 <6.0.0", would install "7.0.4").

Incompatible peer dependencies found. See above.

cannot affect a variable value to the thresholdConfig object

I am trying to create a thresholdConfig where the specified values are affected from certain variable in my class
It doesn't work apperently the object only accepts values (string/number) , but fails to parse the value of a variable

Npm package includes ivy compiled metadata - breaking ivy builds

Hi,

The npm package for this project includes metadata from a compilation on angular 8.2 with ivy enabled. This causes any attempt to build with the angular9 next branch to fail with the error This project was compiled with an earlier version of the ivy compiler - delete node_modules and try again

Just a simple rebuild after npm ci and ivy settings turned off should fix the issue

Feature Request: Reverse Scale

I was wondering if you had any plans to allow for the scale of the gauge to be reversed. I have a use case where as the value decreases I'd like the gauge to filled.

Gauge looks Pixelated on Retina Display

Adding ticks, min and max value on the gauge

it would be very nice if it was possible to display the min and max value and also ticks ( let's say every 10 km/h for example)

Require an option to hide reading labels of the gauge completely

https://stackblitz.com/edit/angular-rbpj1d

Min/Max gauge value doesn't work correctly after updating the value

Hi all,

I use my gauge to let a user enter a number between i.e. 35 and 75.
The default value is 60 (which is on 50% of the gauge) this works.
After I put it on "61" the gauge fills up completely, it now responds to the difference of the min and max. as in: "75-35 = 40", the Gauge range now goes from 0-40 , so 40 - 75 is showing a full gauge. The ng-reflect-min / max and aria-valuemin are still 35 and 75.

Can anyone help me with this problem?
Thanks in advance

rtl issue

Renderer no longer in @angular/core package

import { SimpleChanges, Renderer, AfterViewInit, ElementRef, OnChanges, OnDestroy } from '@angular/core';

Looks like this breaks v9.0.0-rc.2 @angular/core