Hello,

Here I am sharing some information related to circular graphs using Javascript.

JavaScript provides a library that generates circular graphs in SVG. We need to include circles.js or circles.min.js file in the HTML file. It can be downloaded from this link: https://github.com/lugolabs/circles

Then, we create a div for placing the graphs in the HTML like below:

<div class="circle" id="circlesFirst"></div>

Now, we can create a graph by calling this id like below:

var createCircle = Circles.create({
  id:                  'circlesFirst',
  radius:              50,
  value:               43,
  maxValue:        200,
  width:               30,
  text:                function(value){return value + '%';},
  colors:              ['#ddd', '#aeaeae'],
  duration:            600,
  styleWrapper:        true,
  styleText:           true
});

where

id - the ID that is given to div to hold the graph
radius - radius of the circles
value - starting value of the circle (By default 0 )
maxValue - maximum value of the circle (By default 100)
width - the width of the outer circle or ring
colors - It contains an array of colors
duration - value in miliseconds of animation duration
text - the text that will be displayed at the center of the circle. It can also be a function that contains the value of the text like below:

function(textValue) {
  return '$'+textValue;
}
function() {
  return this.PercentValue() + '%';
}