Easy to use

Just create a new AwesomeChart object and pass the canvas element's id as a parameter to the constructor. Then set the chart's data and call the object's draw() method. That's it! Your chart is ready!

pie chart

Fully customizable

Control how your chart looks by defining:

  • Font styles
  • Fill and stroke styles for bars and pies
  • Margin sizes
bar chart
Home
Example

Description

AwesomeChartJS is a simple Javascript library that can be used to create charts based on the HTML 5 canvas element.

The main goal during development was to pick sane defaults in order to let the user create simple charts quickly with just a couple of lines of code.

One can create at almost no time bar, pie, doughnut and Pareto charts.

NOTE: If you are interested in a far more advanced, interactive JavaScript plotting library, take a look at Flot.

Download

You can get awesomechart.js from the project's github repository.

License

Copyright 2011 Georgios Migdos - Available under the terms of the Apache License v2.0 .

Example

Let's say we want to create a bar chart for the following data:

Product Sales - 2010

  • Desktops: 1532
  • Laptops: 3251
  • Netbooks: 3460
  • Tablets: 1180
  • Smartphones: 6543

First, we have to define a canvas element in our html document: 

   <canvas id="canvas1" width="300" height="300">
        Your web-browser does not support the HTML 5 canvas element.
    </canvas>

Then all we have to do is include awesomechart.js in our document's header, create a new AwesomeChart object and pass our data to it: 

   <script type="application/javascript" src="awesomechart.js"></script>
                        
    <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";
            mychart.data = [1532, 3251, 3460, 1180, 6543];
            mychart.labels = ["Desktops", "Laptops", "Netbooks", "Tablets", "Smartphones"];
            mychart.draw();
        }
      }
      
      window.onload = drawMyChart;
    </script>

The code above will produce the following result:

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

But, what if we want to change the chart type to a doughnut chart? It's really easy, we just have to set the chart's type to 'doughnut' before calling draw(): 

            mychart.chartType = 'doughnut';
            mychart.draw();

This is the result:

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

Or we could create a Pareto chart (chartType='pareto'):

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

The 'chartType' property controls which type of chart will be rendered:

Chart type chartType property value
Horizontal bar chart default
Vertical bar chart horizontal bars
Pareto chart pareto
Pie chart pie
Exploded chart exploded pie
Doughnut chart doughnut