Histogram Vertical Stacked

by jwerre

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="histogram" width="400" height="400"></canvas>

JavaScript

const ctx = document.getElementById('histogram').getContext('2d');
ctx.canvas.width = 1800;
ctx.canvas.height = 800;


const date = new Date;
const dataSetLength = 24 * 1
const colors = ['#656bb1'];
/* const colors = ['#656bb1','#3abce5','#77c043','#fede78','#f79d1d','#e74e4e' ]; */


const chart = new Chart(ctx, {
    type: 'line',
	responsive: true,
	maintainAspectRatio: false,
    data: {
      labels: Array.apply(null, Array(dataSetLength)).map(function (item, index) {
      	date.setHours(index,0,0,0);
      	return date.toLocaleDateString('en-US', {}) +" "+ date.toLocaleTimeString('en-US', {});
      }),
      datasets: [
 		{
          label: 'Bounced',
          data: Array.apply(null, Array(dataSetLength)).map( () => Math.random() * (30 - 0) + 0 ),
          backgroundColor: '#e84e4e',
          borderColor: 'rgba(0, 0, 0, 0)',
          order: 0,
          tension: 0,
    	},
        {
          label: 'Completed',
          backgroundColor: '#656bb1',
          data: Array.apply(null, Array(dataSetLength)).map( () => Math.random() * (600 - 100) + 100 ),
          borderColor: 'rgba(0, 0, 0, 0)',
	      order: 1,
          tension: 0,
        },
      ]
    },
    options: {

		title: {
        	display: false,
    	},
        legend: {
            display: false,
            position: 'top',
            align: 'end',
        },
        elements: {
            point:{
                radius: 0
            }
        },
        scales: {
            yAxes: [{
            	stacked: true,
                gridLines: {
                  display: true,
                  color: '#e5e7eb',
                  zeroLineColor: '#e5e7eb',
                  drawBorder: false,
                  lineWidth: 1,
                  zeroLineWidth: 1                 
                },
                ticks: {
                    beginAtZero: true,
                    display: true
                }
            }],
            xAxes: [{
            	stacked: true,
             ...