Displaying a chartjs chart within a bulma full height hero

Question

I am trying to display a chartjs chart within a bulma fullscreen hero section. The desired effect is that the section will take up the available browser space. I would also need for the chart to remain responsive.

It would also be good to be able to add a some text above the chart, a title and subtitle.

The code below works but chartjs become non-responsive.

<!-- Section: First Chart -->
<section class="hero is-fullheight">
  <div class="hero-body">
    <div class="container">
      <div>
        <canvas id="chart"></canvas>
      </div>
    </div>
  </div>
</section>

If I try and add a title we overflow the full height:

<!-- Section: First Chart -->
<section class="hero is-fullheight">
  <div class="hero-body">
    <div class="container">
      <h1 class="title has-text-grey-dark">
        My title
      </h1>
      <canvas id="chart"></canvas>
    </div>
  </div>
</section>

Answer 1

For anyone looking to do the same thing

    <!-- Section: First Chart -->
    <section class="hero is-fullheight">
      <div>
      <div class="hero-body">
        <div class="container">
        <h1>Title</h1>
        <canvas id="chart"></canvas>
      </div>
      </div>
    </div>
    </section>