score:0

Note: If the chart looks correct on canvas, I assume the following would work with C3 or any other chart:

I found that since I have to support IE 11 I instead went with canvas to blob to PNG using "canvas-toBlob.js" and "FileSaver.js"

$("#save-btn").click(function() 
{
    $("#myChart").get(0).toBlob(function(blob) 
    {
        saveAs(blob, "chart_1.png");
    });
});

https://jsfiddle.net/mfvmoy64/155

score:2

The problem is that those libraries are rendering your graphs as SVG, inline in the page. What you need is a way to get the rendered SVG (plus styles), and then if necessary to convert it to a PNG / PDF.

If you only want to do it every once in a while, this is something you can do by hand. There is [a bit of semi-official documentation from D3's creator on the subject. You can also have a look at the answers to these other questions.


If you want to do it programmaticaly, as a "Download this chart" feature on your site, there are multiple ways to go:

  • You can use jsdom to render your graph server-side, save the SVG and then use a tool like ImageMagick to convert it to PNG.
  • PhantomJS can render your page and take a screenshot of the chart. Here is very similar StackOverflow question with a good answer using PhantomJS.

Related Query

More Query from same tag