title: Exporting c3.js line charts to png images does not work
body: <p>I am using SVG.toDataURL() to export c3js charts to png images. Exporting the charts to png works properly.</p>
  
  <p>In case of the line charts, they are not rendered properly. e.g. </p>
  
  <ol>
  <li>The x and y axis width is increased.  </li>
  <li>Lines are not proper, instead of the lines it shows dark black regions.</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/8swFx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8swFx.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/QlNAA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/QlNAA.png" alt="enter image description here"></a></p>
  
  <p><a href="http://jsfiddle.net/2je1t9qf/6/" rel="noreferrer">jsfiddle</a></p>
  
  <p>Below is the code to export png</p>
  
  <pre><code> function exportImageAsPNG(){
          var svgElements = $("#chart").find('svg');
          var svg ;
          svgElements.each(function() {
              svg = this;
          });
          var img = document.getElementById("fromcanvas");
          svg.toDataURL("image/png", {
              callback: function(data) {
                  img.setAttribute("src", data)
              }
          })
      }
  </code></pre>
  
  <p>Same thing happens when I use the canvag library.</p>
  
  <pre><code>var $container = $('#chart'),
  content = $container.html().trim(),
  canvas = document.getElementById('svg-canvas');
  
  // Draw svg on canvas
  canvg(canvas, content);
  
  // Change img be SVG representation
  var theImage = canvas.toDataURL('image/png');
  
  $("#hiddenPng").attr('href', theImage);
  $("#hiddenPng span").trigger("click");
  </code></pre>