Create bar chart and set background color - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Create bar chart and set background color

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-3.1.1.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from  w ww  .  j  a va  2  s  .  c  o m*/
var ctx = document.getElementById("bargraph1");
  console.log("id is " + ctx.id);
  var bargraph = new Chart(ctx,  {
    type: 'bar',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets : [{
        label: "test",
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: "#333"
      }],
      options: {}
    }
  });
    }

      </script> 
   </head> 
   <body> 
      <div id="scorecard_results1" class="scorecard_results"> 
         <div id="holder1"></div> 
         <canvas id="bargraph1"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials