Home Forums Feature Requests & Feedback Export Chart as Image/Get chart data as Base64 format

Export Chart as Image/Get chart data as Base64 format

Viewing 7 posts - 1 through 7 (of 7 total)
  • #11455

    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

    #11465

    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.

    CanvasJS Export as Image


    Vishwas R
    Team CanvasJS

    #11466

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

    Thanks,
    Sathya

    #11468

    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

    #11469

    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?

    #30975

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

    • This reply was modified 1 year ago by sunrise.
    #30981

    @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.
    exporting stockchart as base64 image


    Vishwas R
    Team CanvasJS

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.