Add Header and Footer on export Image

[Faran Anwar]

Following the documentation link, I am able to export the diagram component as JPG/PNG. I would like to add some header and footer text dynamically during export. How can I do this?

https://ej2.syncfusion.com/angular/documentation/chart/chart-print/

Thanks

Faran

[Durga Gopalakrishnan]

Hi Faran,

Greetings from Syncfusion.

As of now, we don’t have support to export annotations in chart. We request you to convert annotation elements into foreign object and append it to chart SVG. We have attached the sample for your reference. Please check with below snippet and sample.

let svg: any;

    document.getElementById('togglebtn').onclick = () => {

        let annotationEle = document

        .getElementById("container_Annotation_Collections")

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

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

        let annotation = annotationEle[i];

        let 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";

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

        svg.appendChild(foreign);

      } 

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

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

      document.body.appendChild(canvas);

      let svgSize = svg.getBoundingClientRect();

      canvas.width = svgSize.width;

      canvas.height = svgSize.height;

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

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

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

      img.onload = function () {

        ctx.drawImage(img, 0, 0);

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

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

       anchor.download = "Chart.png";

        anchor.rel='nofollow' href = imagedata;

        document.body.appendChild(anchor);

        anchor.click();

        canvas.remove();

      };

    };

Export : https://stackblitz.com/edit/ajtpup

We suggest you to use annotations to display the custom images, text or shapes in chart area. We have printed chart with header and footer. Please check with below snippet and sample.

annotations: [{

            content: '<div id="annotation1"><label>Header</label></div>',

            x: '60%', y: '10%', coordinateUnits: 'Pixel'

        }, {

            content: '<div id="annotation2"><label>Footer</label></div>',

            x: '60%', y: '100%', coordinateUnits: 'Pixel'

        }],

document.getElementById('togglebtn').onclick = () => {

        chart.print();

    };

Print : https://stackblitz.com/edit/izkuqd

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[will]

Go to Insert > Header or Footer >Blank (or a simple template). Double-click [Type text] in the header or footer area. Select Picture and then choose a picture on your computer. Select Close Header and Footer or press Esc to exit

Regards,

Will

[Swetha Babu]

Hi Will,

Thanks for your suggestion.