Export charts as png/svg/pdf

[maxklenk]

Discussed here: c3js/c3#313
Working solution: https://github.com/times/axisJS

[maxklenk]

http://techslides.com/save-svg-as-an-image

[maxklenk]

https://github.com/masayuki0812/c3/blob/14e92c54f9286bf28ff442b3212c84c3e06a8681/extensions/exporter/phantom-exporter.js

[dilignt]

I've tried to get this working with html2canvas. It works up to a point, ,but unfortunately the labels and axes aren't rendered correctly - see example below

[dilignt]

Further to my previous comment, the reason that it doesn't work properly is that html2canvas can't render the css styles unless they're defined inline. So by setting the styles inline on the elements, the chart can be rendered correctly using html2canvas.

FYI - I got my download png working with the following code to be triggered on ng-click of a button. The chart needs to be inside a div with id 'exportchart', and the download name would probably be set dynamically instead of sample.png

$scope.saveImage = function() {
    d3.selectAll("svg text").style({ 'font-size':'12px'});
    d3.selectAll(".c3-axis path").style({ 'fill':'none', 'stroke': '#000' });

    html2canvas(document.getElementById('exportchart'), {
        onrendered: function(canvas) {
            var canvasdata = canvas.toDataURL("image/png");
            var a = document.createElement("a");
            a.download = "sample.png";
            a.href = canvasdata;
            a.click();
        }
    });
}

Hope this is useful

[maxklenk]

@dilignt Thank you, I would like to link your solution in the documentation. Can you create a sample implementation on Plunker? You can use this version to build ontop (http://plnkr.co/edit/EWC4Hr)

[dilignt]

Here it is - http://plnkr.co/edit/wdiksu

On 4 February 2015 at 07:30, Max Klenk notifications@github.com wrote:

@dilignt https://github.com/dilignt Thank you, I would like to link
your solution in the documentation. Can you create a sample implementation
on Plunker? You can use this version to build ontop (
http://plnkr.co/edit/EWC4Hr)

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

[maxklenk]

Amazing! Thank you very much.

[btm1]

I've implemented something similar but i get something to the effect of the attached: It's not picking up the fills for the bars which is pretty strange. Any ideas?

[maxklenk]

The axes are normally set using the c3.css file, for export these styles have to be inlined. But I have no idea why the bars aren't filled.

[btm1]

I actually did this using canvg.js i had tried html2canvas in the past and it didn't work... this script works with charts just made with plane old D3 but for some reason the ones made with c3 have the not filled in bars issue.

[c5236786]

could you please rewrite plunker code ? i tried but the c3 chart i download is blank.

[dilignt]

The angular-chart dependency is no longer available which is why it's not working. I don't where there is a different CDN of angular-chart but if you download the plunker and replace angular-chart.js with a local dependency it should work