greetclock/angular-gauge-chart

Angular Gauge Chart

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:

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:

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

MIT License. Copyright (c) 2017 RECOGIZER GROUP GmbH.

Angular Starter was used.

The project was generated with Angular CLI.

Authors

Alexey Karpov, Maxim Maltsev.

angular-gauge-chart's Issues

On Option change, gauge label not updating

When I change options parameters, my needle value is getting changed properly. However, my rangeLabel is not updating.

I have a list of users(say) having balance and total amount which I am showing in gauge representation. When I select a particular user, that users balances should be shown in gauge. Needle change is working, however not the rangeLabel. In console.log my option object is updated but not the Gauge value.

Update canvasWidth value

When trying to update chart width depending on window's width, the chart did'nt update as I would expect. The complete chart initialisation has to be called in order to update canvasWidth.
As exemple, it is possible to do this work with centralLabel. I would like to do the same with canvasWidth.

needleValue, arcDelimiters is greater than or greater than equal to is not working

Hi
needleValue, arcDelimiters is greater than || greater than equal to rangeLabel max or min value is not working can you please help me to resolve this issue.

below are the configurations

public canvasWidth = 300;
public needleValue = 2000;
public centralLabel = '1000';
public name = 'Gauge chart';
public bottomLabel = '65';
public options = {
hasNeedle: false,
needleColor: 'gray',
needleUpdateSpeed: 1000,
arcColors: ['rgb(44, 151, 222)', 'lightgray'],
arcDelimiters: [2000],
rangeLabel: ['1', '1000'],
needleStartValue: 50,
};

Version
[email protected]
@angular/cli: ~7.3.1

Angular 8 Support

Please update peer dependencies to support Angular version 8. I have tested against Angular 8 with and without Ivy enabled and didn't find any issues.

refactor styles

i want set custom styles for chart .
such as refactor svg s

unable to use GaugeChart even after npm install- Cannot find name 'GaugeChart'.ts(2304)

I installed the package using npm. post this, when I'm trying to create a gauge chart I'm getting the cannot find name error.
I tried to import it as well using,
import * as GaugeChart from 'gauge-chart'- getting error as:

Could not find a declaration file for module 'gauge-chart'. 'c:/Users/Z004CW5B/sinumerik-analytics/Front-End/HMT-FRONT-END/node_modules/gauge-chart/dist/bundle.js' implicitly has an 'any' type.

but it isn't able to identify gauge-chart- Cannot find name 'GaugeChart'.ts(2304)

Change centralLabel font size

I need to change the centralLabel font size, but seems there isn't a corresponding property.

angular ng build --prod failure

ERROR in : Type GaugeChartComponent in C:/Users/Documents/iqm/sprint-14-Dec/app/node_modules/angular-gauge-chart/angular-gauge-chart.d.ts is part of the declarations of 2 modules: MainModule in C:/Users/Documents/iqm/sprint-14-Dec/app/src/app/main/main.module.ts and GaugeChartModule
in C:/Users/Documents/iqm/sprint-14-Dec/app/node_modules/angular-gauge-chart/angular-gauge-chart.d.ts! Please consider moving GaugeChartComponent in C:/Users/Documents/iqm/sprint-14-Dec/app/node_modules/angular-gauge-chart/angular-gauge-chart.d.ts to a higher module that imports MainModule in C:/Users/Documents/iqm/sprint-14-Dec/app/src/app/main/main.module.ts and GaugeChartModule in C:/Users/Documents/iqm/sprint-14-Dec/app/node_modules/angular-gauge-chart/angular-gauge-chart.d.ts. You can also create a new NgModule that exports and includes GaugeChartComponent
in C:/Users/Documents/iqm/sprint-14-Dec/app/node_modules/angular-gauge-chart/angular-gauge-chart.d.ts then import that NgModule in MainModule
in C:/Users/Documents/iqm/sprint-14-Dec/app/src/app/main/main.module.ts and GaugeChartModule in C:/Users/Documents/iqm/sprint-14-Dec/app/node_modules/angular-gauge-chart/angular-gauge-chart.d.ts.

CentralLabel showing on left of gauge

Any hints on why the central label is showing at the left of the chart intead of in the inner middle?

Here is some of my code:
<mat-card class="summary-box"> <mat-card-header> <mat-card-title>{{ specification.caption }}</mat-card-title> <mat-card-subtitle> {{ specification.subcaption }}</mat-card-subtitle> </mat-card-header> <mat-card-content> <rg-gauge-chart [canvasWidth]= 500 [nameFont] = 20 [needleValue]="specification.widget.needleValue" [bottomLabelFont] = 18 [centralLabel] = 70 [options]="options" ></rg-gauge-chart> <small>70% = {{(specification.widget.bottomLabel | number) + ' ' + specification.units}}</small><br> <small>AVG = Elephant Butte Storage Calendar Year Average (1964-2013)</small> </mat-card-content> </mat-card>

CSS:

`.metadata-box{
margin: 25px 10px 25px 10px;
}

mat-card {
display: flex;
flex-grow: 1;
}

mat-card-content {
margin-left: 15px;
flex-grow: 1;
}

.description{
font-size: 16px;
}`

Uncaught TypeError: e.className.includes is not a function

When I click on a color part of the gauge-chart I get this error:
Uncaught TypeError: e.className.includes is not a function

rangeLabel set more than 100

How can we set rangeLabel more than 100. If I specify more than 100, it is not displaying as expected

unable to install angular-gauge-chart on angular 12 and above

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"11.2.11" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^8.0.0" from [email protected]
npm ERR! node_modules/angular-gauge-chart
npm ERR! angular-gauge-chart@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/test/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/test/.npm/_logs/2022-04-22T05_36_43_682Z-debug-0.log

Updating Gauge Value

How can I update an existing gauge values?

Target line implementation

Hello, nice project! I would like to ask if it's possible to implement a target line/ goal line in the gauge chart.

Center the chart

I cannot get the chart in middle of an element (e.g. div). I tried with text-align:center in many parental elements but the chart is orientated on the left every time. I there a hint?

Increase stroke

How can I increase the stroke of the half doughnut like this so that the indicator falls on to the doughnut?

Arc width

how can we set arc width ?

More flexible width

It would be great if the width input could be of type number (as is right now) and as string, so that one could for example set the width to '20em' or '50%'.

Bottom Label Position is Not Consistent

I'll probably just fix this with some css rules in my own project, but I wanted to let you know I am seeing an inconsistency in the placement of the bottom labels.

I am setting the bottomLabelFont value to 22, and the gauge on the left is getting the style margin-top: -22px applied to the bottom label, whereas the gauge on the right is not getting that same style applied.

My gauges are using the exact same markup, just different values for arc delimiters, needle values, and bottom label text so I don't think this has something to do with my code.

The only thing I could think of is the fact that my options object has 3 additional properties to make things simple in my .ts file, but removing those does not change this issue.

Install & using troubles

Hi,
I m trying to use your component with ng5.
Using this line
import { GaugeChartComponent } from 'angular-gauge-chart';
I got an error saying this module is not found.
I tried
import { GaugeChartComponent } from '@recogizer/angular-gauge-chart' but I get a lot of warnings

WARNING in ./node_modules/@recogizer/angular-gauge-chart/node_modules/@angular/core/@angular/core.es5.js
5870:15-36 Critical dependency: the request of a dependency is an expression
    at ImportLazyContextDependency.getWarnings (C:\Dev2018\testgauge\test201806.Web\node_modules\webpack\lib\dependencies\ContextDependency.js:39:18)
    at Compilation.reportDependencyErrorsAndWarnings (C:\Dev2018\testgauge\test201806.Web\node_modules\webpack\lib\Compilation.js:703:24)
    at Compilation.finish (C:\Dev2018\testgauge\test201806.Web\node_modules\webpack\lib\Compilation.js:561:9)
    at applyPluginsParallel.err (C:\Dev2018\testgauge\test201806.Web\node_modules\webpack\lib\Compiler.js:506:17)
    at C:\Dev2018\testgauge\test201806.Web\node_modules\tapable\lib\Tapable.js:289:11
    at _addModuleChain (C:\Dev2018\testgauge\test201806.Web\node_modules\webpack\lib\Compilation.js:507:11)
    at processModuleDependencies.err (C:\Dev2018\testgauge\test201806.Web\node_modules\webpack\lib\Compilation.js:477:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./node_modules/@recogizer/angular-gauge-chart/node_modules/@angular/core/@angular/core.es5.js
 @ ./node_modules/@recogizer/angular-gauge-chart/dist/bundle.js
 @ ./src/app/shared/shared.module.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

WARNING in ./node_modules/@recogizer/angular-gauge-chart/node_modules/@angular/core/@angular/core.es5.js
5886:15-102 Critical dependency: the request of a dependency is an expression
    at ImportLazyContextDependency.getWarnings (C:\Dev2018\testgauge\test201806.Web\node_modules\webpack\lib\dependencies\ContextDependency.js:39:18)
    at Compilation.reportDependencyErrorsAndWarnings (C:\Dev2018\testgauge\test201806.Web\node_modules\webpack\lib\Compilation.js:703:24)
    at Compilation.finish (C:\Dev2018\testgauge\test201806.Web\node_modules\webpack\lib\Compilation.js:561:9)
    at applyPluginsParallel.err (C:\Dev2018\testgauge\test201806.Web\node_modules\webpack\lib\Compiler.js:506:17)
    at C:\Dev2018\testgauge\test201806.Web\node_modules\tapable\lib\Tapable.js:289:11
    at _addModuleChain (C:\Dev2018\testgauge\test201806.Web\node_modules\webpack\lib\Compilation.js:507:11)
    at processModuleDependencies.err (C:\Dev2018\testgauge\test201806.Web\node_modules\webpack\lib\Compilation.js:477:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./node_modules/@recogizer/angular-gauge-chart/node_modules/@angular/core/@angular/core.es5.js
 @ ./node_modules/@recogizer/angular-gauge-chart/dist/bundle.js
 @ ./src/app/shared/shared.module.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

Did I miss something?
Regards,

is it possible to include a circle rounding the gauge?

I am trying to implement a full circle gauge but can't find any way to do it. I want the gauge to be the same but a circle rounding it.

Responsive width of the chart

Hi,
First of all great plugin.
But can i have the width of the chart to be responsive in nature?

Not able to Change the Color of the Name Shown at top of the graph , In document Only name and NameFont is Shown ?

I am Talking About this.

Chart not working with Decimal/Float value

It not work with float value

optionsChart4 = {
    hasNeedle: true,
    needleColor: 'gray',
    needleUpdateSpeed: 2000,
    arcColors: ['rgb(255,84,84)', 'rgb(239,214,19)', 'rgb(61,204,91)'],
    arcDelimiters: [0.9, 0.95],
    rangeLabel: ['0', '1'],
    needleStartValue: 0,
    bottomLabel: '0.93',
    name: 'Power Factor',
    needleValue: 0.93
}

unable to install on angular 12 and above

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"11.2.11" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^8.0.0" from [email protected]
npm ERR! node_modules/angular-gauge-chart
npm ERR! angular-gauge-chart@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/test/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/test/.npm/_logs/2022-04-22T05_36_43_682Z-debug-0.log

Unexpected token: punc ()) error in version 0.7.1

The version 0.7.1 throws error while building with --prod flag. Debug the error with the following line:
ng build --prod --named-chunks --verbose --build-optimizer=false --source-map

And found the error on:

Unexpected token: punc ()) [./node_modules/gauge-chart/dist/bundle.js:169,0]

The line was causing the problem because of the trailing comma:

.attr(
  'transform',
  'translate(' + (n + 2 * e) + ', ' + (n + e) + ')',
)

Removed the trailing comma and tried to build again but the error continues to another line as the file has trailing commas. Finally, downgraded back to 0.6.0 and it works fine. This version contains the uglified code with no trailing commas but the latest version has pretty code but with trailing commas.

@NgModule({
  declarations: [XYZ],
  imports: [
    ...
    GaugeChartModule,
  ]
})

Just to add, I am using the library in my Angular 8 project - not directly building the library with --prod flag.

Issue in upgrading library to Angular 12

I have tried to migrate my application to Angular 12, which contains this library and I found incompatibility in the library with Angular 12

Package "angular-gauge-chart" has an incompatible peer dependency to "@angular/common" (requires "^8.0.0" (extended), would install "10.2.5").

Can someone help on this?

Error when updating centralLabel

I get this error in Chrome 71.0.3578.98 every time, when I change the value for the centralLabel in a background process. The values in the chart is changed correctly but the error message is written in the console output.

ERROR TypeError: Cannot read property 'currentValue' of undefined
at GaugeChartComponent.push../node_modules/angular-gauge-chart/fesm5/angular-gauge-chart.js.GaugeChartComponent.ngOnChanges (angular-gauge-chart.js:87)
at checkAndUpdateDirectiveInline (core.js:8941)
at checkAndUpdateNodeInline (core.js:10209)
at checkAndUpdateNode (core.js:10171)
at debugCheckAndUpdateNode (core.js:10804)
at debugCheckDirectivesFn (core.js:10764)
at Object.eval [as updateDirectives] (PageComponent.html:12)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:10756)
at checkAndUpdateView (core.js:10153)
at callViewAction (core.js:10394)

ARc Lables

i need to set arc lables side

arcColor

arcColors: ['linear-gradient(red,yellow,orange)'],

its not working

ERROR TypeError: Cannot read properties of undefined (reading 'removeGauge')

I am using Angular Material 7 with Angular 7. For creating charts I am using angular-guage-chart: 0.7.2

I fetch some data from api, process it and then render the same as guage chart. However, this is not working fine me sometimes.

Sometimes, the chart doesn't get rendered and I get the following error:

ERROR TypeError: Cannot read properties of undefined (reading 'removeGauge')
at GaugeChartComponent.push../node_modules/angular-gauge-chart/fesm5/angular-gauge-chart.js.GaugeChartComponent.drawChart (angular-gauge-chart.js:96:1)
at GaugeChartComponent.push../node_modules/angular-gauge-chart/fesm5/angular-gauge-chart.js.GaugeChartComponent.ngDoCheck (angular-gauge-chart.js:68:1)
at checkAndUpdateDirectiveInline (core.js:22102:1)
at checkAndUpdateNodeInline (core.js:23363:1)
at checkAndUpdateNode (core.js:23325:1)
at debugCheckAndUpdateNode (core.js:23959:1)
at debugCheckDirectivesFn (core.js:23919:1)
at Object.eval [as updateDirectives] (DashboardComponent.html:234:19)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911:1)
at checkAndUpdateView (core.js:23307:1)

Can I control the width of the ark ?

I want to adjust the width of the ark. not the width of the "canvasWidth".

Thank You

getting issue when value is read from api

getting issue "updateNeedle" of undefined while reading values from api need to give setTimeout in "angular-gauge-chart.js" to updateneedle value but this should work without using setTimeout.

Error:(18, 37) TS2307: Cannot find module 'angular-gauge-chart'.

I npm installed the package, but my IDE is not finding the module 'angular-gauge-chart'. What could be wrong?

How to add Label on ARC

Hello all,

I want to create a gauge chart with label on the arc as shown in the following picture

or link following URL (last example)
https://recogizer.github.io/gauge-chart/examples/samples/

but unable to re-create it?

backward compatibility

Hi,

I found this component very useful for our project but at present we are on angular 5 and have no plans to update.I was just wondering the same github project can be made backward compatible or if you have any archives of the same project done in angular 5 it would be helpful.

Peer dependencies warning with angular 10

Thanks for the great library !!!
As angular 10 is released, can you please make the library compatible with angular 10. I see the below warning on npm install

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

Thanks in advance...

Critical dependency: the request of a dependency is an expression error

I want to add more than 3 colors to the arc

how to add more than three colors to the arc in angular 6 application?

Is there any click event available on the chart.

Is there any click event available on the chart.

Changing value by touch / drag

Hi!

Is it possible to change the gauge value by touching it? (For example to be able to use it for temperature control)

Delimiter labels

It would be nice if one could label delimiters.

Flexible Width

Is it possible or will it be possible to have flexibility for the width? For example '100%'

arcDelimiters value not updating dynamically please give the solutions

Prod build error

Building the library with ng serve --prod fails

ERROR in main.......js from Terser
Unexpected token: punc ()) [main.......js:]