6

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,

user3059325
  • 85
  • 1
  • 6
  • I am having the exact same problem. Could not find a solution yet. Tried to upgrade the chart.js version but then I have hundreds of peer dependency errors :( – sticky_elbows Dec 19 '22 at 15:52

4 Answers4

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.

Jonathan
  • 894
  • 2
  • 9
  • 20
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;
  }
}
sticky_elbows
  • 1,344
  • 1
  • 16
  • 30
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

Tim_Mac
  • 145
  • 1
  • 7
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
Stortag
  • 1
  • I have managed to resolve the problem. I was using miltiple graphs on the same page. One of them were imported from a separate library that used a older version of chart.js and react.chartjs-2. When this library got updated to the latest version of these two, the problem stopped. – Stortag Jan 09 '23 at 07:27