Using Different Colors In a bar Chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Using Different Colors In a bar Chart

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://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){// www. ja  v a 2  s.  co m
var chartData = {
  labels: ["12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","22:00"],
  datasets: [
    {
      data : [85,35,65,59,90,81,56,55,40,100],
         fillColor: 'rgba(220,220,220,0.2)',
      strokeColor: 'rgba(220,220,220,1)'
    }
  ]
}
var chartCanvas = document.getElementById("chartCanvas").getContext("2d");
var barChart = new Chart(chartCanvas).Bar(chartData, {responsive: true});
var bars = barChart.datasets[0].bars;
for(var i = 0; i < bars.length; i++) {
   if(bars[i].value > 80) {
     bars[i].fillColor = "rgba(255, 0, 0, 0.2)";
    bars[i].strokeColor = "rgba(220, 0, 0, 0.5)";
  }
}
barChart.update();
    }

      </script> 
   </head> 
   <body> 
      <canvas id="chartCanvas" height="200" width="800"></canvas>  
   </body>
</html>

Related Tutorials