ngx pie chart not showing chart in the browser in Angular app

Question

I have been trying to display a chart in my angular app but for some reason it is not displaying in the browser. My package.json looks like this.

"dependencies": {
    "@angular/animations": "~13.1.1",
    "@angular/common": "~13.1.1",
    "@angular/compiler": "~13.1.1",
    "@angular/core": "~13.1.1",
    "@angular/fire": "^7.2.0",
    "@angular/forms": "~13.1.1",
    "@angular/material": "^13.1.1",
    "@angular/platform-browser": "~13.1.1",
    "@angular/platform-browser-dynamic": "~13.1.1",
    "@angular/router": "~13.1.1",
    "@swimlane/ngx-charts": "^20.0.1",
    "@swimlane/ngx-datatable": "^20.0.0",

  },

home.component.html:

<div class="card">
                <ngx-charts-pie-chart
                    [view]="view"
                    [scheme]="colorScheme"
                    [results]="arr"
                    [gradient]="gradient"
                    [legend]="showLegend"
                    [legendPosition]="legendPosition"
                    [labels]="showLabels"
                    [doughnut]="isDoughnut"
                    (select)="onSelect($event)"
                    (activate)="onActivate($event)"
                    (deactivate)="onDeactivate($event)"
                >
                
                </ngx-charts-pie-chart>
            </div>

home.component.ts:

export class HomeComponent implements OnInit {
    arr = [
        {"name": "Male", "value": 101},
        {"name": "Female", "value": 99}
    ]
    view: any[] = [200, 400];

    // options
    gradient: boolean = true;
    showLegend: boolean = true;
    showLabels: boolean = true;
    isDoughnut: boolean = true;
    legendPosition: string = 'below';

    colorScheme = {
        domain: ['#5AA454', '#A10A28']
    };

    constructor(
        
    ) { }

    ngOnInit(): void {}

    onSelect(data:any): void {
        console.log('Item clicked', JSON.parse(JSON.stringify(data)));
      }
    
      onActivate(data:any): void {
        console.log('Activate', JSON.parse(JSON.stringify(data)));
      }
    
      onDeactivate(data:any): void {
        console.log('Deactivate', JSON.parse(JSON.stringify(data)));
      }
}

When I inspect the page, I can see the the chart element like below But I don't see anything on the browser. Am I missing something?

score 0 · Answer 1 · answered Jan 10 '22 at 05:33

In your home.component.ts: change the type of view, colorScheme and legendPosition to 'any'. This worked for me.

arr = [{
    "name": "Male",
    "value": 199
  },
  {
    "name": "Female",
    "value": 99
  }
]
view: any = [200, 400];

// options
gradient: boolean = true;
showLegend: boolean = true;
showLabels: boolean = true;
isDoughnut: boolean = true;
legendPosition: any = 'below';

colorScheme: any = {
  domain: ['#5AA454', '#A10A28']
};

ngx pie chart not showing chart in the browser in Angular app

1 Answers1