How to Export Chart with DataLabel Template Using Angular Chart?

4 mins read

This article explains how to export a Angular Chart that uses a custom data label template, including embedded SVG icons and styled HTML, by converting them into foreignObject elements and appending them to the chart’s SVG before exporting.

When using custom HTML or SVG templates for data labels in Angular Charts, exporting the chart directly may not preserve these templates correctly in the output image. This is because standard SVG export does not support embedded HTML content. To solve this, we follow a multi-step approach:

Step 1: Define a Custom Data Label Template

In app.component.ts, we define a materialWomen template that includes:

A styled div element with background color and rounded corners.
An embedded SVG icon (fas fa-user-alt equivalent).
A dynamic label showing the data value (${point.y}M).

public materialWomen = '<div style="color:white;text-align: center; background-color:pink;border-radius: 3px; height: 40px; width: 68px">' +
      ' <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 288c79.5 0 144-64.5 144-144S335.5 0 256 0 112 64.5 112 144s64.5 144 144 144zm128 32h-55.1c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16H128C57.3 320 0 377.3 0 448v16c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-16c0-70.7-57.3-128-128-128z"/></svg>' +
       '<div style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px; '
       +'text-align: center;"><span>' +
       '${point.y}M </span></div></div>';

This template is assigned to the chart’s marker configuration:

public marker: Object = {   dataLabel: {
       visible: true,
       position: 'Outer',
       margin: { top: 70 },
       template: this.materialWomen
   },  }

Step 2: Render the Chart

In app.component.html, we use the ejs-chart component to render a column chart with the above marker configuration:

<ejs-chart #chart style='display:block;' id='container' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title' (load)='load($event)' [chartArea]='chartArea' >
           <e-series-collection>
               <e-series [dataSource]='data'  [marker]='marker' type='Column' xName='x' yName='y' width=2>
               </e-series>
           </e-series-collection>
       </ejs-chart>

Step 3: Convert Data Labels to foreignObject for Export

When the user clicks the Export button, the mode() function is triggered. This function:

Selects all data label elements.
Converts each into a foreignObject SVG element.
Appends them to the chart’s SVG.
Serializes the SVG and draws it onto a canvas.
Converts the canvas to a PNG and triggers a download.

public mode(e: Event): void {
       let svg: any;
       let annotationEle = document
       .getElementById("container_Series_0_DataLabelCollections")
       .querySelectorAll('[id*="container_Series_0_DataLabel_"]');
     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.href = imagedata;
       document.body.appendChild(anchor);
       anchor.click();
       canvas.remove();
     };
   }

Output

Sample

You can this implementation live via StackBlitz:
Live Demo

Conclusion

I hope you enjoyed learning about how to export Chart with data label template using Angular Chart.

You can refer to our Angular Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Angular Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our Angular components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Angular Chart and other Angular components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)