Drawing bar chart with Chart.js - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Bar Chart

Description

Drawing bar chart with Chart.js

Demo Code

ResultView the demo in separate window 


<html>
   <head> 
      <meta name="viewport" content="width=device-width"> 
   </head> 
   <body> 
      <canvas id="income" width="400" height="400"></canvas> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
      <script>
var barData = {//  w  ww  .  ja va  2 s  . c  om
labels : ["January","February","March","April","May","June"],
datasets : [
    {
        fillColor : "#48A497",
        strokeColor : "#48A4D1",
        data : [456,479,324,569,702,600]
    },
    {
        fillColor : "rgba(73,188,170,0.4)",
        strokeColor : "rgba(72,174,209,0.4)",
        data : [364,504,605,400,345,320]
    }
]
};
var income = document.getElementById("income").getContext("2d");
new Chart(income).Bar(barData);

      </script>  
   </body>
</html>

Related Tutorials