JavaScript Charting Library: awesomeChartJS


If you are looking for a library for creating charts using HTML5 <canvas> tag, then you will never find the library better than awesomeChartJS. It is an opensource JavaScript library.

Read More: Add charts to web applications with JpGraph: PHP Charts Library

Most important thing about this library is that is does not require any additional framework or javascript plugin to work. It also supports all the popular chart format which includes:

  • vertical and horizontal bar charts
  • pareto bar charts
  • pie charts (whole or part)
  • exploded pie charts
  • ring/doughnut charts

This library wants everything simple to it had not added too much customization options. Still there are some options available.

How to use this script? First of all include this script into the header of the page.

<script type="application/javascript" src="awesomechart.js"></script>

Then create a canvas element in HTML document.

<canvas id="canvas1" width="300" height="300">

Your web-browser does not support the HTML 5 canvas element.


Now create a chart by following code:

<script type="application/javascript">
function drawMyChart(){
if(!!document.createElement('canvas').getContext){ //check that the canvas
// element is supported
var mychart = new AwesomeChart('canvas1');
mychart.title = "Product Sales - 2010"; = [1532, 3251, 3460, 1180, 6543];
mychart.labels = ["Desktops", "Laptops", "Netbooks", "Tablets", "Smartphones"];

window.onload = drawMyChart;

This will create a chart shown below:

See more code examples from the link:

Requirements: No Requirements
Compatibility: All Modern Browsers
License: Apache License v2.0 .

Tags: |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.

Similar Articles


Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Developed By Deepanker