Print and Export in Angular 3D Circular Chart component

18 Nov 20186 minutes to read

Print

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

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularChart3DAllModule } from '@syncfusion/ej2-angular-charts'

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

@Component({
imports: [
         CircularChart3DAllModule
    ],

providers: [CircularChart3DAllModule],
standalone: true,
  selector: 'app-container',
  template: `<button id='print' (click)='print()'>Print</button>
  <ejs-circularchart3d #chart style='display:block;' align='center' [tilt]='tilt' [legendSettings]="legendSettings">
    <e-circularchart3d-series-collection>
    <e-circularchart3d-series [dataSource]='dataSource' xName='x' yName='y' [radius]='radius'>
    </e-circularchart3d-series></e-circularchart3d-series-collection>
    </ejs-circularchart3d>`
})
export class AppComponent implements OnInit {
  public dataSource?: Object[];
  public title?: string;
  public legendSettings?: Object;
  public tilt?: number;
  public radius?: string;
  @ViewChild('chart')
  public chartObj?: CircularChart3DComponent;

  ngOnInit(): void {
    this.dataSource = [
      { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
      { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
      { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
      { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
      { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 },
      { x: 'Nov', y: 15 }, { x: 'Dec', y: 15 }
    ];
    this.legendSettings = { visible: false };
    this.tilt = -45;
    this.radius = '100%';
  }
  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 3D Circular Chart can be exported to JPEG, PNG, or SVG format using the export method. Additionally, you can export the 3D Circular Chart as a PDF format using the pdfExport method. The input parameters for this method are type for the format and fileName for the result.

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 { CircularChart3DAllModule } from '@syncfusion/ej2-angular-charts'

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

@Component({
imports: [
         CircularChart3DAllModule
    ],

providers: [CircularChart3DAllModule],
standalone: true,
  selector: 'app-container',
  template: `<button id='export' (click)='export()'>Export</button>
  <ejs-circularchart3d #chart style='display:block;' align='center' [tilt]='tilt' [legendSettings]="legendSettings" [enableExport]='enableExport'>
    <e-circularchart3d-series-collection>
    <e-circularchart3d-series [dataSource]='dataSource' xName='x' yName='y' [radius]='radius'>
    </e-circularchart3d-series></e-circularchart3d-series-collection>
    </ejs-circularchart3d>`
})
export class AppComponent implements OnInit {
  public dataSource?: Object[];
  public title?: string;
  public legendSettings?: Object;
  public tilt?: number;
  public radius?: string;
  public enableExport?: boolean;

  @ViewChild('chart')
  public chartObj?: CircularChart3DComponent;

  ngOnInit(): void {
    this.dataSource = [
      { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
      { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
      { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
      { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
      { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 },
      { x: 'Nov', y: 15 }, { x: 'Dec', y: 15 }
    ];
    this.legendSettings = { visible: false };
    this.tilt = -45;
    this.radius = '100%';
    this.enableExport = true;
  }
  export() {
    this.chartObj?.circularChartExport3DModule.export('PDF', 'circular3DChart')
}
}

main.ts

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