New to Kendo UI for Angular? Start a free 30-day trial

Export Options

The Angular Chart provides built-in support for Image, PDF, and SVG export.

As a result, you can send a Base64-encoded file to a service or save it on the client machine by using the File Saver package.

The Chart supports the following options:

Exporting to Images

The following example demonstrates how to save the Angular Chart as a PNG image by using the exportImage method.

By default, the exported image is of the same size as the Chart DOM element. If required, you can export the file to a different resolution. If you change the image size, the image quality will not be affected because the rendering of the Chart is based on vector graphics.

Exporting to Drawing Visuals

The exportVisual method returns a Drawing scene which you can further process.

The following example demonstrates how to export the Chart as a Drawing visual scene by using the exportVisual method.

Exporting to PDF

The exportPDF method from the Drawing library takes a visual element and produces a PDF file out of it.

Saving Charts in PDF

The following example demonstrates how to save the Angular Chart as a PDF file by using the exportPDF method.

Fitting Charts to Paper Size

If the rendered Chart is bigger than the exported PDF paper size, then the Chart is clipped. To avoid this behavior, either:

• Set the exportVisual size, or
• Scale the drawing element, which is returned by the exportVisual method.

The following example demonstrates how to fit the exported Chart to the paper size of the PDF file.

Exporting Multiple Charts to the Same PDF Document

You can export multiple Charts to the same PDF document by combining their visual representations into a single PDF file. To achieve this:

1. Use @ViewChildren to get references to all Chart components in your template:

   html

   <kendo-chart #chart>
     <!-- chart configuration -->
   </kendo-chart>
   <kendo-chart #chart>
     <!-- chart configuration -->
   </kendo-chart>

   ts

   @ViewChildren(ChartComponent)
   private charts: QueryList<ChartComponent>;

2. Export each Chart's visual representation using exportVisual():

   ts

   const chartExportGroups: Group[] = this.charts.map((chart) => chart.exportVisual());

3. Create a root Group with multiPage option enabled and append all chart visuals.

   ts

   const rootGroup = new Group({
     pdf: {
       multiPage: true,
     },
   });
   
   chartExportGroups.forEach((group) => {
     rootGroup.append(group);
   });

4. Use the exportPDF method and provide the root Group object and PDFOptions object as arguments to export the Charts to a single PDF file:

   ts

   // PDFOptions can be configured for paper size, orientation, etc.
   exportPDF(rootGroup, { paperSize: 'auto', landscape: true }).then((dataURI) => {
     saveAs(dataURI, 'charts.pdf');
   });

The key component is the Group class from Drawing API with the multiPage enabled, which places each chart on a separate page within the same PDF document.

When exporting, each Chart will retain the same dimensions as displayed on the page at the time of export. If your Charts are responsive and you resize the page, the exported PDF will reflect the current rendered size of each Chart.

The following example demonstrates how to export multiple Charts to the same PDF document.

Exporting to SVG

The following example demonstrates how to save the Chart as an SVG file by using the exportSVG method.

Suggested Links

• Angular Charts Homepage
• Angular Charts Structural Elements
• API Reference of the Angular Charts
• Glossary
• Troubleshooting - The Chart Is Clipped during Printing