CODEWITHSUNDEEP
javascriptcanvaschart.js
user3059325
user3059325

Reputation: 85

Chart.js - printing a webpage containing Chart.js canvas prints out hundreds of blank pages

I have a Chart.js javascript chart ( https://www.chartjs.org/ ) placed on my web page.

This javascript based chart sits inside a Canvas element which has ID: chart-0

<canvas id="chart-0" height="380px"></canvas>

This canvas element is put inside a absolute div element with ID "Chart0" which has been put inside a parent/relative div element with ID "PrintArea".

When users click the "Print" button, javascript code which I wrote prints out the the div element "PrintArea" and its contents.

I was using the javascript function:

window.print();

to print the "PrintArea" div element containing the canvas element "chart-0" because this way, it could print out the Chart.js javascript chart as well as all other html contents inside the "PrintArea" div.

This web page was working fine, it was printing out the part of the web page ("PrintArea" div) without any problem for the last 4 years.

But recently, when users click the print button, the web browser is printing out the "PrintArea" div contents AS WELL AS printing out 715 blank web pages after it. This happens with both Chrome and Edge browsers.

I can see, the problem IS caused by the Chart.js canvas element because if I remove this Chart.js canvas element - "chart-0" from the web page, then the web browser only prints out the contents of the "PrintArea" without any errors.

So,... how do I fix this error? It looks like any webpages that I've created which contain Chart.js are now causing this sort of problem - printing out hundreds of blank pages, whether I use the web browser's default printing menu or javascript printing function.

Please help.

UPDATE: Jonathan's answer shown below solved the problem! Thank you,

Upvotes: 6

Views: 1848

Answers (4)

Tim_Mac
Tim_Mac

Reputation: 166

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

Upvotes: 1

Jonathan
Jonathan

Reputation: 914

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.

Upvotes: 6

sticky_elbows
sticky_elbows

Reputation: 1514

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;
  }
}

Upvotes: 2

Stortag
Stortag

Reputation: 21

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

Upvotes: 0

Related Questions