How to get started easily with Syncfusion Angular 8 StockCharts?

How to get started easily with Syncfusion Angular 8 Stock Chart?

A quick start project that helps you to create an Angular 8 Stock Chart with minimal code configuration.

Stock Chart features covered in this Project

This is an Angular 8 project created using Angular CLI 8.1.1 The Stockchart features listed in this project are as follows.

• Angular 8 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.

• Angular 8+
• TypeScript 3.4+

Angular 8 Stock Chart – Introduction

The Angular 8 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 8 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.

Then create a new Angular application using the following command.

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.

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.

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

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: 

Populated Stock Chart

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.

summary

     Refer to our documentation and online samples for more features. If you have any queries, 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!