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()