Create a Donut chart in Angular 2

Question

I have very limited skill set in SVG,Canvas and CSS3. I have been trying to create a donut chart in angular 2 with no luck. There are some ready to use libraries available but we are not allowed to pull in 3rd party libraries into the project.Can someone point me in the right direction or help me with it.Basically i played around with SVG but there seems to be no 'arc' element in SVG

Answer 1

This can be easily done using SVG with stroke-dasharray and stroke-dashoffset. In your donut component html include the following code :-

  <svg height="100%" width="100%" viewBox="0 0 120 120">       
     <circle  *ngFor="let item of items;let i=index" cx="60" cy="60" r="50" fill="transparent" stroke-width="20"
     [attr.stroke-dasharray]="getPerimeter(50)" [attr.stroke-dashoffset]="getOffset(50,i)" [attr.stroke]="getColor(i)"/>             
  </svg>

Basically perimiter of the circle is determined by 2πr where r is the radius. Stroke-dash offset will specify at what point should the new segment start.This can be calculated by subtracting the percentage of perimeter occupied by the previous segments from the total perimeter.In your TS file :-

export class DonutComponent{

 items:Array<{name:string,count:number,color:string}>=[
    {name:'Orange',count:50,color:'orange'},
    {name:'Apple',count:25,color:'red'},
    {name:'Pear',count:15,color:'green'}
  ];
 private _total:number =0;
 constructor() {
   if(this.items.length>0)
   {
     this._total = this.items.map(a=>a.count).reduce((x,y)=>x+y);
   }

 }

  getPerimeter(radius:number):number
  {
    return Math.PI*2*radius;
  }

  getColor(index:number):string
  {
    return this.items[index].color;
  }

  getOffset(radius:number,index:number):number
  {   
    var percent=0;
    for(var i=0;i<index;i++)
    {
      percent+=((this.items[i].count)/this._total);
    }
    var perimeter = Math.PI*2*radius;
    return perimeter*percent;
  }
}

The items can be made as input to the component if you want to make the donut generic

Added the source code for a more generic one in github .