Highcharts - export to base64

Question

Is there a way to take a highcharts graph, and get a base64 representation of the it?

In other words, the equivalent of first exporting it to PNG or JPG (I don't care which) and then getting a base64 string of that image.

Answer 1

here is how i solve it :

• use google canvg It takes a URL to a SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element.

• render your chart svg to the canvas using

   canvg(document.getElementById('canvas'),getSVG());
  

• convert what you have in the canvas to image

    var canvas = document.getElementById("canvas") ; 
    var img = canvas.toDataURL("image/png"); //img is data:image/png;base64
     img = img.replace('data:image/png;base64,', '');
  

• render your image to a hidden field

    $("hidden field").val(img) ;
  

• to convert this string to byte array do

   Dim imageFile() As Byte = Convert.FromBase64String(YOUR HIDDEN FIELD .Value)
  

UPDATE

get the highcharts SVG

• use the chart.getSVG() method

Highcharts API

jsFiddle Example

• or simply use $(your svg).html()

Answer 2

First, see the highcharts documentation on exporting files. This will give you the string to the image URL you want.

Exporting: http://www.highcharts.com/ref/#exporting

Use an HTTP request (with AJAX, for instance) to get the file binary content (jpg/png) and transfer it to a base64 encoding library like this one:

Base64: http://www.webtoolkit.info/javascript-base64.html

Enjoy and good luck!

Answer 3

You can directly get base64 from http://export.highcharts.com by passing required parameter in request.

let chartData = {
        infile: CHART_DATA,
        b64: true // Bool, set to true to get base64 back instead of binary.
        width: 600,
        constr : "Chart"
    }

You can use below snippet to get base64

fetch("https://export.highcharts.com/", {
  "headers": {
    "content-type": "application/json",
  },
  "body": "{\"infile\":\"{\\n    \\\"xAxis\\\": {\\n        \\\"categories\\\": [\\n            \\\"Jan\\\",\\n            \\\"Feb\\\",\\n            \\\"Mar\\\",\\n            \\\"Apr\\\",\\n            \\\"May\\\",\\n            \\\"Jun\\\",\\n            \\\"Jul\\\",\\n            \\\"Aug\\\",\\n            \\\"Sep\\\",\\n            \\\"Oct\\\",\\n            \\\"Nov\\\",\\n            \\\"Dec\\\"\\n        ]\\n    },\\n    \\\"series\\\": [\\n        {\\n            \\\"data\\\": [1,3,2,4],\\n            \\\"type\\\": \\\"line\\\"\\n        },\\n        {\\n            \\\"data\\\": [5,3,4,2],\\n            \\\"type\\\":\\\"line\\\"\\n        }\\n    ]\\n}\\n\",\"width\":600,\"constr\":\"Chart\",\"b64\":true}",
  "method": "POST",
  "mode": "cors"
}).then(function(response) {
    // The response is a Response instance.
    return response.text();
  }).then(function(data) {
    console.log(data);  //  base64 data
  }).catch(function(err) { console.log(err);})