Histogram Vertical Line

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: 'bar',
	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() * (60 - 10) + 10 ),
          borderColor: '#57c73b',
          backgroundColor: 'rgba(0, 0, 0, 0.0)',
          type: 'line',
          order: 0,
          lineTension: 0,
          fill: true,
          pointBackgroundColor: '#57c73b',
          //pointBorderWidth: .5,
    	},
        {
          label: 'Completed',
          backgroundColor: Array.apply(null, Array(dataSetLength)).map( () => colors[0] ),
          data: Array.apply(null, Array(dataSetLength)).map( () => Math.random() * (600 - 100) + 100 ),
	      order: 1,
        },
      ]
    },
    options: {
        legend: {
            display: true,
            position: 'top',
            align: 'end',
        },
        scales: {
            yAxes: [{
                gridLines: {
                  display: true,
                  color: '#e5e7eb',
                  zeroLineColor: '#e5e7eb',
                  drawBorder: false,
                  lineWidth: 1,
                  zeroLineWidth: 1                 
                },
                ticks: {
                    beginAtZero: true,
                    display: true
                }
            }],
            xAxes: [{
                gridLines: {
                  display: false,
                },
      ...