Print and Export in Angular Chart

31 Aug 202624 minutes to read

The print and export features in the Angular Chart require the ExportService to be registered in the component’s providers array. If you have not already added it, include the following in your component:

import { ExportService, /* series services you use */ } from '@syncfusion/ej2-angular-charts';

@Component({
  // ...
  providers: [ExportService, /* series services */]
})

Print

The rendered chart can be printed directly from the browser by calling the public method print.
You can pass an array of element IDs or a DOM element to this method. By default it takes the chart element.

In the example below, a button is added to the page and the print method is called from its click handler.

import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { AreaSeriesService, LineSeriesService, ExportService, ColumnSeriesService, StackingColumnSeriesService, StackingAreaSeriesService, RangeColumnSeriesService, ScatterSeriesService, PolarSeriesService, CategoryService, RadarSeriesService, ILoadedEventArgs, SplineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { ChartComponent } from '@syncfusion/ej2-angular-charts';

@Component({
imports: [
         ChartModule, ButtonModule, ChartAllModule
    ],

providers: [ AreaSeriesService, LineSeriesService, ExportService, ColumnSeriesService, StackingColumnSeriesService, StackingAreaSeriesService, RangeColumnSeriesService, ScatterSeriesService, PolarSeriesService, CategoryService, RadarSeriesService, SplineSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<div class="col-md-8">
    <button ej-button id='print' (click)='print()'>Print</button>
    <ejs-chart #chart id='chart-container' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
            [title]='title' >
            <e-series-collection>
                <e-series [dataSource]='data' type='Radar' xName='x' yName='y' drawType='Line'> </e-series>
            </e-series-collection>
    </ejs-chart>
    </div> `
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];
    @ViewChild('chart')
    public chartObj?: ChartComponent;

    ngOnInit(): void {
        this.data = [
            { x: 2005, y: 28 }, { x: 2006, y: 25 },{ x: 2007, y: 26 }, { x: 2008, y: 27 },
            { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }
        ];
        this.primaryXAxis = {
            title: 'Year', coefficient: 90,
            minimum: 2004, maximum: 2012, interval: 1
            };
        this.primaryYAxis = {
            minimum: 20, maximum: 40, interval: 5,
            title: 'Efficiency',
            labelFormat: '{value}%'
            };

        this.title = 'Efficiency of oil-fired power production';
    }
     print() {
        this.chartObj?.print();
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

To print the chart together with another element on the page, pass an array of element IDs to print:

this.chartObj?.print(['#chart-container', '#summary-panel']);

Export

The rendered chart can be exported to JPEG, PNG, SVG, PDF, XLSX, or CSV format using the export method of the chart. The full method signature is:

export(
  type: 'JPEG' | 'PNG' | 'SVG' | 'PDF' | 'XLSX' | 'CSV',
  fileName: string,
  orientation?: 'Portrait' | 'Landscape',
  controls?: Chart[],
  width?: number,
  height?: number,
  exportToMultiplePage?: boolean,
  header?: PdfPageSettingsHeader,
  footer?: PdfPageSettingsFooter
): void

Parameter descriptions:

  • type - The export file format.
  • fileName - The name of the exported file (without extension).
  • orientation - Page orientation for PDF export ('Portrait' or 'Landscape'). Ignored for non-PDF formats.
  • controls - An array of chart (or accumulation chart) instances to export together in a single page. See Multiple Chart Export.
  • width - Width of the exported chart in pixels.
  • height - Height of the exported chart in pixels.
  • exportToMultiplePage - When true and type is 'PDF', each chart is exported to a separate page. See Exporting charts into separate page during the PDF export.
  • header / footer - Optional header and footer content for the exported PDF. See Adding header and footer in PDF export.

To perform a manual export on user action, call the export method from a button click handler as shown below.

Note: Avoid calling export from the chart’s loaded event; this triggers an automatic export every time the chart loads and is not recommended.

import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { AreaSeriesService, LineSeriesService, ExportService, ColumnSeriesService, StackingColumnSeriesService, StackingAreaSeriesService, RangeColumnSeriesService, ScatterSeriesService, PolarSeriesService, CategoryService, RadarSeriesService, SplineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartComponent } from '@syncfusion/ej2-angular-charts';

@Component({
imports: [
         ChartModule, ButtonModule, ChartAllModule
    ],

providers: [ AreaSeriesService, LineSeriesService, ExportService, ColumnSeriesService, StackingColumnSeriesService, StackingAreaSeriesService, RangeColumnSeriesService, ScatterSeriesService, PolarSeriesService, CategoryService, RadarSeriesService, SplineSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<div class="col-md-8">
    <button ej-button id='export' (click)='export()'>Export</button>
    <ejs-chart #chart id='chart-container'  [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
            [title]='title' >
            <e-series-collection>
                <e-series [dataSource]='data' type='Radar' xName='x' yName='y' drawType='Line'> </e-series>
            </e-series-collection>
    </ejs-chart>
    </div> `
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];
    @ViewChild('chart')
    public chartObj?: ChartComponent;

    ngOnInit(): void {
        this.data = [{ x: 2005, y: 28 }, { x: 2006, y: 25 },{ x: 2007, y: 26 }, { x: 2008, y: 27 },
                     { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }];
        this.primaryXAxis = {
            title: 'Year', coefficient: 90,
            minimum: 2004, maximum: 2012, interval: 1
            };
        this.primaryYAxis = {
            minimum: 20, maximum: 40, interval: 5,
            title: 'Efficiency',
            labelFormat: '{value}%'
            };

        this.title = 'Efficiency of oil-fired power production';
    }

    export(): void {
        this.chartObj?.exportModule.export('PNG', 'export');
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

In the export method, specify the following parameters to add a header and footer text to the exported PDF document:

  • header - Specify the text that should appear at the top of the exported PDF document.
  • footer - Specify the text that should appear at the bottom of the exported PDF document.

Both header and footer accept a PdfPageSettingsHeader / PdfPageSettingsFooter object with properties such as content, fontSize, fontFamily, color, and style. For example:

const header = {
  content: 'Chart Header',
  fontSize: 15,
  fontFamily: 'Arial',
  color: '#000'
};
import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { AreaSeriesService, LineSeriesService, ExportService, ColumnSeriesService, StackingColumnSeriesService, StackingAreaSeriesService, RangeColumnSeriesService, ScatterSeriesService, PolarSeriesService, CategoryService, RadarSeriesService, ILoadedEventArgs, SplineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartComponent } from '@syncfusion/ej2-angular-charts';

@Component({
imports: [
         ChartModule, ButtonModule, ChartAllModule
    ],

providers: [ AreaSeriesService, LineSeriesService, ExportService, ColumnSeriesService, StackingColumnSeriesService, StackingAreaSeriesService, RangeColumnSeriesService, ScatterSeriesService, PolarSeriesService, CategoryService, RadarSeriesService, SplineSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart #chart id='chart-container' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
            [title]='title' >
            <e-series-collection>
                <e-series [dataSource]='exportData' type='Column' xName='x' yName='y' width=2> </e-series>
            </e-series-collection>
    </ejs-chart>
    <button ej-button id='print' (click)='export()'>Export</button>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public exportData?: Object[];
    @ViewChild('chart')
    public chart?: ChartComponent;
    ngOnInit(): void {
        this.exportData = [{ x: 'John', y: 10000 }, { x: 'Jake', y: 12000 }, { x: 'Peter', y: 18000 },
        { x: 'James', y: 11000 }, { x: 'Mary', y: 9700 }];
        this.primaryXAxis = {
            title: 'Manager',
            valueType: 'Category',
            majorGridLines: { width: 0 }
        };
        this.primaryYAxis = {
            title: 'Sales',
            minimum: 0,
            maximum: 20000,
            majorGridLines: { width: 0 }
        };
        this.title = 'Sales Comparision';
    }
    export() {
        const header = {
            content: 'Chart Header',
            fontSize: 15
        };

        const footer = {
            content: 'Chart Footer',
            fontSize: 15,
        };
        this.chart?.exportModule.export('PDF', 'Chart', 'Portrait', [this.chart as ChartComponent], undefined, undefined, true, header, footer);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Exporting charts into separate page during the PDF export

During PDF export, set the exportToMultiplePage parameter to true to export each chart as a separate page.

import { ChartModule, ChartAllModule, AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { AreaSeriesService, LineSeriesService, ExportService, ColumnSeriesService, StackingColumnSeriesService, StackingAreaSeriesService, RangeColumnSeriesService, ScatterSeriesService, PolarSeriesService, CategoryService, RadarSeriesService, ILoadedEventArgs, SplineSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartComponent } from '@syncfusion/ej2-angular-charts';
import { Chart } from '@syncfusion/ej2-charts';

@Component({
imports: [
         ChartModule, ButtonModule, ChartAllModule, AccumulationChartModule
    ],

providers: [ AreaSeriesService, LineSeriesService, ExportService, ColumnSeriesService, StackingColumnSeriesService, StackingAreaSeriesService, RangeColumnSeriesService, ScatterSeriesService, PolarSeriesService, CategoryService, RadarSeriesService, SplineSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart #chart id='chart-container1' [primaryXAxis]='primaryXAxis1' [primaryYAxis]='primaryYAxis1'
            [title]='title1' >
            <e-series-collection>
                <e-series [dataSource]='data1' type='Line' xName='x' yName='y' width=2 name='Germany' [marker]='marker'> </e-series>
                <e-series [dataSource]='data1' type='Line' xName='x' yName='y1' width=2 name='England' [marker]='marker'> </e-series>
            </e-series-collection>
    </ejs-chart>
    <ejs-chart #chart1 id='chart-container2' [primaryXAxis]='primaryXAxis2' [primaryYAxis]='primaryYAxis2'
            [title]='title2' >
            <e-series-collection>
                <e-series [dataSource]='data2' type='Column' xName='x' yName='y' width=2> </e-series>
            </e-series-collection>
    </ejs-chart>
    <ejs-accumulationchart #chart2 id="chart-container3" [legendSettings]='legendSettings' [tooltip]='tooltip'  [enableSmartLabels]='true'>
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]='data3' xName='x' yName='y' [dataLabel]='datalabel' radius='70%' startAngle=0 endAngle=360 name='Project'></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>

    <button ej-button id='print' (click)='export()'>Export</button>`
})
export class AppComponent implements OnInit {
    public primaryXAxis1?: Object;
    public primaryXAxis2?: Object;
    public primaryXAxis3?: Object;
    public primaryYAxis1?: Object;
    public primaryYAxis2?: Object;
    public primaryYAxis3?: Object;
    public title1?: string;
    public title2?: string;
    public title3?: string;
    public data1?: Object[];
    public data2?: Object[];
    public data3?: Object[];
    public marker?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    public datalabel?: Object;
    @ViewChild('chart')
    public chart?: ChartComponent;
    @ViewChild('chart1')
    public chart1?: ChartComponent;
    @ViewChild('chart2')
    public chart2?: ChartComponent;
    ngOnInit(): void {
        this.data1 = [
            { x: new Date(2005, 0, 1), y: 21, y1: 28 }, { x: new Date(2006, 0, 1), y: 24, y1: 44 },
            { x: new Date(2007, 0, 1), y: 36, y1: 48 }, { x: new Date(2008, 0, 1), y: 38, y1: 50 },
            { x: new Date(2009, 0, 1), y: 54, y1: 66 }, { x: new Date(2010, 0, 1), y: 57, y1: 78 },
            { x: new Date(2011, 0, 1), y: 70, y1: 84 }
        ];
        this.data2 = [
            { x: 'John', y: 10000 }, { x: 'Jake', y: 12000 }, { x: 'Peter', y: 18000 },
            { x: 'James', y: 11000 }, { x: 'Mary', y: 9700 }
        ];
        this.data3 = [
            { x: 'Labour', y: 18, text: '18%' }, { x: 'Legal', y: 8, text: '8%' },
            { x: 'Production', y: 15, text: '15%' }, { x: 'License', y: 11, text: '11%' },
            { x: 'Facilities', y: 18, text: '18%' }, { x: 'Taxes', y: 14, text: '14%' },
            { x: 'Insurance', y: 16, text: '16%' }
        ];
        this.primaryXAxis1 = {
            valueType: 'DateTime',
            labelFormat: 'y',
            intervalType: 'Years',
            edgeLabelPlacement: 'Shift',
            majorGridLines: { width: 0 }
        };
        this.primaryYAxis1 = {
            labelFormat: '{value}%',
            rangePadding: 'None',
            minimum: 0,
            maximum: 100,
            interval: 20,
            lineStyle: { width: 0 },
            majorTickLines: { width: 0 },
            minorTickLines: { width: 0 }
        };
        this.title1 = 'Medal Count';
        this.marker = { visible: true, width: 10, height: 10 };
        this.primaryXAxis2 = {
            title: 'Manager',
            valueType: 'Category',
            majorGridLines: { width: 0 }
        };
        this.primaryYAxis2 = {
            title: 'Sales',
            minimum: 0,
            maximum: 20000,
            majorGridLines: { width: 0 }
        };
        this.title2 = 'Sales Comparision';
        this.title3 = 'Project Cost Breakdown';
        this.legendSettings = {
            visible: true
        };
        this.tooltip = {
            enable: false
        };
        this.datalabel = { visible: true, name: 'text', position: 'Inside', font: { fontWeight: '600', color: '#ffffff' } };
    }
    export() {
        this.chart?.exportModule.export('PDF', 'Chart', undefined, [this.chart as Chart, this.chart1 as Chart, this.chart2 as Chart], undefined, undefined, true);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Multiple Chart Export

You can export multiple charts in a single page by passing the multiple chart objects in the export method of the chart. To export multiple charts in a single page, follow these steps:

  1. Inject ExportService (and the relevant series services such as ColumnSeriesService or LineSeriesService) into the component’s providers array.
  2. Render more than one chart on the page.
  3. Add a button to trigger the export.
  4. In the button click handler, call the export method on one chart and pass an array of chart instances in the controls parameter.
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { CategoryService, ColumnSeriesService, ExportService, LegendService, DataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartComponent } from '@syncfusion/ej2-angular-charts';
@Component({
imports: [
         ChartModule,  ButtonModule
    ],

providers: [ CategoryService, ColumnSeriesService,ExportService, LegendService, DataLabelService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart #chart id='chartcontainer'
            [title]='title'>
            <e-series-collection>
                <e-series [dataSource]='data' type='Column' xName='x' yName='y' > </e-series>
            </e-series-collection>
    </ejs-chart>
    <ejs-chart #chart1 id='chartcontainer1'
            [title]='title'>
            <e-series-collection>
                <e-series [dataSource]='data1' type='Column' xName='x' yName='y' > </e-series>
            </e-series-collection>
    </ejs-chart>
    <button ej-button id='print' (click)='export()'>Export</button>`
})
export class AppComponent implements OnInit {
    public title?: string;
    public data?: Object[];
    public data1?: Object[];
    @ViewChild('chart')
    public chart?: ChartComponent;
    @ViewChild('chart1')
    public chart1?: ChartComponent;
    ngOnInit(): void {
        this.data =  [
              { x: 1, y: 20 }, { x: 2, y: 5 },
              { x: 3, y: 10 }, { x: 4, y: 40 }
              ];
        this.data1 =  [
              { x: 1, y: 20 }, { x: 2, y: 5 },
              { x: 3, y: 10 }, { x: 4, y: 40 }
              ];
        this.title = 'Chart 1';
    }
    export() {
        this.chart?.exportModule.export('PNG', 'chart', undefined, [this.chart, this.chart1 as ChartComponent]);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Exporting chart using base64 string

The chart can be exported as an image in the form of a base64 string by utilizing HTML canvas. This process involves rendering the chart onto a canvas element and then converting the canvas content to a base64 string (PNG).

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { CategoryService, ColumnSeriesService, ExportService, LegendService, DataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartComponent } from '@syncfusion/ej2-angular-charts';
@Component({
imports: [
         ChartModule,  ButtonModule
    ],

providers: [ CategoryService, ColumnSeriesService,ExportService, LegendService, DataLabelService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart #chart style='display:block;' id='chartcontainer' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title' [chartArea]='chartArea'>
    <e-series-collection>
        <e-series [dataSource]='data' type='Column' xName='x' yName='y' width=2>
        </e-series>
    </e-series-collection>
</ejs-chart>

<button ejs-button iconCss="e-icons e-export-icon" cssClass="e-flat" isPrimary=true (click)='onClick($event)' style="text-transform:none !important" id="togglebtn">EXPORT</button>`
})
export class AppComponent implements OnInit {
    public data: Object[] = [
        { x: 'DEU', y: 35.5 }, { x: 'CHN', y: 18.3 }, { x: 'ITA', y: 17.6 }, { x: 'JPN', y: 13.6 },
        { x: 'US', y: 12 }, { x: 'ESP', y: 5.6 }, { x: 'FRA', y: 4.6 }, { x: 'AUS', y: 3.3 },
        { x: 'BEL', y: 3 }, { x: 'UK', y: 2.9 }
    ];
    //Initializing Primary X Axis
    public primaryXAxis: Object = {
        valueType: 'Category',
        majorGridLines: { width: 0 },
        majorTickLines: { width: 0 },
        minorTickLines: { width: 0 }
    };
    //Initializing Primary Y Axis
    public primaryYAxis: Object = {
        title: 'Measurements',
        labelFormat: '{value}GW',
        minimum: 0,
        maximum: 40,
        interval: 10,
        lineStyle: {width : 0},
        minorTickLines: {width: 0},
        majorTickLines: {width : 0},
    };
    public chartArea: Object = {
        border: {
            width: 0
        }
    };

    public title: string = 'Top 10 Countries Using Solar Power';

    public onClick(e: Event): void {
        let svg: any = document.querySelector("#chartcontainer_svg");
        var svgData = new XMLSerializer().serializeToString(svg);
        var canvas = document.createElement("canvas");
        document.body.appendChild(canvas);
        var svgSize = svg.getBoundingClientRect();
        canvas.width = svgSize.width;
        canvas.height = svgSize.height;
        let ctx: any = canvas.getContext("2d");
        var img = document.createElement("img");
        img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));
        img.onload = function() {
          ctx.drawImage(img, 0, 0);
          var imagedata = canvas.toDataURL("image/png");
          console.log(imagedata); // printed base64 in console
          canvas.remove();
        };
    }
    ngOnInit(): void {

    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

To use the base64 output, assign it to an <img> element or trigger a browser download. For example, to download it as a PNG file:

const link = document.createElement('a');
link.href = imagedata; // the base64 string returned from canvas.toDataURL('image/png')
link.download = 'chart.png';
link.click();

Note: If the chart contains images or fonts loaded from a different origin, the canvas will be tainted and toDataURL will throw a security exception. Serve all chart assets from the same origin or inline them as data URIs.

Excel export

You can export the rendered chart data to Excel in either XLSX or CSV format. The excelProperties property in the beforeExport event allows users to customize the exported Excel sheet by modifying row, column, and cell properties before the file is generated. You can customize row titles, column titles, cell values, as well as row and column widths.

To use this event, bind it on the <ejs-chart> element and read excelProperties from the event arguments:

<ejs-chart #chart (beforeExport)="onBeforeExport($event)" ...></ejs-chart>
onBeforeExport(args: IExportEventArgs): void {
  args.excelProperties = {
    rows: [
      { /* row configuration */ },
      { /* row configuration */ }
    ],
    columns: [
      { /* column configuration */ },
      { /* column configuration */ }
    ]
  };
}

Note: For export to work in some integration setups you may need to provide ExportService in your module or component providers.

Troubleshooting

  • Export or print does nothing – Ensure ExportService (and any required series services such as ColumnSeriesService or LineSeriesService) is registered in the component’s providers array.
  • Exported file has the wrong orientation – The orientation parameter is only honored for PDF export; it is ignored for other formats.
  • toDataURL throws a security error – The chart canvas is tainted by cross-origin assets. Serve all images and fonts from the same origin as the application.
  • Export runs every time the chart loads – You may be calling export from the chart’s loaded event. Move the call to a button click handler instead.

See Also