Print HTML with ChartJS

Question

I'm using ChartJS to generate a chart.

And I'm using the command below StackOverflow

<script>
function printDiv(divName) {
   var printContents = document.getElementById(divName).innerHTML;
   var originalContents = document.body.innerHTML;
   document.body.innerHTML = printContents;
   window.print();
   document.body.innerHTML = originalContents;
}
</script>

To print the HTML content.

Problem: when I ask to print with these commands it does not print the graphic (which is loaded via JS). When I use only window.print(); it prints all HTML, but with a vertical scroll bar.

I tried to get this bar via CSS with

  <style>
    @media only print {
      #printableArea {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
      }
    }
  </style>

But without success!

That is, how do I print the HTML + text?

PS: Text is inserted into a div via include.

My HTML structure is

  <style>
    @media only print {
      #printableArea {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
      }
    }
  </style>

  <div class="row">
    <button onclick="printDiv('printableArea')">Download</button>
    <div class="col-sm-10 col-sm-offset-2 col-md-10 col-md-offset-1 main" id="printableArea">
      <div>
        <!-- button -->
        <h1>Title</h1>
        <h2>Subtitle</h2>
        <hr>
      </div>
        <div class="col-md-10 col-md-offset-1">
          <!-- graphic -->
          <canvas id="MyChart" width="350" height="150"></canvas>
          <hr>
          <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis debitis, numquam pariatur sint alias non sed repellat necessitatibus saepe sunt, magni error architecto quod mollitia corrupti animi fugit. Officia, fugit.</p>
          </div>
        </div>
      </div><!-- end row -->
    </div><!-- end col -->
  </div><!-- end row -->