We Keep Coding

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,

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.

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

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

How to add a popup with css to an existing website (such as google.com) in JavaScript?

I am new to JavaScript. I have a task to write a js script that will be injected to google.com using Chrome DevTools and run on top of it. The script needs to add certain popups on mouseover action - so if I hover over certain elements of the page (such as the Google logo), a certain popup will be shown. The popups all have css stylings.
So far, I have managed to create alerts on mouseover action using EventListener (on google.com). And I have managed to create custom popups with css on my own website. However, I'm having serious trouble combining both.
The problem is essentially: in my own custom website, I put the css bit under "style" tag, and the js script itself under "script" tag. The script than uses the css properties of the popup to create it. However, in Chrome DevTools I'm only able to inject the actual js script (by copy-pasting it the console), and not the css bit.
How should I get around that? Is there a way to add the css within the js, so running the script will lead to the css being added to the "style" section? Is there a different way to inject the script in the DevTools, and separately inject the css and js? Or is there another way to solve this?
Thanks a lot :)

You can do this by creating and running a snippet, to create a snippet:
Open chrome-devtools
Create new snippet (Ctrl+Shift+P, type show snippets, and hit Enter)
document.head.insertAdjacentHTML("beforeend",`<style>
/*Write your css here, sample below*/
body{
color:red !important;
}
</style>`);
// your main script can go here, note, the below code is just a sample
document.body.addEventListener("mouseover", function(){
console.log("logged..")
})
Run the snippet (Ctrl+Enter)
You can also save and use the snippet later, to run the snippet later:
Ctrl+p type ! and the name of your snippet.

Write extra </div> tag without Blogger auto-correcting it

I found a code for a Top Commentators Blogger widget online, and it's perfect for my needs. The problem is, it seems the code lacks a </div> tag. This way, it messes up the code of everything below it on my Blogger (following widgets gets nested inside it, for eg.).
The widget's code is written in encrypted js (?), so I can't change it. So I decided to add the missing </div> tag manually, on the widget content. But Blogger magical autocorrection of HTML thinks it's just some extra wrong code and erases it. I've tried writing it with js and innerHTML too, but Blogger still erases it.
Any suggestions on how to add this </div> without it getting removed?
The widget can be seen live (and working wrongly, nesting the Archive inside it) at the bottom of my page: www.comoeurealmente.com

Doesn't seem like the </div> tag is missing to me. It seems that your css is indenting the archive with .footer and .widget having a padding of 25px. change that padding to 0px and the page displays correctly.

Inline style element appers in develoer window but not when viewing source code

I am looking at a form that has a captcha. The CSS being applied has made it all whacky looking. I'm about to diagnose the issue, and I'm looking at the styles being applied in my Google chrome developer window. For each individual rule, there is light grey text in the top right of the box that says where the code came from. The one rule I'm interested in indicates it came from <style></style>, which I assume is an inline style rule. Clicking on the source, it takes me to the <style> element that is defined and sure enough the rules are there. These rules don't exist in the source file, so I'm pretty sure the element is appended through javascript. When I hit ctrl + u to view the source code, the <style> element is not there.
How can I see an element that exists in the developer window without it existing in the view source code?

Elements created by JavaScript are not visible in source code, that is because they are created dynamicaly, and when you use "view page source" then you get source code of page returned by server without executing JavaScript.

How can I find the JavaScript that is setting the inline style of an element?

I'm wondering of there is any way to find out where an inline CSS style came from. As you can see in the picture below, I have an element with an inline style that was generated using JavaScript. Sometimes my code seems to break and put the width to 0px, rendering the div invisible.
I've looked through all the JS files, but can't seem to find the error.
Is there a way to find the right file and line, just like dev tools does for css files?

Since you are using Chrome:
Right click on the element in the page and Inspect Element
Right click on the DOM inspector view of the element and Break on… → Attributes Modifications
When the inline style of the element is modified with JS, the debugger will trigger as if it had hit a breakpoint.
This will show you the relevant line of JS and give you a stack so you can figure out where that line was called from.

You can use chrome debugger/ firefox to inspect the element's style and its hierarchy.
Also if you don't want a style assigned by you to be overridden, you can use !important:
#element{
css-property:value !important;
}