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.ts';
@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';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
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.ts';
@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';
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.ts';
@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';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Note: When you do not specify the size, it takes 450px
as the height and window size as its width.