Angular 11 Pie Chart using ng2-charts Example

If you need to see example of angular 11 pie chart example. you can understand a concept of angular 11 pie chart npm. we will help you to give example of angular 11 ng2-charts pie chart . i would like to share with you how to add pie chart in angular 11.

In this example we will use ng2-charts npm package to create pie chart example in angular 11 application. we will simply install that ng2-charts npm package and use ChartsModule module to create code.

So, let's see bellow step and get qr code as like bellow screenshot:

Preview:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new myNewApp

Step 2: Install ng2-charts npm Package

Now in this step, we need to just install ng2-charts in our angular application. so let's add as like bellow:

npm install ng2-charts chart.js --save

Step 3: Import ChartsModule

we will import ChartsModule module as like bellow code:

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
  
import { AppComponent } from './app.component';
import { ChartsModule } from 'ng2-charts';
  
@NgModule({
  imports:      [ BrowserModule, FormsModule, ChartsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Step 4: Update Ts File

here, we need to update ts file as like bellow:

src/app/app.component.ts

import { Component, VERSION } from '@angular/core';
import { ChartType, ChartOptions } from 'chart.js';
import { SingleDataSet, Label, monkeyPatchChartJsLegend, monkeyPatchChartJsTooltip } from 'ng2-charts';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
   
  public pieChartOptions: ChartOptions = {
    responsive: true,
  };
  public pieChartLabels: Label[] = ['PHP', '.Net', 'Java'];
  public pieChartData: SingleDataSet = [50, 30, 20];
  public pieChartType: ChartType = 'pie';
  public pieChartLegend = true;
  public pieChartPlugins = [];
   
  constructor() {
    monkeyPatchChartJsTooltip();
    monkeyPatchChartJsLegend();
  }
}

Step 5: Update HTML File

here, we need to update html file as like bellow code:

src/app/app.component.html

<h1>Angular pie chart example - ItSolutionStuff.com</h1>
  
<div class="chart-wrapper">
    <canvas baseChart 
    [data]="pieChartData" 
    [labels]="pieChartLabels" 
    [chartType]="pieChartType"
    [options]="pieChartOptions"
    [plugins]="pieChartPlugins"
    [legend]="pieChartLegend">
  </canvas>
</div>

Now you can run by bellow command:

ng serve

now you can check it.

I hope it can help you...