2

I am using html-pdf to convert HTML to PDF. To add Graphs, I am using Chart.js.

When generate the PDF, Graph break into two pages as shown in below image.

This is how I add the Graph.

<canvas id="bar-chart" class="canvas-styles margin-top-20" 
 style="display: block; page-break-before: auto; page-break-after: auto; page-break-inside: avoid;">
</canvas>

enter image description here

How could I solve this?

Bishan
  • 15,211
  • 52
  • 164
  • 258
  • If you surround the `canvas` with a relatively positioned `div`, and set that container to `inline-block`, does that help? Or maybe just move all the `style info in your `canvas` element to a parent `div` container. – Andy Hoffman Mar 06 '19 at 04:51
  • @AndyHoffman Tried this and no Luck. `
    `     – Bishan Mar 06 '19 at 05:11
  • Is there any way you can post a live example somewhere? I'd love to examine it more closely. – Andy Hoffman Mar 06 '19 at 05:12

1 Answers1

3

Add into your css an @print section for your div:

@media print {
     div#canvasWrap { width: 2.4cm; }
  }

And add a wrapping div around your canvas:

<div id="canvasWrap">
    <canvas id="bar-chart" class="canvas-styles"></canvas>
</div>

Add any styles you need to the wrapper ...

neophytte
  • 648
  • 2
  • 11
  • 25
  • Thanks for the answer. `@media print {div#canvasWrap { width: 9.26cm; } }` with this modification, worked as a charm. – Bishan Mar 06 '19 at 07:13