Pie Chart in Angular 13 with d3

    Creating Pie chart with in angular 13 with d3 libraries.

    Lets  get  started : 

    If you don't installed angular CLI please installed it  

    npm install -g @angular/cli 

    Create an angular application with name 'PieChartDemo'

    ng new PieChartDemo 

     Now navigate to Project where Project is resides like

     cd PieChartDemo 

    Now installed the d3 libraries with    

    npm install d3 &&  npm install @types/d3 --save-dev 

    Let generate commpnent with name 'PieChart'

    ng g c PieChart 

Below is pie-chart.component.ts

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

import * as d3 from 'd3';

@Component({

    templateUrl : './pie-chart.component.html',

    styleUrls:['./pie-chart.component.css']

})

export class PieChartComponent implements OnInit

{     

    private data = [

      {"Students": "First Div", "NoOfStudents": "50"},

      {"Students": "Second Div","NoOfStudents": "30"},

      {"Students": "Thirs Div","NoOfStudents": "15"},

      {"Students": "Fail", "NoOfStudents": "5"}    

    ];

    private svg :any;

    private margin = 50;

    private width = 750;

    private height = 600;

    private radius = Math.min(this.width, this.height) / 2 - this.margin;

    private colors : any;  

    constructor(){}      

     

  ngOnInit(){

        this.createSvg();

        this.createColors();

        this.drawChart();

  }

  private createSvg(): void {

    this.svg = d3.select("figure#pieChart")

      .append("svg")

      .attr("width", this.width)

      .attr("height", this.height)

      .append("g")

      .attr(

        "transform",

        "translate(" + this.width / 2 + "," + this.height / 2 + ")"

      );

  }

  private createColors(): void {

    this.colors = d3.scaleOrdinal()

      .domain(this.data.map(d => d.NoOfStudents.toString()))

      .range(["#28a745", "#6f42c1", "#e83e8c", "#dc3545"]);

  }

  private drawChart(): void {

    // Compute the position of each group on the pie:

    const pie = d3.pie<any>().value((d: any) => Number(d.NoOfStudents));

    // Build the pie chart

    this.svg

      .selectAll('pieces')

      .data(pie(this.data))

      .enter()

      .append('path')

      .attr('d', d3.arc()

        .innerRadius(0)

        .outerRadius(this.radius)

      )

      .attr('fill', (d: any, i: any) => (this.colors(i)))

      .attr("stroke", "#121926")

      .style("stroke-width", "1px");

    // Add labels

    const labelLocation = d3.arc()

      .innerRadius(100)

      .outerRadius(this.radius);

    this.svg

      .selectAll('pieces')

      .data(pie(this.data))

      .enter()

      .append('text')

      .text((d: any) => d.data.Students +

     ' ' + d.data.NoOfStudents.toString() + '%')

      .attr("transform", (d: any) => "translate(" +

                    labelLocation.centroid(d) + ")")

      .style("text-anchor", "middle")

      .style("font-size", 15);

  }

}

and pie-chart.component.html

<h3>Pie Chart</h3>

<figure id="pieChart"></figure>

Now run application and naviagte to pieChart component 

ng s -o