Basic Pie Chart Using JavaScript And Canvas – DiagJS

Category: Chart & Graph , Javascript | November 6, 2017
Views Total:1,666 views
Official Page:Go to website
Last Update:November 6, 2017


Basic Pie Chart Using JavaScript And Canvas – DiagJS


DiagJS is a simple-to-use JavaScript library that lets you dynamically draw an animated, interactive pie chart on an HTML5 canvas element.

How to use it:

Create an empty canvas element on which you want to draw the pie chart.

<canvas width="800" height="800" id="example">
  Sorry, canvas not supported

Download and insert the diagjs.js script into the web page.

<script src="diagjs.js">

Define the data (percentage values and color codes) in the JavaScript.

var elements = {
    dogs: 0.3,
    cats: 0.6,
    dinosaurs: 0.1
var colors = {
    dogs: 'green',
    cats: 'blue',
    dinosaurs: 'red'

Draw the pie chart on the canvas element and done.

var canvas = document.getElementById('can');
var diag = diagJS.PieChart(elements, colors, canvas);

You Might Be Interested In:

Leave a Reply