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).

Usage

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  }
        ]
      }
    ]
  });

  chart.render();

}

That’s it.

License

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

Demos:

http://canvasjs.com/javascript-charts

Docs:

http://canvasjs.com/docs/charts/basics-of-creating-html5-chart

Project website:

http://canvasjs.com

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

Enjoy!

Share:Share on Facebook6Share on Google+1Tweet about this on TwitterShare on LinkedIn2Pin on Pinterest2
 
  • Andrey Khachaturov

    Another great option is AnyChart JavaScript HTML5 charting library http://www.anychart.com with graphs, maps, Gantt charts, stock charts