Expected behavior Bar chart to show bars when web page is accessed

Actual behavior The bart chart is shown withour bars. They only appear when doing a resizing (restore down) in IE or opening the developers tools in Chrome. When maximizing the window (IE) or closing the developers tools in Chrome the bars remain displayed.

Resources (screenshots, code snippets etc.)

Material Design Bootstrap

  <!-- Navbar brand -->
  <a class="navbar-brand" href="#">WaterSpy</a>

  <!-- Collapse button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Collapsible content -->
  <div class="collapse navbar-collapse" id="basicExampleNav">

      <!-- Links -->
      <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
              <a class="nav-link" href="#">Day
                  <span class="sr-only">(current)</span>
              </a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Month</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Year</a>
          </li>

          <!-- Dropdown -->
          <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
              <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Meter</a>
                  <a class="dropdown-item" href="#">Webserver</a>
                  <a class="dropdown-item" href="#">Thingspeak</a>
                  <a class="dropdown-item" href="#">MQTT</a>
                  <a class="dropdown-item" href="#">History</a>
                  <a class="dropdown-item" href="#">About Watermeter</a>
              </div>
          </li>

      </ul>
      <!-- Links -->

  </div>
  <!-- Collapsible content -->
</nav>

<!--Grid column-->

© 2018 Copyright: EHemeleers Engineering

<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/js/mdb.min.js"></script>

<script>
var data= {};
var GraphData = [];
/* $(document).ready(function(){ */ 
    $.getJSON('/dayjson',function(data){
       for (i=0; i < Object.keys(data.measures).length ; i++) {
         GraphData.push(data.measures[i].HourUse);
       };
    });
/* }); */
console.log(GraphData);
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ["00-01","01-02","02-03","03-04","04-05","05-06","06-07","07-08","08-09","09-10","10-11","11-12","12-13","13-14","14-15","15-16","16-17","17-18","18-19","19-20","20-21","21-22","22-23","23-00"],
          datasets: [{
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)',
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)'
              ],
              borderColor: [
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(255,99,132,1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)'
              ],
              borderWidth: 1,
              data: GraphData
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  },
                  scaleLabel: {
                    display: true,
                    labelString: 'Use (liter)'
                  }
              }],
              xAxes: [{
                  scaleLabel: {
                    display: true,
                    labelString: 'Hour interval'
                  }
              }]
          }
      }
  });
</script>