Can I control the width of the ark ?

[saleemnasa]

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

Thank You

[Onzii]

Hallo :) @saleemnasa how did you get it to work? I get a lot of errors for example: Uncaught Error: Template parse errors: Can't bind to 'canvasWidth' since it isn't a known property of 'gauge-chart'.

Thank you :)

[saleemnasa]

Hi @Onzii I just followed the given steps in the readme file. Have another look at it. It works. All the best.

[Onzii]

Hi @saleemnasa

Thanks for the answer! Yes i have done that i have installed it with: npm install angular-gauge-chart and the imported it in the app.module.ts with: import {GaugeChartComponent} from 'angular-gauge-chart'; and added it to the declarations. But still it does not work for me.

Thanks for you help!

[saleemnasa]

Hi @Onzii ,

first: add this in dependencies obj in package.json ==> "angular-gauge-chart": "^0.5.0-beta.0", second: add this in module.ts file ==> import { GaugeChartComponent } from 'angular-gauge-chart' third: add this in declaration array in module.ts file ==> declarations: [AppComponent, GaugeChartComponent], forth: than run ==> npm install final: add this in component.ts file (html is included in this code itself) ==>

import { Component, OnInit } from '@angular/core'

/**

• App Component

• Top Level Component */ @Component({ selector: 'app-root', template: <rg-gauge-chart [canvasWidth]="canvasWidth" [needleValue]="needleValue" [centralLabel]="centralLabel" [options]="options" [name]="name" [bottomLabel]="bottomLabel"></rg-gauge-chart>, }) export class AppComponent implements OnInit { public canvasWidth: number public needleValue: number public centralLabel: string public options public name = 'Gauge chart' // public nameFont = 30 public bottomLabel = '65' // public bottomLabelFont = 28 ngOnInit() { this.canvasWidth = 300 this.needleValue = 65 // this.centralLabel = '' + this.needleValue this.options = { hasNeedle: true, needleColor: 'gray', needleUpdateSpeed: 1000, arcColors: ['rgb(44, 151, 222)', 'lightgray'], arcDelimiters: [30], rangeLabel: ['0', '100'], needleStartValue: 50, }

  /setInterval(() => { this.bottomLabel = '' + (+this.bottomLabel + 10) + '.0' }, 2000)/ } }

Try the above process.

[greetclock]

@Onzii try rg-gauge-chart. In readme, we have a mistake:

<gauge-chart
    [canvasWidth]="canvasWidth"
    [needleValue]="needleValue"
    [centralLabel]="centralLabel"
    [options]="options"
    [name]="name"
    [bottomLabel]="bottomLabel"></gauge-chart>

Try to replace <gauge-chart> with <rg-gauge-chart>

[greetclock]

@saleemnasa the library has the only width option - canvasWidth. Please, could you describe your case? Probably I can help you somehow

[Onzii]

@cherurg and @saleemnasa thank you for your help now it works :)