title: The colors of the bar chart in chart.js is not showing. I tried background color and fill color but none of it worked
body: <p>I'm working on a bar chart that will display data monthly but the background colors of the graph are not showing no matter what I do. <a href="https://i.stack.imgur.com/PZ36J.png" rel="nofollow noreferrer">I can only see the value of the chart when I hover the month</a></p>
  
  <p>Here's the code.</p>
  
  <p>index.php</p>
  
  <pre><code>&lt;body&gt;
  
      &lt;div id="chart-container1"&gt;
          &lt;canvas id="mycanvas2"&gt;&lt;/canvas&gt; // I call the bar chart
      &lt;/div&gt;
  
      &lt;!-- javascript --&gt;
      &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/Chart.bundle.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/app2.js"&gt;&lt;/script&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p>data.php</p>
  
  <pre><code>$allMonth = sprintf("SELECT DATENAME(MONTH, a.date) as monthly, MAX(a.kwh) as kwh
                          from tbl_totalMonth a
                          group by DATENAME(MONTH, a.date)");
  
  $allMonthResult = sqlsrv_query($db, $allMonth);
  
  if ($allMonthResult==false) {
      echo "ERROR to retrive info!! &lt;br /&gt;";
      die(print_r(sqlsrv_errors(),TRUE));
  }
  
      $data2 = array();
  
  while ($MONTH_RES = sqlsrv_fetch_array($allMonthResult, SQLSRV_FETCH_ASSOC)) {
      $data2[] = $MONTH_RES;
  }
  
  
  print json_encode($data2);
  </code></pre>
  
  <p>OUTPUT: [{"monthly":"July","kwh":"400000000.2120"}]</p>
  
  <p>app2.js</p>
  
  <pre><code>$(document).ready(function(){
      $.ajax({
          url:" http://localhost/chart/e/data2.php",
          method: "GET",
          success: function(data2){
              console.log(data2);
              var monthly = [];
              var kwh = [];
  
  
  
              for(var i in data2){
                  monthly.push(data2[i].monthly);
                  kwh.push(data2[i].kwh);
              }
  
              var chartdata = {
                  labels: monthly,
                  datasets : [
                      {
                          label: 'Month',
                          // backgroundColor: 'rgba(134,159,152, 1)',
                          // borderColor: 'rgba(134,159,152, 1)',
                          // hoverBackgroundColor: 'rgba(230, 236, 235, 0.75)',
                          // hoverBorderColor: 'rgba(230, 236, 235, 0.75)',
                          fillColor: "rgba(151,187,205,0.5)",
                          strokeColor: "rgba(151,187,205,0.8)",
                          highlightFill: "rgba(151,187,205,0.75)",
                          highlightStroke: "rgba(151,187,205,1)",
                          data: kwh
                      }
                  ]
              };
  
                  var ctx = $("#mycanvas2");
  
                  var barGraph = new Chart(ctx,{
  
                      type: 'bar',
                      data: chartdata
                  });
  
          },
  
          error: function(data2) {
              console.log(data2);
          }
      });
  });
  </code></pre>