How to get started easily with Syncfusion Angular 11 Stock Charts?
A quick start project that helps you to create an Angular 11 Stock Chart with minimal code configuration.
Stock Chart features covered in this Project
This is an Angular 11 project created using Angular CLI 11.2.3. The Stock Chart features listed in this project are as follows.
- Angular 11 stock chart visualizing the data in candle series.
- Building other series type.
- Setting tooltip and crosshair for chart.
- Period and Range selector
Project pre-requisites
Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project.
- Node.js (latest version)
- Angular 11
- Angular CLI
- Typescript 4+
- Visual Studio Code for Editor
Angular 11 Stock Chart – Introduction
The Angular 11 Stock Chart used in this project is created from the Syncfusion `ej2-angular-charts` package. You can simply define Stock Chart as <ejs-stockchart> within the template.
Dependencies
Before starting with this project, the Angular 11 Stock Charts requires adding the Syncfusion `ej2-angular-charts` package from npmjs, which are distributed in npm as @syncfusion scoped packages.
Creating an Angular application
- To create an Angular application, install the Angular CLI globally using the following command.
npm install @angular/cli@11.2.3
- Then create a new Angular application using the following command.
ng new angular11-app cd angular11-app
This command downloads all the files needed and initializes the npm installation.
Installing the stockchart component
- After the Angular application has been created, use the following command to install the chart package.
npm install @syncfusion/ej2-angular-charts --save
The --save flag saves the charts package as a dependency in the package.json file.
- All configuration related to environment setup is now complete. Before configuring the stockchart, a component is needed to render the stockchart. To create an Angular component, use the following Angular CLI command.
ng generate component stockchart
- Next, import the chart module and stockchart module in the app.module.ts file.
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {ChartModule, StockChartAllModule} from ‘@syncfusion/ej2-angular-charts’;
import {AppComponent} from './app.component';
@NgModule ({
declarations: [AppComponent],
imports: [BrowserModule, ChartModule, StockChartAllModule],
bootstrap: [AppComponent]
})
export class AppModule { }
Creating the stockchart component
- All configuration related to the stockchart is now complete. Now we need to define our first stockchart in the stockchart.component.html file.
<ejs-stockchart></ejs-stockchart>
- Then, add the stockchart component in the app.component.html file.
<app-stockchart></app-stockchart>
- Go to the application directory and launch the server by using following command.
ng serve --open
Injecting modules
Before providing data to the stockchart, let’s learn more about the stockchart types that Syncfusion supports.
The Syncfusion stockchart component can plot more than 10 chart types. Each type is modularized and available as a separate service, so you can use only the modules you need, to keep your app lightweight. For example, if you want to visualize data with a candle chart, define the candleSeriesService in the providers of the app.module.ts file. This service provides access to the candle chart functionality.
import {StockChartModule} from '@syncfusion/ej2-angular-charts';
import {DateTimeService, CandleSeriesService} from '@syncfusion/ej2-angular-charts';
@NgModule({
imports: [BrowserModule, StockChartModule],
providers: [DateTimeService, CandleSeriesService]
})
After the candleSeriesService is injected in the providers, set the series type as Candle and populate the data in the stockchart by using the dataSource property, which accepts a JavaScript object.
import {Component, OnInit } from '@angular/core';
@Component ({
selector: 'app-stockchart',
template: `<ejs-stockchart id="chart-container" [primaryXAxis]="primaryXAxis">
<e-stockchart-series-collection>
<e-stockchart-series [dataSource]="chartData" type="Candle" xName="x" yName="high" name="Gold" High=” high” Low=” low” Open=” open” Close=” close”>
</e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>`
})
export class AppComponent implements OnInit {
public chartData: Object [];
public primaryXAxis: Object;
ngOnInit(): void {
// Data for chart series
this.chartData = [{
"x": new Date('2012-04-02T00:00:00.000Z'),
"open": 320.705719,
"high": 324.074066,
"low": 317.737732,
"close": 323.783783,
"volume": 45638000
}, {
"x": new Date('2012-04-03T00:00:00.000Z'),
"open": 323.028015,
"high": 324.299286,
"low": 319.639648,
"close": 321.631622,
"volume": 40857000
}, {
"x": new Date('2012-04-04T00:00:00.000Z'),
"open": 319.544556,
"high": 319.819824,
"low": 315.865875,
"close": 317.892883,
"volume": 32519000
}, {
"x": new Date('2012-04-05T00:00:00.000Z'),
"open": 316.436432,
"high": 318.533539,
"low": 314.599609,
"close": 316.476471,
"volume": 46327000
}]
this.primaryXAxis = { valueType: 'DateTime' };
}
}
The populated stockchart will look something like this:
Building other stockchart types
Implementing other stockchart types is very similar to implementing the candle series chart. If you want an Area or line chart, just inject its corresponding services in the providers and change the series type.
`<ejs-stockchart id="chart-container" [primaryXAxis]="primaryXAxis" > <e-stockchart-series-collection> <e-stockchart-series [dataSource]="chartData" type="Area" xName="x" yName="high" name="Gold"></e-stockchart-series> </e-stockchart-series-collection> </ejs-stockchart>`
Tooltip
You can also provide more information about stockchart data points when pointing to them by using tooltip. To make use of the tooltip functionality, just inject the TooltipService in the provider and enable the tooltip by setting the enable property to true.
`<ejs-stockchart id="chart-container" [primaryXAxis]="primaryXAxis" [tooltip]="tooltip">
<e-stockchart-series [dataSource]='chartData' type='Candle' xName='x' yName='high' name='India' width=2 ></e-stockchart-series>
</ejs-stockchart>`
export class AppComponent implements OnInit {
public tooltip : Object;
ngOnInit(): void {
this.tooltip = {enable : true};
}
}
Crosshair
Use crosshair to view the value of the axis at mouse touch position. We can access crosshair functionality by defining the CrosshairService in providers and set the visible property to true. Tooltip for an axis can be enabled by using enable property of crosshairTooltip in the corresponding axis.
`<ejs-stockchart id="chart-container" [primaryXAxis]="primaryXAxis" [crosshair]="crosshair">
<e-stockchart-series [dataSource]='chartData' type='Candle' xName="x" yName="high" name="Gold" High=” high” Low=” low” Open=” open” Close=” close” name='India' width=2 ></e-stockchart-series>
</ejs-stockchart>`
export class AppComponent implements OnInit {
public primaryXAxis: Object;
public primaryYAxis: Object;
public crosshair: Object;
ngOnInit(): void {
this.crosshair = {enable : true};
this.primaryXAxis = {
valueType: 'DateTime',
crosshairTooltip: {enable:true}
};
this.primaryYAxis = {
majorTickLines: {color: 'transparent', width: 0 },
crosshairTooltip: {enable: true}
};
}
}
After enabling crosshair, it looks similar to the following figure.
Period Selector
Period selector allows you to select a range with specified and custom periods. This also helpful in adding the indicators, trendlines and other series type to stock chart. We can access periodSelector functionality by defining the PeriodSelectorService in providers and setting the enablePeriodSelector property to true.
`<ejs-stockchart id="chart-container" [primaryXAxis]="primaryXAxis" [enablePeriodSelector]="true">
<e-stockchart-series [dataSource]='chartData' type='Candle' xName='x' yName='high' name='India' width=2 ></e-stockchart-series>
</ejs-stockchart>`
export class AppComponent implements OnInit {
public primaryXAxis: Object;
ngOnInit(): void {
this.primaryXAxis = {
valueType: 'DateTime'
}
}
}
Range Selector
RangeSelector is placed at the bottom of the stockchart. The left and right thumb of RangeSelector are used to indicate the selected range in the large collection of data. We can access the rangeSelector functionality by defining the RangeSelectorService in providers and setting the enableRangeSelector property to true.
`<ejs-stockchart id="chart-container" [primaryXAxis]="primaryXAxis" [enableRangeSelector]="true">
<e-stockchart-series [dataSource]='chartData' type='Candle' xName='x' yName='high' name='India' width=2 ></e-stockchart-series>
</ejs-stockchart>`
export class AppComponent implements OnInit {
public primaryXAxis: Object;
ngOnInit(): void {
this.primaryXAxis = {
valueType: 'DateTime'
}
}
}
Run the application with the command “ng serve” in command prompt and you will be able to view the Angular Chart output.
There are more options to explore with Angular 11 Stockchart and If you have any queries or require clarifications. Please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
