Export Chart as Image/Get chart data as Base64 format

[sathya]

Hi Team,
1)Is it possible to automatically save the chart as image in specified folder after chart has been rendered?.In this case,chart should be download without user Interaction. Can I use “ExportEnabled=true” option?.

1)Is is possible to get the chart data in base64 format?

Thanks,
Sathya S

[Vishwas R]

Sathya,

You can auto-download chart as image with the help of toDataURL. toDataURL lets you get the base64 image data, which you can save as a file after chart is rendered. Below is the code-snippet for the same.

$.when(chart.render()).then(function(){						
  var canvas = $("#chartContainer .canvasjs-chart-canvas").get(0);
  var dataURL = canvas.toDataURL('image/png');              
  //console.log(dataURL);
  //Save Image creating an element and clicking it
  var save = document.createElement('a');
  save.href = dataURL;
  save.download = 'CanvasJS.png';//Save as CanvasJS.png-File Name
  var event = document.createEvent("MouseEvents");
  event.initMouseEvent(
    "click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null
  );
  save.dispatchEvent(event);
});

Please take a look at this JSFiddle for an example on the same.

Alternately, you can achieve same by setting exportEnabled to true and auto-clicking the link of format of image you like to save. Please find the code-snippet for this logic below.
$('.canvasjs-chart-toolbar div>:nth-child(2)').click();
Please take a look at this JSFiddle for complete code on this approach.

—
Vishwas R
Team CanvasJS

[sathya]

Vishwas,
How to change the download location and image name?

Thanks,
Sathya

[Vishwas R]

Sathya,

You can change save.download = 'CanvasJS.png'; in first example to your desired name. Here CanvasJS.png is the image-file name. And in the second example, you can use exportFileName to set image-file name.

Download location setting is a part of browser setting, it varies from browser-to-browser. You can change it under browser settings. Check these links to change/manage download location in chrome and Firefox.

—
Vishwas R
Team CanvasJS

[sathya]

Vishwas,
In my project I have to save the chart image in specified folder.Eg:”C:\\MyProject\UserDocuments\Chart1.png. Is there is any option to achieve this?

[sunrise]

Hello, Vishwas!
Is this possible to get base64 image from stockchart?
My stockchart has multiple charts.

• This reply was modified 4 years, 1 month ago by sunrise.

[Vishwas R]

@sunrise,

Exporting entire StockChart as base64 is not available as an inbuilt feature as of now. However you can do so by using html2canvas. Below is the code-snippet for the same.

html2canvas(document.querySelector("#chartContainer")).then(canvas => {  
	var dataURL = canvas.toDataURL();
	console.log(dataURL)
});

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS