[Chartjs]-Chart.js – printing a webpage containing Chart.js canvas prints out hundreds of blank pages

by

6👍

So far, none of the answers worked for me; however, using a combination of them yielded:

@media print {
  .chartjs-size-monitor{
    position:fixed !important;
  }
}

which worked for me. A user just reported this issue to me, and updating my code from v2 to v4 would have required a giant rewrite.

1👍

I had the exact same issue with Angular 9 and chartJs 2. What worked for me is putting this in the css:

@media print {
html, body {
    display: inline-block;
  }
}

1👍

Inspecting the CSS added to the page by chart.js, there is a div with 1000000px height and width which is not properly hidden.

Jonathan’s answer above to override the chartjs-size-monitor position is the best solution if you can’t upgrade to the latest version.

bad CSS

0👍

I also face this same issue using React-chartjs-2. If I remove the chart and only try to print a table of data it works like intended. But with any of my charts present i get about 680 blank pages. The problem is only present in Chrome and possibly Edge and other chrome-based browsers. It works fine in both Firefox and Safari.

I found this other question about the same topic. here that has a solution that might work in some cases, by making the chart’s position fixed.

<div style={{position: "fixed"}}>
  <TotalConsumptionGraph/>
</div>

This will not work for me since my report has multiple graphs and tables of data, so fixing the position will mess everything up. But if you only need to print one single chart it could be a temporary workaround.

  • React-chartjs-2: 5.1.0
  • Chart.js: 4.1.1

Leave a comment