Chartjs-Bar Color In Chart JS

by

2👍

✅

There is no built-in functionality for this at the moment. You would rather need to create a chart plugin to accomplish that …

plugins: [{
   beforeDraw: function(chart) {
      var labels = chart.data.labels;
      labels.forEach(function(e, i) {
         var bar = chart.data.datasets[0]._meta[0].data[i]._model;
         var dataPoint = e.split(/\s/)[1];
         if (dataPoint === '13') bar.backgroundColor = 'red';
         else if (dataPoint === '14') bar.backgroundColor = 'green';
      });
   }
}]

add this followed by your chart options

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

var jsondata = ['Bein', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24];
var values = [];
for (var i = 1; i < jsondata.length; i++) {
   values.push(jsondata[i]);
}
var labelsarr = ["Jan 13", "Jan 14", "Feb 13", "Feb 14", "Mar 13", "Mar 14", "Apr 13", "Apr 14", "May 13", "May 14", "Jun 13", "Jun 14", "Jul 13", "Jul 14", "Aug 13", "Aug 14", "Sep 13", "Sep 14", "Oct 13", "Oct 14", "Nov 13", "Nov 14", "Dec 13", "Dec 14"];

var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: labelsarr,
      datasets: [{
         label: 'Test',
         data: values,
         backgroundColor: 'rgba(0, 119, 204, 0.8)',
      }]
   },
   options: {
      tooltips: {
         callbacks: {
            label: function(t, d) {
               var xLabel = d.datasets[t.datasetIndex].label;
               var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
               return xLabel + ': ' + yLabel;
            }
         }
      },
      legend: {
         position: 'top',
      },
      title: {
         display: true,
         text: 'Year 2013 Total Revenue By Month'
      },
      scales: {
         yAxes: [{
            ticks: {
               callback: function(value, index, values) {
                  if (parseInt(value) >= 1000) {
                     return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                  } else {
                     return '$' + value;
                  }
               }
            }
         }]
      }
   },
   plugins: [{
      beforeDraw: function(chart) {
         var labels = chart.data.labels;
         labels.forEach(function(e, i) {
            var bar = chart.data.datasets[0]._meta[0].data[i]._model;
            var dataPoint = e.split(/\s/)[1];
            if (dataPoint === '13') bar.backgroundColor = 'red';
            else if (dataPoint === '14') bar.backgroundColor = 'green';
         });
      }
   }]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>

Leave a comment