Css3 Simple Donut Chart

CSS3 simple donut chart

SVG for the win!

.item {

    position: relative;

    float: left;

}

.item h2 {

    text-align:center;

    position: absolute;

    line-height: 125px;

    width: 100%;

}

svg {

   -webkit-transform: rotate(-90deg);

    transform: rotate(-90deg);

}

.circle_animation {

  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */

  stroke-dashoffset: 440;

}

.html .circle_animation {

    -webkit-animation: html 1s ease-out forwards;

    animation: html 1s ease-out forwards;

}

.css .circle_animation {

    -webkit-animation: css 1s ease-out forwards;

    animation: css 1s ease-out forwards;

}

@-webkit-keyframes html {

  to {

    stroke-dashoffset: 80; /* 50% would be 220 (half the initial value specified above) */

  }

}

@keyframes html {

  to {

    stroke-dashoffset: 80;

  }

}

@-webkit-keyframes css {

  to {

    stroke-dashoffset: 160;

  }

}

@keyframes css {

  to {

    stroke-dashoffset: 160;

  }

}

<div class="item html">

    <h2>HTML</h2>

    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">

     <g>

      <title>Layer 1</title>

      <circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>

     </g>

    </svg>

</div>

<div class="item css">

    <h2>CSS</h2>

    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">

     <g>

      <title>Layer 1</title>

      <circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>

     </g>

    </svg>

</div>

Html, CSS - How to create a donut chart like this?

The above Donut chart can be done using Html 5 canvas.

Sample: https://jsfiddle.net/wm6szms3/

Html code:

<canvas id="canvas" width=325 height=325></canvas>

JavaScript code:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var colors=['skyblue','gray','orange'];
var values=[47,6,47];
var labels=['Voluntary','Robot','Mandatory'];

dmbChart(150,150,125,25,values,colors,labels,0);

function dmbChart(cx,cy,radius,arcwidth,values,colors,labels,selectedValue){
    var tot=0;
    var accum=0;
    var PI=Math.PI;
    var PI2=PI*2;
    var offset=-PI/2;
    ctx.lineWidth=arcwidth;
    for(var i=0;i<values.length;i++){tot+=values[i];}
    for(var i=0;i<values.length;i++){
        ctx.beginPath();
        ctx.arc(cx,cy,radius,
            offset+PI2*(accum/tot),
            offset+PI2*((accum+values[i])/tot)
        );
        ctx.strokeStyle=colors[i];
        ctx.stroke();
        accum+=values[i];
    }
    var innerRadius=radius-arcwidth-3;
    ctx.beginPath();
    ctx.arc(cx,cy,innerRadius,0,PI2);
    ctx.fillStyle=colors[selectedValue];
    ctx.fill();
    ctx.textAlign='center';
    ctx.textBaseline='bottom';
    ctx.fillStyle='white';
    ctx.font=(innerRadius)+'px verdana';
    ctx.fillText(values[selectedValue],cx,cy+innerRadius*.9);
    ctx.font=(innerRadius/4)+'px verdana';
    ctx.fillText(labels[selectedValue],cx,cy-innerRadius*.25);
}

Pure CSS3 or SVG animated Doughnut Chart

Try this, it uses stroke-dasharray to create strokes with a length of 251.2 see here for more reference . The stroke-dashoffset attribute specifies the distance into the dash pattern to start the dash see here

<svg width="100%" height="100%" viewbox="0 0 100 100">

    <circle cx="50" cy="50" r="40" fill="tomato"/>

    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="grey"/>

    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#00CCFF" stroke-dasharray="251.2" stroke-dashoffset="50.3"/>

    <text x="40" y="50" fill="black" font-size="10">Text</text>

</svg>

CSS Circle Donut Chart Transparent Background

Use mask with a radial-gradient to create a hole

:root {

  --size: 80px;

  --bord: 10px;

}

.chart {

  width: var(--size);

  height: var(--size);

  margin: 1em auto;

  border-radius: 50%;

  background: conic-gradient(lightseagreen var(--value), lightgrey var(--value));

  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--bord)),#fff calc(100% - var(--bord) + 1px));

          mask:radial-gradient(farthest-side,transparent calc(100% - var(--bord)),#fff calc(100% - var(--bord) + 1px));

}

.x-60 {

  --value: 60%;

}

.x-20 {

  --value: 20%;

}

body {

  background:linear-gradient(to right,yellow,blue);

}

<div class="chart x-60">

</div>

Create a Donut chart in Angular 2

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 .

---

Related Topics