Set background Color and border Color for bar chart Chart.js - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Set background Color and border Color for bar chart Chart.js

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js Configure Colors Dynamically - Example 2</title> 
   </head> 
   <body translate="no"> 
      <div style="width: 50%"> 
         <canvas id="mycanvas"></canvas> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script> 
      <script>
      randomScalingFactor = function() {
   return Math.round(Math.random() * 100);
}
function getData(data) {//from w w  w .  ja v  a 2 s.  c  o m
  data = [
    {"Serverid":"1", "score":"37"},
    {"Serverid":"2", "score":"60"},
    {"Serverid":"3", "score":"35"},
    {"Serverid":"4", "score":"41"},
    {"Serverid":"5", "score":"50"},
    {"Serverid":"6", "score":"70"},
  ];
  var evenBackgroundColor = 'rgba(255, 99, 132, 0.2)';
  var evenBorderColor = 'rgba(255,99,132,1)';
  var oddBackgroundColor = 'rgba(75, 192, 192, 0.2)';
  var oddBorderColor = 'rgba(153, 102, 255, 1)';
  var Server = [];
  var score = [];
  var backgroundColors = [];
  var borderColors = [];
  for (var i in data) {
    Server.push("Server " + data[i].Serverid);
    score.push(data[i].score);
    if (i % 2 === 0) {
      backgroundColors.push(evenBackgroundColor);
      borderColors.push(evenBorderColor);
    } else {
      backgroundColors.push(oddBackgroundColor);
      borderColors.push(oddBorderColor);
    }
  }
  return {
    labels: Server,
    datasets : [{
      label: 'Score I',
      backgroundColor: backgroundColors,
      borderColor: borderColors,
      borderWidth: 1,
      hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
      hoverBorderColor: 'rgba(200, 200, 200, 1)',
      data: score
    }]
  };
};
$(document).ready(function() {
  $.ajax({
    //url: "test.html",
    //method: "GET",
    success: function(data) {
      var ctx = $("#mycanvas");
      var barGraph = new Chart(ctx, {
        type: 'bar',
        data: getData(data),
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          }
        }
      });
    }, // end success
    error: function(data) {
      console.log(data);
      console.log(data);
    }
  }); 
});
    
      </script>  
   </body>
</html>

Related Tutorials