We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Add Header and Footer on export Image

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?




3 Replies

DG Durga Gopalakrishnan Syncfusion Team December 12, 2022 12:40 PM UTC

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



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

        let annotation = annotationEle[i];

        let foreign = document.createElementNS(






          (annotation.getBoundingClientRect().width + 10).toString()




          (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");



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

      let canvas = document.createElement("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;






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 = () => {



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

Kindly revert us if you have any concerns.


Durga Gopalakrishnan.

WI will January 9, 2023 09:38 AM UTC

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



SB Swetha Babu Syncfusion Team January 12, 2023 11:40 AM UTC

Hi Will,

Thanks for your suggestion.

Live Chat Icon For mobile
Up arrow icon