Create bar chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Create bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js">
  
      </script> 
   </head> 
   <body>
       ` /*  w  ww  . j a v a  2 s  .  c  om*/
      <canvas id="canvas" width="400" height="400"></canvas> 
      <script>
    var data = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [{
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,1)",
        data: [65, 59, 90, 81, 56, 55, 40]
      }, {
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 96, 27, 100]
      }]
    }
    var ctx = $("#canvas")[0].getContext("2d");
    var TestChart = new Chart(ctx).Bar(data);
    new Chart(ctx).Bar(data);
  
      </script>  
   </body>
</html>

Related Tutorials