<!-- Uses Bootstrap 4 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
<div class="card mb-3">
  <div class="card-header">Test Status Chart</div>
  <div class="card-body" style="background: #212529">
    <canvas id="myBarChart1" width="170%" height="40%"></canvas>
  </div>
</div>
<script>
    var ctx1 = document.getElementById("myBarChart1")

var getMax = function(chart) {
    datasets = chart.data.datasets;
    max = 0;
    for(var i=0; i<datasets.length; i++) {
        dataset=datasets[i]
        if(myBarChart.data.datasets[i].hidden) {
            continue;
        }
        dataset.data.forEach(function(d) {
            if(typeof(d)=="number" && d>max) {
                max = d
            }
        })
    }
    return max;
}

var myBarChart = new Chart(ctx1, {
  type: 'bar',
  data: {
    labels: ['2/17','2/18','2/19','2/20','2/21','2/22'],
    datasets: [
    {
      label: "Bar 1",
      backgroundColor: "rgba(255,0,0,0.6)",
      borderColor: "rgba(255,0,0,1)",
      data: [2500,1000,1500,3500,2000,500]
    },
    {
      label: "Bar 2",
      backgroundColor: "rgba(2,117,216,0.6)",
      borderColor: "rgba(2,117,216,1)",
      data: [50,0,100,1250,500,0]
    },
    {
      label: "Bar 3",
      backgroundColor: "rgba(255,255,51,0.6)",
      borderColor: "rgba(255,255,51,0.6)",
      data: [0,0,150,250,550,200]
    },
    {
      label: "Bar 4",
      backgroundColor: "rgba(0,255,102,0.6)",
      borderColor: "rgba(0,255,102,1)",
      data: [2450,1000,1250,2000,100,0]
    },
    ],
  },
  options: {
    responsive: true,
    scales: {
      xAxes: [{
        time: {
          unit: 'day'
        },
        gridLines: {
          display: false,
          color: "white"
        },
        ticks: {
          maxTicksLimit: 6,
          fontColor: "white"
        }
      }],
      yAxes: [{
        ticks: {
          maxTicksLimit: 15,
          fontColor: "white",
          padding: 10,
          suggestedMax: 4000
        },
        gridLines: {
          display: true,
          color: "white"
        }
      }],
    },
    legend: {
      display: true,
      labels: {
        fontColor: "white",
      },
      onClick: function(e, legendItem) {
        di=legendItem.datasetIndex
        myBarChart.data.datasets[di].hidden = !myBarChart.data.datasets[di].hidden;
        myBarChart.options.scales.yAxes[0].ticks.suggestedMax=getMax(myBarChart)+100;
        myBarChart.update()
      }
    }
  }
})
</script>