Print and Export in Angular 3D Chart control

12 Jan 20249 minutes to read

Print

The rendered 3D chart can be printed directly from the browser by calling the public method print. The ID of the 3D chart’s div element must be passed as the input parameter to that method.

app.component.ts

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

@Component({
    selector: 'app-container',
    // specifies the template string for the Chart component
    template: `<button ej-button id='print' (click)='print()'>Print</button>
    <ejs-chart3d #chart style='display:block;' align='center' [primaryXAxis]='primaryXAxis' 
    rotation=7 tilt=10 depth=100 [enableRotation]='enableRotation'>
    <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]='dataSource' type='Column' xName='country' yName='gold' name="Gold">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]='dataSource' type='Column' xName='country' yName='silver' name="Silver">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]='dataSource' type='Column' xName='country' yName='bronze' name="Bronze">
        </e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>`
})
export class AppComponent {
    public dataSource?: Object[];
    public primaryXAxis?: Object;
    public enableRotation?: boolean;
    @ViewChild('chart')
    public chartObj?: ChartComponent;
    ngOnInit(): void {
        this.dataSource = [
            { country: "USA", gold: 50, silver: 70, bronze: 45 },
            { country: "China", gold: 40, silver: 60, bronze: 55 },
            { country: "Japan", gold: 70, silver: 60, bronze: 50 },
            { country: "Australia", gold: 60, silver: 56, bronze: 40 },
            { country: "France", gold: 50, silver: 45, bronze: 35 },
            { country: "Germany", gold: 40, silver: 30, bronze: 22 },
            { country: "Italy", gold: 40, silver: 35, bronze: 37 },
            { country: "Sweden", gold: 30, silver: 25, bronze: 27 }
        ];
        this.primaryXAxis = {
            valueType: 'Category',
            labelRotation: -45,
            labelPlacement: 'BetweenTicks'
        };
        this.enableRotation = true;
    }
    print() {
        this.chartObj?.print();
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { Chart3DAllModule} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, Chart3DAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

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 3D chart can be exported to JPEG, PNG, SVG, or PDF format using the export method. The input parameters for this method are: type for format and fileName for result.

app.component.ts

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

@Component({
    selector: 'app-container',
    // specifies the template string for the Chart component
    template: `<button ej-button id='print' (click)='export()'>Export</button>
    <ejs-chart3d #chart style='display:block;' align='center' [primaryXAxis]='primaryXAxis'
    rotation=7 tilt=10 depth=100 [enableRotation]='enableRotation'>
    <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]='dataSource' type='Column' xName='country' yName='gold' name="Gold">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]='dataSource' type='Column' xName='country' yName='silver' name="Silver">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]='dataSource' type='Column' xName='country' yName='bronze' name="Bronze">
        </e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>`
})
export class AppComponent {
    public dataSource?: Object[];
    public primaryXAxis?: Object;
    public enableRotation?: boolean;
    @ViewChild('chart')
    public chartObj?: ChartComponent;
    ngOnInit(): void {
        this.dataSource = [
            { country: "USA", gold: 50, silver: 70, bronze: 45 },
            { country: "China", gold: 40, silver: 60, bronze: 55 },
            { country: "Japan", gold: 70, silver: 60, bronze: 50 },
            { country: "Australia", gold: 60, silver: 56, bronze: 40 },
            { country: "France", gold: 50, silver: 45, bronze: 35 },
            { country: "Germany", gold: 40, silver: 30, bronze: 22 },
            { country: "Italy", gold: 40, silver: 35, bronze: 37 },
            { country: "Sweden", gold: 30, silver: 25, bronze: 27 }
        ];
        this.primaryXAxis = {
            valueType: 'Category',
            labelRotation: -45,
            labelPlacement: 'BetweenTicks'
        };
        this.enableRotation = true;
    }
    export() {
        this.chartObj?.export("PNG", "charts");
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { Chart3DAllModule} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, Chart3DAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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