Appearance in Angular Stock chart component
20 Sep 20228 minutes to read
Stock Chart Title
StockChart can be given a title using title
property, to show the information about the data plotted.
import { Component, OnInit } from '@angular/core';
import { chartData } from 'datasource.ts';
@Component({
selector: 'app-container',
template:
`<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [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 chartData: Object[];
public title: string;
ngOnInit(): void {
this.chartData = chartData;
this.title = 'Efficiency of oil-fired power production';
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, StockChartAllModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { DateTimeService, CandleSeriesService, LegendService, CategoryService, LineSeriesService} from '@syncfusion/ej2-angular-charts';
import { TooltipService} from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule, StockChartAllModule, ChartAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ TooltipService, DateTimeService, CandleSeriesService, LegendService, CategoryService, LineSeriesService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Title Customization
The textStyle
property of stockchart title provides options to customize the size
, color
, fontFamily
, fontWeight
, fontStyle
, opacity
, textAlignment
and textOverflow
.
import { Component, OnInit } from '@angular/core';
import { chartData } from 'datasource.ts';
@Component({
selector: 'app-container',
template:
`<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [titleStyle]='titleStyle'>
<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 chartData: Object[];
public title: string;
ngOnInit(): void {
this.chartData = chartData;
this.title = 'Efficiency of oil-fired power production';
this.titleStyle = {
fontFamily: "Arial",
fontStyle: 'italic',
fontWeight: 'regular',
color: "#E27F2D",
size: '23px',
textOverflow: 'Wrap'
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, StockChartAllModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { DateTimeService, CandleSeriesService, LegendService, CategoryService, LineSeriesService} from '@syncfusion/ej2-angular-charts';
import { TooltipService} from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule, StockChartAllModule, ChartAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ TooltipService, DateTimeService, CandleSeriesService, LegendService, CategoryService, LineSeriesService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Stock Chart Theme
Changing Stock Chart theme will affect background color, grid lines, tooltip colors and appearance.
theme
property of Stock chart is shipped with several built-in themes such as Material
, Fabric
, Bootstrap
, HighContrastLight
, MaterialDark
, FabricDark
, FabricDark
, HighContrast
and BootstrapDark
.
import { Component, OnInit } from '@angular/core';
import { chartData } from 'datasource.ts';
@Component({
selector: 'app-container',
template:
`<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [theme]='theme'>
<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 chartData: Object[];
public title: string;
ngOnInit(): void {
this.chartData = chartData;
this.title = 'Efficiency of oil-fired power production';
this.theme = 'HighContrast';
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, StockChartAllModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { DateTimeService, CandleSeriesService, LegendService, CategoryService, LineSeriesService} from '@syncfusion/ej2-angular-charts';
import { TooltipService} from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule, StockChartAllModule, ChartAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ TooltipService, DateTimeService, CandleSeriesService, LegendService, CategoryService, LineSeriesService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);