Chartjs-The colors of the bar chart in chart.js is not showing. I tried background color and fill color but none of it worked

by

2👍

✅

You need to set beginAtZero property to true for y-axis ticks, in your chart options, like so :

options: {
   scales: {
      yAxes: [{
         ticks: {
            beginAtZero: true
         }
      }]
   }
}

also, make sure you are using the latest version of ChartJS (v2.6.0),

and use the following properties for your dataset(s) :

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)',

instead of :

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)",

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

$(document).ready(function() {
   $.ajax({
      url: "https://istack.000webhostapp.com/json/t11.json",
      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)',
               data: kwh
            }]
         };

         var ctx = $("#mycanvas2");

         var barGraph = new Chart(ctx, {
            type: 'bar',
            data: chartdata,
            options: {
               scales: {
                  yAxes: [{
                     ticks: {
                        beginAtZero: true
                     }
                  }]
               }
            }
         });
      },

      error: function(data2) {
         console.log(data2);
      }
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="mycanvas2"></canvas>

0👍

Is it possible to use different units? With your massive high precision numbers chart.js can’t show them in a meaningful way. View this snippet full page.

$(document).ready(function() {
  data2 = JSON.parse(JSON.stringify([{
    "monthly": "June",
    "kwh": "478"
  },{
    "monthly": "July",
    "kwh": "500"
  },{
    "monthly": "August",
    "kwh": "487"
  },{
    "monthly": "September",
    "kwh": "467"
  }]));
  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: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      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
  });


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

<body>

  <div id="chart-container1">
    <canvas id="mycanvas2"></canvas>
  </div>



</body>

Leave a comment