Chart.js v2 stacked bar chart

by firegroove

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="bar-chart" width="600" height="350"></canvas>

JavaScript

var dates = ["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 DATA = [];
var R = 0;
var G = 255;
var B = 2;

for ( var i = 1; i < 26; i ++){
  R += 8;
  G -= 4;
  B += 1;
  DATA.push ({ 
    data : [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    backgroundColor : "rgba("+R+", "+G+", "+B+", 0.2)",
    label: 'Bad Style',
    hoverBackgroundColor: "#7E57C2",
    hoverBorderWidth: 0,
    borderWidth: 1.5,
   });
}

R = 153;
G = 153;
B = 0;
for ( var i = 1; i < 30; i ++){
  var color = i*3+100;
  R += 8;
  G -= 5;
  B += 0;
  DATA.push ({ 
    data : [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    backgroundColor : "rgba("+R+", "+G+", "+B+", 0.2)",
    label: 'Bad Style',
    hoverBackgroundColor: "#7E57C2",
    hoverBorderWidth: 0,
    borderWidth: 1.5,
   });
}

var bar_ctx = document.getElementById('bar-chart');
bar_ctx.style.backgroundColor = 'rgba(0,0,0,255)';

var bar_chart = new Chart(bar_ctx, {
    type: 'bar',
    data: {
        labels: dates,
        datasets: DATA
    },
    options: {
     		animation: {
        	duration: 10,
        },
        scales: {
          xAxes: [{ 
          	stacked: true, 
            gridLines: { display: false },
            }],
          yAxes: [{ 
          	stacked: true, 
            gridLines: { display: false },
            }],
        },
        legend: {display: false}
    },
   }
);