Chart.js

[http://www.chartjs.org/]

  •   |  free

Easy, object oriented client side graphs for designers and developers. Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8. Chart.js is dependency free, lightweight (5k when minified and gzipped) and offers loads of customisation options.

Easy, object oriented client side graphs for designers and developers. Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8. Chart.js is dependency free, lightweight (5k when minified and gzipped) and offers loads of customisation options.

Visualise your data in different ways. Each of them animated, fully customisable and look great, even on retina displays.

Chart.js has a ton of customisation features for line graphs, along with support for multiple datasets to be plotted on one chart.

Chart.js supports bar charts with a load of custom styles and the ability to show multiple bars for each x value.

Chart.js supports multiple data sets plotted on the same radar chart. It also supports all of the customisation and animation options you'd expect.

Chart.js shows animated pie charts with customisable colours, strokes, animation easing and effects.

Chart.js delivers animated polar area charts with custom coloured segments, along with customisable scales and animation.





Screenshots

Download Package

Charts Types

Line, Bar, Radar, Pie, Polar, Doughnut charts

Language

Javascript

Rating (more)

Functionality 
Charts types 
Visibility 
Price 
Documentation 
Usability 
Perspectivity 

Total [6.6/10] 

Disadvantages

Only 6 graph types

News

Installation & Code samples

Download charts archive Chart.js-master.zip from project site, unzip it to web-server directory. Create file bar.html in project direcory (chartjs). Code listing described below, this is bargraph with two datasets per year. Random data, let it be quantity of white cats, was born in Iceland in last year.

Nothing to describe, code is simple.

<code> <html> <head> <title>Bar Chart</title> <script src="Chart.js"></script> <meta name = "viewport" content = "initial-scale = 1, user-scalable = no"> <style> canvas{ } </style> </head> <body> <canvas id="canvas" height="300" width="600"></canvas> <script> var barChartData = { labels : ["January","February","March","April","May","June","July","August","September","October","November","December"], datasets : [ { fillColor : "rgba(170,120,120,0.5)", strokeColor : "rgba(120,170,120,1)", data : [165,159,190,181,156,155,140,210,121,114,128,152] }, { fillColor : "rgba(100,120,200,0.5)", strokeColor : "rgba(140,160,240,1)", data : [128,148,140,119,196,127,200,100,122,163,202,173] } ] } var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData); </script> </body> </html> </code>

 

Result

Bar Chart