Accepted answer

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

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


get the highcharts svg

  • use the chart.getsvg() method

highcharts api

jsfiddle example

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


you can directly get base64 from 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("", {
  "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);})


first, see the highcharts documentation on exporting files. this will give you the string to the image url you want.


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:


enjoy and good luck!

Related Query

More Query from same tag