Lightweight JavaScript Library For Html5 Canvas Charts

Category: Chart & Graph , Javascript | February 9, 2015
Views Total:3,295 views
Official Page:Go to website
Last Update:February 9, 2015


Lightweight JavaScript Library For Html5 Canvas Charts


A lightweight and standalone JavaScript library that draws circular charts (ring charts) on Html5 canvas elements.

How to use it:

Load the CircleChart.js in the document’s head section.

<script src="js/CircleChart.js"></script>

Create an Html5 canvas element on where you want to draw a circular chart.

<canvas id="demo">Some text here...</canvas>

Initialize the circular and set the initial percentage.

var chart1 = new CircleChart();
chart1.init("demo", 50);

Set the parameters for the circular chart.

var context = null;
var canvasWidth = 320;
var canvasHeight = 320;
var chartPercent = 34;
var lightColor = '#c2d56a';
var darkColor = '#8abc4b';
var inc = true;
var mouseX = null;
var mouseY = null;

You Might Be Interested In:

Leave a Reply