Circular Gauge not working after Angular 9 upgrade

[Aparna Pyla]

Hi,

I upgraded my application from Angular 8.2 to 9 and the circular gauge stopped working. But I don't see any console errors. Below are the screenshots before and after upgrade. 

                                           Previous                                                                                      After upgrade 

     

Here is a part of my package.json 

"dependencies": {

"@angular/animations": "9.0.6",

"@angular/cdk": "^9.1.2",

"@angular/common": "9.0.6",

"@angular/compiler": "9.0.6",

"@angular/core": "9.0.6",

"@angular/forms": "9.0.6",

"@angular/material": "^9.1.2",

"@angular/platform-browser": "9.0.6",

"@angular/platform-browser-dynamic": "9.0.6",

"@angular/router": "9.0.6",

"@syncfusion/ej2-angular-charts": "^17.4.51",

"@syncfusion/ej2-angular-circulargauge": "^17.4.51",

"core-js": "^2.4.1",

"tslib": "^1.10.0",

"web-animations-js": "^2.3.2",

"zone.js": "~0.10.2"

},

"devDependencies": {

"@angular-devkit/build-angular": "~0.900.6",

"@angular-devkit/build-ng-packagr": "~0.900.6",

"@angular-devkit/core": "^9.0.6",

"@angular/cli": "^9.0.6",

"@angular/compiler-cli": "9.0.6",

    .........

}

I also tried with angular version of 9.0.2 and still have the same issue

Thanks,

Aparna

[Manikandan Thangapandian]

Hi Aparna, 

  

Thank you for your patience. 

 

We have analyzed the reported issue and we can reproduce this issue on the angular 9 version. However, we have an alternate solution for this issue. Instead of providing the complex property as a tag, we can provide it as a property to the component as an array of objects. Please find the code snippet for achieving the same in the angular 9 application. 

 

Code snippet: 

<e-axis minimum=0 radius='80%' maximum=100 startAngle=210 endAngle=150 [majorTicks]='majorTicks' [labelStyle]='labelStyle' 

            [lineStyle]='lineStyle' [minorTicks]='minorTicks' [annotations]='annotaions' [ranges]='ranges' [pointers]='pointers' 

            > 

        </e-axis> 

 

 

public pointers: object[] = [ 

      { 

        value: 60, 

        type: 'RangeBar', 

        radius: '70%', 

        color: 'green', 

        pointerWidth: 30       

      } 

    ]; 

 

 

We have created a simple sample for your reference and it can be downloaded from the following link. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/syncfusion-angular-app1165770141.zip 

  

We will consider the reported issue as a defect and the fix for the issue will be available in our weekly patch release which is expected to be available in the month of April, 2020. 

 

Regards, 

Manikandan T

[Mark Boyle]

Does the same apply for ranges and annotations?

Cheers

Mark

[Swetha Babu]

  

Hi Mark, 

Thanks for the update. 

We have checked your query with circular gauge in Angular 9.0.2 version. We are not able to reproduce the reported issue. Please find the sample below in which we tried to reproduce the reported issues for your reference. 

https://www.syncfusion.com/downloads/support/forum/152592/ze/syncfusion-angular-app-1476646079 

Please find the below screenshot from the sample. 

ScreenShot: 

 

Please let us know if the reported issue is resolved with the provided sample. If not, please modify the above sample and share the same to use. It will be helpful for us to analyze further and assist you better. 

Regards, 

Swetha Babu