Chart dimensions in Angular Stock chart component
27 Sep 20238 minutes to read
Size for Container
Stock Chart can render to its container size. You can set the size via inline or CSS as demonstrated below.
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
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;
ngOnInit(): void {
this.chartData = chartData;
this.title = 'Efficiency of oil-fired power production';
this.primaryXAxis = {
valueType: 'DateTime'
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService, DateTimeService} from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule, StockChartAllModule, ChartAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ CategoryService, LineSeriesService, DateTimeService]
})
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);
Size for Stock Chart
You can also set size for chart directly through width
and height
properties.
In Pixel
You can set the size of chart in pixel as demonstrated below.
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title' width='650' height='350'>
<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;
ngOnInit(): void {
this.chartData = chartData;
this.title = 'Efficiency of oil-fired power production';
this.primaryXAxis = {
valueType: 'DateTime'
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService, DateTimeService} from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule, StockChartAllModule, ChartAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ CategoryService, LineSeriesService, DateTimeService]
})
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);
In Percentage
By setting value in percentage, Stock Chart gets its dimension with respect to its container. For example, when the height is ‘50%’, Stock Chart renders to half of the container height.
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title' width='80%' height='90%'>
<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;
ngOnInit(): void {
this.chartData = chartData;
this.title = 'Efficiency of oil-fired power production';
this.primaryXAxis = {
valueType: 'DateTime'
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService, DateTimeService} from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule, StockChartAllModule, ChartAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ CategoryService, LineSeriesService, DateTimeService]
})
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);
Note: When you do not specify the size, it takes
450px
as the height and window size as its width.