JavaScript Library That Draws Vector Graphics For Websites

Raphael circular-chart is a cross-browser JavaScript library that draws vector graphics for websites. SVG will be used by most browsers. Raphael JS is a lightweight and flexible JavaScript framework that allows you to draw vector graphics in your browser as well.

Raphael is used by creating an instance of Raphael’s body first, which manages the creation of the canvas.

A Library for Circular Progress Bars With SVG components

How to make use of it:

1. Include the necessary Raphael.js library on the web page.

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.2.1/raphael.min.js"></script>

2. Download and embed the basic JavaScript file circuit graph.js at the bottom of the webpage.

<script src="js/circle-chart.js"></script>

3. Wrap the percentage value you want to display in the DIV element as follows:

<div class="circle-chart circle-chart--with-track">
  60%
</div>

4. View a pie chart on a web page:

var el = document.querySelector('.circle-chart--with-track');
var demo = new CircleChart(el, { /* options here */ });

5. Options and defaults.

stroke:         20,
maxVal:         100,
colour:         '#394c7c',
animationSpeed: 4000,
edgeWidth:      0,
edgeGap:        undefined,
edgeColour:     undefined,
trackColour:    '#bec3ce'

Drawing Animated Circle Chart, circular-chart Plugin/Github