CanvasJS – HTML5 JavaScript charts – nice and responsive

This solution is a great HTML5 JavaScript charts library, with a simple API.

High performance and responsive HTML5 JavaScript charts

Nice, fast and responsive. CanvasJS library have a simple API and can render across various devices (iPhone, iPad, Android and Windows Phone devices, Desktop, etc).

This HTML5 JavaScript charts library allows us to create nice charts and rich dashboards really easy.

CanvasJS - HTML5 JavaScript charts library
CanvasJS – HTML5 JavaScript charts library

JavaScript Charts with a Simple API

CanvasJS charts and graphs have a very simple API. The library brings 24 different types of charts including line, column, bar, area, spline, pie, doughnut, stacked charts, and more.

It supports various interactive features like tooltips, zooming, panning, animation, events, drilldown!

The library can easily be integrated with various back-end technologies (PHP, Ruby, Python, .Net, node.js, Java, etc).


Include the library:

<script src="canvasjs.min.js"></script>

Define a container for chart:

<div id="myChart" style="height: 300px; width: 100%;"></div>

Create a chart with JS:

window.onload = function () {
  var chart = new CanvasJS.Chart("myChart", {
    title: {
      text: "My Chart with CanvasJS"
    data: [
        // adjust type "line", "splineArea", etc 
        type: "column",

        dataPoints: [
          { label: "apple",  y: 10  },
          { label: "orange", y: 15  },
          { label: "banana", y: 25  },
          { label: "mango",  y: 30  },
          { label: "grape",  y: 28  }



That’s it.


CanvasJS is free for non-commercial and paid for commercial use.



Project website:

You may also like:

Chart.js – open source HTML5 Charts

Animated charts in jQuery – Flot Animator

Responsive charts jQuery plugin – Pizza JS

Highcharts: Interactive JavaScript charts for your website