title: How to dynamically set backgroundColor and borderColor barchart unsing Chart.js
body: <p>I am trying to set the backgroundColor and borderColor based on the dynamic data I get, I am also trying to alternate the color if the "score" number is even or odd I can't find a way to get it done. Any suggestions is very appreciated.</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
          &lt;head&gt;
              &lt;title&gt;ChartJS - BarGraph&lt;/title&gt;
              &lt;style type="text/css"&gt;
                  #chart-container {
                      width: 800px;
                      height: 600px;
                  }
              &lt;/style&gt;
              &lt;!-- javascript --&gt;
      &lt;script type="text/javascript" src="jquery-1.11.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="Chart.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
      $(document).ready(function(){
      $.ajax({
          //url: "test.html",
          //method: "GET",
  
      success: function(data) {
                  // test data
          var 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"
              }
              // ... it can be more than that
              ];
          var Server = [];
          var score = [];
  
          for(var i in data) {
          Server.push("Server " + data[i].Serverid);
          score.push(data[i].score);
          }
      var chartdata = {
  
          labels: Server,
          datasets : [
  
          {
          label: 'Score I',
  
          backgroundColor: [
  
              // even color
          'rgba(255, 99, 132, 0.2)',
          // odd color
              'rgba(75, 192, 192, 0.2)'
  
          ],
  
          borderColor: [
              // even color
          'rgba(255,99,132,1)',
          // odd color
          'rgba(153, 102, 255, 1)'
          ],
  
          borderWidth: 1,
          hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
          hoverBorderColor: 'rgba(200, 200, 200, 1)',
          data: score
          }
                      ]
      };
  
      var ctx = $("#mycanvas");
  
      var barGraph = new Chart(ctx, {
                      type: 'bar',
                      data: chartdata,
                      options: {
                          scales: {
                              yAxes: [{
                                      ticks: {
                                          beginAtZero: true
                                          }
                                  }]
                              }
                          }
                      });
      }, // end success
      error: function(data) {
                  console.log(data);
                  alert(data);
                  }
      }); // end ajax
  
      });
  
      &lt;/script&gt;
          &lt;/head&gt;
          &lt;body&gt;
  
      &lt;br&gt; Test Bar 3 &lt;br&gt;
              &lt;div id="chart-container"&gt;
                  &lt;canvas id="mycanvas"&gt;&lt;/canvas&gt;
              &lt;/div&gt;
  
  
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Thank you!</p>