How to export Accumulation Chart?

[CZ]

Hi,

We like to export accumulation chart to a PNG file, so we test your demo code 

https://ej2.syncfusion.com/vue/documentation/accumulation-chart/chart-print/

<template>
    <div id="app">
     <ejs-button  id='togglebtn' @click.native='exportIcon'>Export</ejs-button>
         <ejs-accumulationchart ref="chart" id="container">
            <e-accumulation-series-collection>
                <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' radius='70%'> </e-accumulation-series>
            </e-accumulation-series-collection>
        </ejs-accumulationchart>
    </div>

In the preview tab, we will click "Export" button, nothing happen, can you check it? 

Just for your reference, We test  "<ejs-chart" demo in your website, it works, we can export png file.

Thanks,

CZ

[Durga Gopalakrishnan]

Hi CZ, 

Greetings from Syncfusion. 

We suggest you to import the Export module for exporting chart. We have attached the modified sample for your reference. We have logged documentation task for this issue, and the changes will be available in our upcoming Volume 1 Main Release which is expected to be rolled out at end of March 2022. We will let you know once it will be refreshed in online. 

import { AccumulationChartPlugin, PieSeries, Export } from "@syncfusion/ej2-vue-charts"; 

export default Vue.extend({ 

provide: { 

        accumulationchart: [PieSeries, Export] 

  }, 

}); 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/PieExport805815407.zip 

Kindly revert us if you have any concerns. 

Regards, 

Durga G 

[CZ]

Hi Durga,

Thank you for your information.

We have annotations in the chart, the code is sample, as below

<ejs-accumulationchart ref="dtpct" :annotations='annotationsDTPct',

the chart can show correctly in screen, it is as below screen

When we use 

this.$refs.dtpct.export('PNG', 'export');

to export picture, the annotations can't be exported, it is only a circle, below is what we get

we don't know if there are any special setting, please help us, it is better to provide a sample.

Thanks,

CZ

[Swetha Babu]

Hi CZ, 

Greetings from Syncfusion. 

We can use annotation to display the customized html elements. Currently, we don’t have support to export chart along with annotations. We have rendered annotation as div element, so we suggest you to convert this element into foreign object and append it to Chart SVG. However, we have created the simple Vue application to demonstrate the same and it can be downloaded from the below link. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartExport72235041 

Code Snippet: 

methods:{ 

    exportIcon: function(args) {        

      var annotationEle = document.getElementById("container_Annotation_Collections") 

                                             .querySelectorAll('[id*="container_Annotation_"]'); 

      for (var i = 0; i < annotationEle.length; i++) { 

        var annotation = annotationEle[i]; 

        var foreign = document.createElementNS(http://www.w3.org/2000/svg,"foreignObject"); 

        foreign.setAttribute( "width", (annotation.getBoundingClientRect().width + 10).toString()); 

        foreign.setAttribute( "height",(annotation.getBoundingClientRect().height + 10).toString()); 

        foreign.setAttribute("x", annotation.style.left); 

        foreign.setAttribute("y", annotation.style.top); 

        foreign.innerHTML = annotation.innerHTML; 

        annotation.style.display = "none"; 

        var svg = document.querySelector("#container_svg"); 

        svg.appendChild(foreign); 

      } 

      var svgData = new XMLSerializer().serializeToString(svg); 

      var canvas = document.createElement("canvas"); 

      document.body.appendChild(canvas); 

      var svgSize = svg.getBoundingClientRect(); 

      canvas.width = svgSize.width; 

      canvas.height = svgSize.height; 

      var ctx = canvas.getContext("2d"); 

      var img = document.createElement("img"); 

      img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData)); 

      img.onload = function () { 

        ctx.drawImage(img, 0, 0); 

        var imagedata = canvas.toDataURL("image/png"); 

        var anchor = document.createElement("a"); 

        anchor.download = "Chart.png"; 

        anchor.rel='nofollow' href = imagedata; 

        document.body.appendChild(anchor); 

        anchor.click(); 

        canvas.remove(); 

      }; 

    } 

} 

Screenshot: 

 

Please let us know if you need further assistance. 

Regards, 

Swetha