Chart print in Angular Accumulation chart component

27 Apr 20247 minutes to read

Print

The rendered chart can be printed directly from the browser by calling the public method print.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule, ExportService } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'



import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartComponent } from '@syncfusion/ej2-angular-charts';

@Component({
imports: [
         AccumulationChartModule
    ],

providers: [PieSeriesService, AccumulationDataLabelService, ExportService],
standalone: true,
    selector: 'app-container',
    template: `<div class="col-md-8">
    <button ej-button id='print' (click)='print()'>Print</button>
    <ejs-accumulationchart #chart id="chart-container">
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]='piedata' xName='x' yName='y' radius="100%"></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>
    </div> `
})
export class AppComponent implements OnInit {
    public piedata?: Object[];
    @ViewChild('chart')
    public chartObj?: ChartComponent;
    ngOnInit(): void {
        this.piedata = [
                { x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
                { x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
                { x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
                { x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
                { x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }];
        }
        print() {
            this.chartObj?.print();
       }
    }

main.ts

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

Export

The rendered chart can be exported to Image(jpeg or png) or SVG or PDF format by using the export method.
Input parameters for this method are Export Type for format and fileName of result.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule, ExportService } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'



import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartComponent, IAccLoadedEventArgs } from '@syncfusion/ej2-angular-charts';

@Component({
imports: [
         AccumulationChartModule
    ],

providers: [PieSeriesService, AccumulationDataLabelService, ExportService],
standalone: true,
    selector: 'app-container',
    template: `<div class="col-md-8">
    <button ej-button id='print' (click)='export()'>Export</button>
    <ejs-accumulationchart #chart id="chart-container">
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]='piedata' xName='x' yName='y' radius="100%"></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>
    </div> `
})
export class AppComponent implements OnInit {
    public piedata?: Object[];
    public loaded: Function | any;
    @ViewChild('chart')
    public chartObj?: ChartComponent;
    ngOnInit(): void {
        this.piedata = [
                { x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
                { x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
                { x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
                { x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
                { x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }];
    }
    export() {
        this.chartObj?.export('PNG', 'export');
   }
}

main.ts

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