How to set default colour for bar chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

How to set default colour for bar chart

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js Responsive Bar Chart Demo</title> 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
      <style>

.container {/*from w  ww. j a  va2 s . c om*/
   width: 80%;
   margin: 20px auto;
}
.p {
   text-align: center;
   font-size: 14px;
   padding-top: 140px;
}


      </style> 
   </head> 
   <body translate="no"> 
      <div class="container"> 
         <h2>Chart.js Responsive Bar Chart Demo</h2> 
         <div> 
            <canvas id="canvas"></canvas> 
         </div> 
      </div> 
      <p class="p">
         Demo by Monty Shokeen. 
         <a href="http://www.sitepoint.com/fancy-responsive-charts-with-chart-js" target="_blank">See article</a>
         .
      </p> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
      <script>
      var dData = function() {
  return Math.round(Math.random() * 90) + 10
};
var barChartData = {
  labels: ["dD 1", "dD 2", "dD 3", "dD 4", "dD 5", "dD 6", "dD 7", "dD 8", "dD 9", "dD 10"],
  datasets: [{
    fillColor: "rgba(0,60,100,1)",
    strokeColor: "black",
    data: [dData(), dData(), dData(), dData(), dData(), dData(), dData(), dData(), dData(), dData()]
  }]
}
var index = 11;
var ctx = document.getElementById("canvas").getContext("2d");
var barChartDemo = new Chart(ctx).Bar(barChartData, {
  responsive: true,
  barValueSpacing: 2
});
setInterval(function() {
  barChartDemo.removeData();
  barChartDemo.addData([dData()], "dD " + index);
  index++;
}, 3000);
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials