Chart print in Angular Chart component

20 Dec 202324 minutes to read

Print

The rendered chart can be printed directly from the browser by calling the public method print.
You can pass array of ID of elements or element to this method. By default it take element of the chart.

app.component.ts
app.module.ts
main.ts
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { ChartComponent } from '@syncfusion/ej2-angular-charts';

@Component({
    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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
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';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, ButtonModule, ChartAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ AreaSeriesService, LineSeriesService, ExportService, ColumnSeriesService, StackingColumnSeriesService, StackingAreaSeriesService, RangeColumnSeriesService, ScatterSeriesService, PolarSeriesService, CategoryService, RadarSeriesService, SplineSeriesService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Export

The rendered chart can be exported to JPEG, PNG, SVG, PDF, XLSX, or CSV format using the export method in chart. The input parameters for this method are type for format and fileName for result.

The optional parameters for this method are,

orientation - either portrait or landscape mode during PDF export,
controls - pass collections of controls for multiple export,
width - width of chart export, and
height - height of chart export.

app.component.ts
app.module.ts
main.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { ILoadedEventArgs } from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    template: `<div class="col-md-8">
    <ejs-chart id='chart-container'  [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' (loaded)='loaded($event)'
            [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[];
    public loaded: Function | any;

    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';
        this.loaded = (args: ILoadedEventArgs) => {
                args.chart.exportModule.export('PNG', 'export');
        }
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
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';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, ButtonModule, ChartAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ AreaSeriesService, LineSeriesService, ExportService, ColumnSeriesService, StackingColumnSeriesService, StackingAreaSeriesService, RangeColumnSeriesService, ScatterSeriesService, PolarSeriesService, CategoryService, RadarSeriesService, SplineSeriesService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Adding header and footer in PDF export

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.

app.component.ts
app.module.ts
main.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartComponent } from '@syncfusion/ej2-angular-charts';

@Component({
    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', 1, [this.chart as ChartComponent], undefined, undefined, true, header, footer);
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
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';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, ButtonModule, ChartAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ AreaSeriesService, LineSeriesService, ExportService, ColumnSeriesService, StackingColumnSeriesService, StackingAreaSeriesService, RangeColumnSeriesService, ScatterSeriesService, PolarSeriesService, CategoryService, RadarSeriesService, SplineSeriesService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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.

app.component.ts
app.module.ts
main.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartComponent } from '@syncfusion/ej2-angular-charts';
import { Chart } from '@syncfusion/ej2-charts';

@Component({
    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, undefined, undefined, true);
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
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';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, ButtonModule, ChartAllModule, AccumulationChartModule 
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ AreaSeriesService, LineSeriesService, ExportService, ColumnSeriesService, StackingColumnSeriesService, StackingAreaSeriesService, RangeColumnSeriesService, ScatterSeriesService, PolarSeriesService, CategoryService, RadarSeriesService, SplineSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Multiple Chart Export

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

Initially, render more than one chart to export, and then add button to export the multiple charts. In button click, call the export method in charts, and then pass the multiple chart objects in the export method.

app.component.ts
app.module.ts
main.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartComponent } from '@syncfusion/ej2-angular-charts';
@Component({
    selector: 'app-container',
    template: `<ejs-chart #chart id='chartcontainer'
            [title]='title' (loaded)='loaded($event)'>
            <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','Landscape' as any ,[this.chart, this.chart1 as ChartComponent]);
    }
    loaded(args: any) {
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
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';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule,  ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ CategoryService, ColumnSeriesService,ExportService, LegendService, DataLabelService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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.

app.component.ts
app.module.ts
main.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartComponent } from '@syncfusion/ej2-angular-charts';
@Component({
    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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
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';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule,  ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ CategoryService, ColumnSeriesService,ExportService, LegendService, DataLabelService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);