Bar chart animations - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Bar chart animations

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
      <script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/2.0.0-beta/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//  w w  w . j a v  a 2  s  .c  o m
var ctx = $("#chart1").get(0).getContext("2d");
      var config = {
         type: 'bar',
            data: {
                labels: ["1","2","3","4"],
                datasets: [
               {
                  label: "label1",
                  backgroundColor: "rgba(60,141,188,0.8)",
                  borderWidth: 0,
                  hoverBackgroundColor: "rgba(60,141,188,1)",
                  hoverBorderColor: "rgba(60,141,188,1)",
                  data: [65, 59, 80, 81, 56, 55, 40]
               }
               ,
               {
                  label: "label2",
                  backgroundColor: "rgba(61,152,112,0.8)",
                  borderWidth: 0,
                  hoverBackgroundColor: "rgba(61,152,112,1)",
                  hoverBorderColor: "rgba(61,152,112,1)",
                  data: [66, 57, 87, 88, 50, 51, 42]
               }
            ]
         },
         options: {
        responsiveAnimationDuration: 5000,
            barStrokeWidth : 1,
            responsive: true,
            maintainAspectRatio: false,
            barShowStroke: false,
            tooltips: {
               titleFontSize: 12,
            },
                scales: {
               xAxes: [{
                  display: true,
                  gridLines: {
                            offsetGridLines: true
                        },
                  scaleLabel: {
                     show: false,
                     labelString: ''
                  }
               }],
                    yAxes: [{
                        display: true,
                  gridLines: {
                            offsetGridLines: true
                        },
                  scaleLabel: {
                     show: false,
                     labelString: ''
                  },
                        ticks: {
                            beginAtZero: true,
                            suggestedMin: 0,
                            suggestedMax: 2
                        }
                    }]
                }
            }
        };
      var myChart = new Chart(ctx, config);
    }

      </script> 
   </head> 
   <body> 
      <canvas id="chart1" height="230" width="680"></canvas>  
   </body>
</html>

Related Tutorials