Export Options
The Kendo UI for Angular Chart lets you export the current chart view as an image, PDF, or SVG file. For custom export scenarios, use the exportVisual method to get a Drawing scene that you can modify or combine with other visuals before you save it.
Each export method returns a Base64-encoded data URI. You can send that result to a service or save it on the client machine by using the File Saver package.
Use the following table to jump to the export option that matches your workflow.
| Export option | Use when |
|---|---|
| Image | You need a quick shareable snapshot, such as a report preview, email attachment, or generated thumbnail. |
| The chart has to fit a printable document or a multi-page export workflow. | |
| SVG | Downstream tools need vector output that stays sharp after scaling. |
| Custom Export Workflows | You need to modify the drawing scene before you save it or combine multiple visuals into one document. |
Exporting to Images
To implement image export, get a reference to the Chart component, call its exportImage method, and save the returned data URI. The method returns a promise, which makes it easy to trigger from a button click handler or another export action in your application.
The following snippet shows the basic export handler:
@ViewChild('chart')
private chart!: ChartComponent;
public exportChart(): void {
this.chart.exportImage().then((dataURI) => {
saveAs(dataURI, 'chart.png');
});
}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.
This approach is useful when the on-screen chart is compact, but the exported file must look sharper in presentations, printed material, or high-density displays. The export method renders a larger output without requiring you to resize the live chart in the page layout.
To export a larger image, pass width and height options to exportImage(). This keeps the live chart size unchanged while the exported file uses the requested resolution.
The following example demonstrates how to export the same chart at a larger resolution.
Exporting to Drawing Visuals
The exportVisual method returns a Drawing scene which you can further process.
Use this method when the built-in export methods are not enough on their own. You can transform the visual, merge it with other drawing elements, or pass it to the Drawing PDF utilities.
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.
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
exportVisualsize, or - Scale the drawing element, which is returned by the
exportVisualmethod.
Set an explicit export size when you know the target paper dimensions in advance. Scale the returned visual when you need to preserve the current rendered proportions and fit them into a page afterward.
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. The following example demonstrates the final result. For the implementation steps, review the setup below the example.
To export multiple Charts to the same PDF document, follow these steps:
-
Use
@ViewChildrento 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>; -
Export each Chart's visual representation using
exportVisual():tsconst chartExportGroups: Group[] = this.charts.map((chart) => chart.exportVisual()); -
Create a root
GroupwithmultiPageoption enabled and append all chart visuals.tsconst rootGroup = new Group({ pdf: { multiPage: true, }, }); chartExportGroups.forEach((group) => { rootGroup.append(group); }); -
Use the
exportPDFmethod and provide the rootGroupobject andPDFOptionsobject 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.
Exporting to SVG
To implement SVG export, get a reference to the Chart component, call its exportSVG method, and save the returned data URI. The method returns a promise, which makes it easy to plug into a button click handler or another export action in your application.
@ViewChild('chart')
private chart!: ChartComponent;
public exportChart(): void {
this.chart.exportSVG().then((dataURI) => {
saveAs(dataURI, 'chart.svg');
});
}Use SVG export when the chart will be embedded in a design system, a documentation site, or another workflow that benefits from editable vector content. The exported file keeps the chart sharp at any scale and is often easier to post-process than a bitmap image.
The following example demonstrates how to save the Chart as an SVG file by using the exportSVG method.