Export print in Angular Stock chart component
27 Apr 20244 minutes to read
The rendered stock chart can be exported to JPEG
, PNG
, SVG
, or PDF
format using the export dropdown button in the period selector toolbar. You can choose the required format using the export dropdown button in stock-chart.
The rendered stock chart can be printed directly using print button in period selector toolbar.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, StockChartAllModule, ChartAllModule} from '@syncfusion/ej2-angular-charts'
import { CategoryService, ColumnSeriesService, LegendService, DataLabelService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
imports: [
ChartModule, StockChartAllModule, ChartAllModule
],
providers: [ CategoryService, ColumnSeriesService, LegendService, DataLabelService],
standalone: true,
selector: 'app-container',
template: `<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
<e-stockchart-series-collection>
<e-stockchart-series [dataSource]='chartData' type='Candle' xName='date' yName='open' name='India' width=2 ></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public title?: string;
public crosshair?: Object;
ngOnInit(): void {
this.chartData = chartData;
this.title = 'Efficiency of oil-fired power production';
this.primaryXAxis = {
valueType: 'DateTime'
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Disable Export and print
To empty the value of exportType
for to disable the Export button.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, StockChartAllModule, ChartAllModule} from '@syncfusion/ej2-angular-charts'
import { CategoryService, ColumnSeriesService, LegendService, DataLabelService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
imports: [
ChartModule, StockChartAllModule, ChartAllModule
],
providers: [ CategoryService, ColumnSeriesService, LegendService, DataLabelService],
standalone: true,
selector: 'app-container',
template: `<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title' [exportType]='exportType'>
<e-stockchart-series-collection>
<e-stockchart-series [dataSource]='chartData' type='Candle' xName='date' yName='open' name='India' width=2 ></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public title?: string;
public exportType: string[] = [];
ngOnInit(): void {
this.chartData = chartData;
this.title = 'Efficiency of oil-fired power production';
this.primaryXAxis = {
valueType: 'DateTime'
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));