I have an ASP.NET Core MVC view developed, with w3.css, which displays what I want, the way I want it, but only on screen.
This includes several charts rendered by CanvasJS. However, I haven't figured out how to control the chart width while printing - this all looks great on the screen. I wrote some Javascript to find the containing element's height and set the chart's height to that value, and it all looks great on the screen.
I also write some Javascript to find an appropriate value for width, and it still looks great on the screen - but when printing, the height is fine but the width is way too big.
Here's a JFiddle with my html, css and javascript: text. If you try to print the JFiddle you can see the issue - the charts are too wide; they look fine in the on-screen view, but are messed up in the print preview, as well as on the printed page or file. The code to get the width and height (for the first chart, but they are all the same except for the id selector,) and are then used in the new() call, are:
var theContainer = $("#ProductivityChartContainer");
var theContainerParent = theContainer.parent();
var theContainerGrandparent = theContainerParent.parent();
var theWidth = theContainerParent.width();
var theHeight = theContainerGrandparent.height();
This is a screenshot; the charts are correctly sized here . This view can be severely compressed in x and the charts are resized accordingly, just as in the JFiddle referenced above.
I can't control the width on the printed page, although my fix for height worked. I can reproduce this in any of several drivers, so this isn't driver-specific. Using the Javascript debugger, it seems that my javascript code isn't being executed when invoking print or print preview. Somehow that seems relevant, but I'm not putting it all together.
What am I doing wrong?