title: Scale JavaScript renderer graph to print
body: <p>I'm generating several plots with the JavaScript renderer, configured to fit in the available width. Relevant code looks like this:</p>
  
  
  
  <pre><code>&lt;div id="sales-plot"&gt;Loading...&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#sales-plot{
      width: 30%;
      height: 275px;
  }
  </code></pre>
  
  <p>
  
  <pre><code>FusionCharts.setCurrentRenderer("javascript");
  var salesPlot = null;
  $("#sales-plot").each(function(){
      salesPlot = new FusionCharts("/js/FusionCharts/Pie2D.swf",
                                   "fc-" + this.id, "100%", "100%", debugMode);
      salesPlot.setJSONUrl("/data/sales-plot.json";);
      salesPlot.render(this.id);
  });
  </code></pre>
  
  <p>So far so good. Problem comes when the user prints the page: the plot takes twice the available width in a A4 sheet. I've tried tweaking my print CSS code but I've hit a wall—apparently, FusionCharts calculates and hard-codes the pixel dimensions of the graph:</p>
  
  
  
  <pre><code>&lt;svg height="275" version="1.1" width="379" xmlns="http://www.w3.org/2000/svg"
  style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none; cursor: default; position: relative;
  background-color: rgb(255, 255, 255);"&gt;
  </code></pre>
  
  <p>When I use CSS to reduce the width of the <code>&lt;svg&gt;</code> element or any of its ancestors I only get a cropped graph:</p>
  
  <pre class="lang-css prettyprint-override"><code>@media print{
      #sales-plot{
          width: 5cm;
          height: 3cm;
      }
  }
  </code></pre>
  
  <p>The graph keeps its original size thus it overflows the container. FusionChart resizes the graph when I resize the window, but obviously not when I print.</p>
  
  <p>Does this have an easy fix?</p>
  
  <hr>
  
  <p><strong>Edit:</strong> I've Googled on how to make an SVG graphic scale to fit its outer container and I've written a JavaScript hack to make such modifications:</p>
  
  <pre><code>function handleDrawComplete(eventObject, argumentsObject){
      var $svg = $("svg", eventObject.sender.ref);
      var w = argumentsObject.width;
      var h = argumentsObject.height;
  
      $svg
          .attr("viewBox", "0 0 " + w + " " + h)
          .attr("preserveAspectRatio", "xMinYMin meet")
          .attr("width", "100%")
          .attr("height", "100%");
      $svg[0].clientWidth = 5000;
      $svg[0].width = 5000;
      $svg[0].pixelUnitToMillimeterX = 0.8;
  }
  </code></pre>
  
  <p>Funny thing now is that I can copy the generated code with the browser developer tools into a static HTML page and graph prints with the correct dimensions, but dynamically generated graphs complete ignore CSS print rules. I've composed a <a href="http://jsbin.com/izutow/2" rel="nofollow noreferrer">fiddle with the code</a> and this is how it looks on my Windows 7 computer (screenshots are from Firefox 22 and have been resampled to 50%; all my other browsers exhibit the same behaviour):</p>
  
  <h1>Screen</h1>
  
  <p><img src="https://i.stack.imgur.com/X3UQa.png" alt="Screen"></p>
  
  <h1>Print</h1>
  
  <p>(generated A4 PDF)</p>
  
  <p><img src="https://i.stack.imgur.com/zaZ2x.png" alt="Print"></p>