How Can I make CanvasJS Charts the Correct Width When Printing?

• November 8, 2023 at 9:26 am #44025
  
  WillFlor

  I have a view that, to the screen, presents what I want, including several CanvasJS charts. the way I want it. However, when printing this, the charts are much too wide. At first, I tried using the tip – don’t set the height or width at all, just make the container fit where it needs to and let the chart fill its container without anything else. (from https://canvasjs.com/docs/charts/chart-options/height/). Although that mostly worked well for the screen view, an improvement was made by calculating the correct height and setting the height explicitly when the chart was newed.
  After doing this, the view looked lovely in the main browser window. Unfortunately, the charts are too wide when viewed in the preview window before printing, and also on the printed output (Note: this was true before I added the explicit setting of the height as mentioned above). Upon attempting to fix this with a similar method as I did with height, I discovered that the charts were still too wide. I can’t break into the javascript debugger when I select the “Print” command, so can’t really look at anything there – whwn rendering to the main browser window, everything looks fine – no “undefineds” or anything that looks amiss. I can set the width value to an arbitrarily small number and get the output to look better on the printout, but then it’s too small in the main browser window.
  I’ve tried this in Chrome and Firefox, and with multiple printer drivers, and this doesn’t change.
  My html and JavaScript are here: https://jsfiddle.net/rk36jf1m/
  This effect is visible in the JSFiddle if you try to print it. You’ll have to enlarge the results pane a bit to see the whole chart area, then print.
  What am I doing wrong here?

  November 8, 2023 at 6:49 pm #44036
  
  Rohith Nagaral

  @willflor,

  You can change the width / height or both as per your requirements only while printing using media queries. Please take a look at the code-snippet below.

  @media print {        
    .canvasjs-chart-canvas {
      width: 300px !important;
    }
  }

  __
  Rohith Nagaral
  Team CanvasJS