How to create a pie chart using Chart.js in Angular

Key takeaways:

  • Chart.js is a free, open-source JavaScript library that makes it simple to create various charts, including line, bar, pie, and scatter charts.

  • The Chart.js library offers animation capabilities, making charts interactive and visually appealing.

  • Chart.js is written in pure JavaScript and can operate independently of other libraries, making it versatile for data visualization tasks.

  • Install Chart.js and its Angular wrapper (ng2-charts) using npm: npm install chart.js ng2-charts

Angular is a TypeScript-based free, open-source framework developed by Google that allows its users to develop front-ends of mobile and web applications. It is focused on creating dynamic single-page applications (SPA) and provides a structured way to build client-side applications using TypeScript/JavaScript, HTML, and CSS. It also supports multiple libraries and encourages component-based architecture.

One of these libraries is ChartJS, a free, open-source JavaScript library for data visualization in the form of multiple charts. These include line, bar, pie, scatter, and many more. It also provides users with animation capabilities on its charts, such as pop-ups. It is written in pure JavaScript and is entirely independent of other libraries.

Setting up Angular

Before starting the Angular setup, we must have Node.js and npm (or Yarn) package manager. To install these, visit the official websitehttps://docs.npmjs.com/downloading-and-installing-node-js-and-npm/ for npm and download the version compatible with our machine.

Now that we have set up Node.js and our package manager, we can proceed with Angular. Follow the steps below to download, install, and set up our Angular application.

  1. First, We will open our terminal and enter the command below to install our Angular CLI. 

npm install -g @angular/cli
Install Angular CLI

  1. Now, we can create our Angular application by entering the command below, where we can replace piechartApp with any name we like. After we enter this, we need to enable routing and select CSS as our style.

ng new piechartApp
Create Angular application

  1. To make our process more accessible, we can use an IDE like VS Code and install extensions like Angular Language Service.

  2. Now, run the following commands inside the newly created folder. The first command will build the code and generate multiple bundles for differential loading. The second command bundles our code with Webpack so that every change we make will be reflected on the browser. This will open our local page for our Angular application at the default port of http://localhost:4200.

ng build piechartApp
ng serve piechartApp
Bundle code

  1. We will open another terminal and install Chart.js by entering the following command.

npm install chart.js
Install ChartJS

  1. Let us now create the component for our chart. To do so, use the following command.

ng generate component piechart
Generate component

Everything is set up now. The next step will be to add data to our chart elements and components.

Creating a pie/doughnut chart

Now that we have our components let us add the data in the specific files.

  1. First, we will open our piechart.components.html file. In it, we will paste the following code. 

<div class="chart-container">
    <canvas  id="MyChart" >{{ chart }}</canvas>
</div>
Create char container

  1. Now, we will open our piechart.components.ts file. Here we will import chart.js and create two class functions. We will also declare our chart variable as public. The first function will be a ngOnInit function that runs when the class’s constructor is called. This function will contain a function call to our second function. The second function called createChart will create the chart that we require. 

import Chart from 'chart.js/auto';
//  rest of the code 
export class PiechartComponent implements OnInit {
  constructor() { }
 ngOnInit(): void {
    this.createChart();
  }
  public chart: any;
  createChart(){
  
    this.chart = new Chart("MyChart", {
      type: 'pie', //this denotes tha type of chart
      // type: 'doughnut',
      data: {// values on X-Axis
        labels: [], 
	       datasets: [
          { label: "", data: [''],},
          { label: "", data: [''],}]
      },
      options: { aspectRatio:2.5}
    });}}

  1. Lastly, we need to add the HTML selector of our line chart to the app.component.html file. 

<app-piechart></app-piechart>
Set HTML selector

We have finished creating our file line chart. Now, we can visit the local host page and see our plot. We have given a running version of the chart application below for convenience.

Example of a pie/doughnut chart in Angular
Note: Data taken from the Pakistan Bureau of Statistics.
Conclusion


Chart.js allows users to display data in a way that allows it to be interactive and visually appealing. Moreover, the ease of use and seamless integration with Angular make it a popular choice for developers. Moreover, the extensive documentation at Chart.js creates an easy learning experience and encourages others to jump in. Overall, Chart.js is a robust library for those needing data visualization as it provides as is required, and it does so in an organized, fast, and presentable manner.
Frequently asked questions
Haven’t found what you were looking for? Contact Us
How to create a chart in Angular?
Creating a chart in Angular generally follows the same steps as making a pie chart, with minor modifications depending on the type of chart you want (e.g., bar, line). Here’s a summary of the process:


    

  1. Set up your project: Create a new Angular project if you haven’t already.
    2. 

  2. Install Chart.js and ng2-charts: Run the installation command mentioned above.
    3. 

  3. Generate a component: Use Angular CLI to create a new component for your chart.
    4. 

  4. Configure the chart: Update the component’s TypeScript file to set up your desired chart type (e.g., line, bar).
    5. 

  5. Add HTML for the chart: Include a <canvas> element in the component’s HTML file.
    6. 

  6. Include the component in your app: Render the chart component in your main application template.
    7. 



How to show percentage in pie chart in Angular?
To display percentages on a pie chart in Angular using Chart.js, you can use the chartjs-plugin-datalabels plugin, which allows you to show labels with percentage values. Here’s how to do it:


    

  1. Install the datalabels plugin: Run the following command to install the plugin:
    2. 



npm install chartjs-plugin-datalabels



    

  1. Import and register the plugin: In your chart component, import and register the plugin:
    2. 



import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.register(ChartDataLabels);



    

  1. Update the chart options: Modify your chart options to include the datalabels configuration:
    2. 



options: {
  responsive: true,
  plugins: {
    legend: { position: 'top' },
    datalabels: {
      formatter: (value, context) => {
        let sum = 0;
        let dataArr = context.chart.data.datasets[0].data;
        dataArr.map((data) => {
          sum += data;
        });
        let percentage = ((value / sum) * 100).toFixed(2) + '%';
        return percentage; // Return the percentage value
      }
    },
    title: { display: true, text: 'Pie Chart Example' }
  }
}



This will display the percentage values on the pie chart segments.


How to do a donut chart in Angular?
Creating a donut chart in Angular using Chart.js is similar to creating a pie chart, but you need to specify the doughnut type in your chart configuration. Here’s how:


    

  1. Follow the initial steps: Set up your Angular project and install Chart.js and ng2-charts, as explained above.
    2. 

  2. Generate a donut chart component: Use the Angular CLI to create a new component:
    3. 



ng generate component donut-chart



    

  1. Update the component: In your donut-chart.component.ts, set up the donut chart by specifying doughnut as the chart type:
    2. 



import { Component } from '@angular/core';
import { Chart, registerables } from 'chart.js';

@Component({
  selector: 'app-donut-chart',
  templateUrl: './donut-chart.component.html',
  styleUrls: ['./donut-chart.component.css']
})
export class DonutChartComponent {
  public donutChart: any;

  constructor() {
    Chart.register(...registerables);
    this.createDonutChart();
  }

  private createDonutChart() {
    this.donutChart = new Chart('myDonutChart', {
      type: 'doughnut', // Specify doughnut type
      data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
          data: [300, 50, 100],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: { position: 'top' },
          title: { display: true, text: 'Donut Chart Example' }
        }
      }
    });
  }
}




    

  1. Add HTML for the donut chart: In donut-chart.component.html, include a <canvas> element:
    2. 



<div style="display: block;">
  <canvas id="myDonutChart"></canvas>
</div>



    

  1. Display the donut chart component: Include the <app-donut-chart></app-donut-chart> tag in your main application component to render the donut chart.
    2. 



Free Resources
Copyright ©2025 Educative, Inc. All rights reserved
Learn in-demand tech skills in half the time
PRODUCTS
Mock Interview
New
Courses
Skill Paths
Projects
Assessments
TRENDING TOPICS
Learn to Code
Tech Interview Prep
Generative AI
Data Science
Machine Learning
GitHub Students Scholarship
Early Access Courses
Blind 75
Layoffs
Pricing
For Individuals
Try for Free
Gift a Subscription
CONTRIBUTE
Become an Author
Become an Affiliate
Earn Referral Credits
RESOURCES
Blog
Cheatsheets
Webinars
Answers
ABOUT US
Our Team
Careers
Hiring
Frequently Asked Questions
Contact Us
Press
LEGAL
Privacy Policy
Cookie Policy
Terms of Service
Business Terms of Service
Data Processing Agreement
INTERVIEW PREP COURSES
Grokking the Modern System Design Interview
Grokking the Product Architecture Design Interview
Grokking the Coding Interview Patterns
Machine Learning System Design
Tiktok Streamline Icon: https://streamlinehq.com
Copyright ©2025 Educative, Inc. All rights reserved.
soc2