Render Highcharts canvas as a PNG on the page

Question

I'm using the HighCharts library to generate some dynamic charts. However, I'd like to render the HighCharts canvas element as a PNG image, such that the user can copy and paste the chart into an email, etc. without having to use the exporting function.

Specifically, I'm trying to create an HTML email template that includes the chart, and want the user to be able to select all > copy/paste into their email client instead of copy/pasting, exporting the image, then finding a way to insert it in the email.

I've found this: Capture HTML Canvas as gif/jpg/png/pdf?, but the code doesn't seem to render an image to the document.

Answer 1

I know this is now an old question, but since it came up #1 for me in a Google search result, I think it's worth mentioning that Highcharts now natively supports a server-side image generation script and it works great.

Answer 2

With the information from "Render charts on the server" (from jkraybills answer), I've created this minimal example using a Ajax to get an image of a chart that has not been rendered, and displaying it in an img-tag.

HTML:

<img id="chart" style="width: 600px;" />

Javascript:

// Regular chart options
var options = {
    title: {
        text: 'My chart'
    }
    ...
}

//URL to Highcharts export server
var exportUrl = 'http://export.highcharts.com/';

//POST parameter for Highcharts export server
var object = {
    options: JSON.stringify(options),
    type: 'image/png',
    async: true
};

//Ajax request
$.ajax({
    type: 'post',
    url: exportUrl,
    data: object,
    success: function (data) {
        // Update "src" attribute with received image URL
        $('#chart').attr('src', exportUrl + data);
    }
});

As in this JSFiddle demonstration.

The rest of the POST parameter (width, callback...) are in the documentation.

Answer 3

Here's a server side solution based on PhantomJS. You can use JSONP to make a cross domain call to image.vida.io.

http://image.vida.io/

Your chart/visualization need to be accessible from outside. You can pass credential to the URL.

http://image.vida.io/api/https%3A%2F%2Fvida.io%2Fdocuments%2FWgBMc4zDWF7YpqXGR/viewport_width=980&viewport_height=900&delay=5000&selector=%23canvas

Then you can display image with img tag:

<img src="data:image/png;base64, [base64 data]"/>

It works across browser.

Answer 4

Here's a hack if you have your heart set on using HighCharts. It uses canvg to parse the SVG into a canvas and then converts the canvas to a PNG.

chart = new Highcharts.Chart({
    
    chart: {
        renderTo: 'container'
    },
    
    title: {
        text: ''
    },
    
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }],
    
    navigation: {
        buttonOptions: {
            align: 'center'
        }
    }
});

canvg(document.getElementById('canvas'), chart.getSVG())
    
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");

document.write('<img src="'+img+'"/>');