We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get started easily with Syncfusion Angular 11 Stock Charts

Platform: JavaScript - EJ 2 |
Control: Stock Chart |
Published Date: March 11, 2021 |
Last Revised Date: March 17, 2021

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

Stock_chart

 

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.

 

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

 

  1. To create an Angular application, install the Angular CLI globally using the following command.

 

npm install @angular/cli@11.2.3

 

  1. 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

 

  1. 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.

  1. 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

 

  1. 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

 

  1. 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>

 

  1. Then, add the stockchart component in the app.component.html file.

 

<app-stockchart></app-stockchart>

 

  1. 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:

StockChart_populated

 

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>`

 

Stock_chart-types

 

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};

  }

}

 

 

Stock_chart-tooltip

 

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.

StockChart_crosshair

 

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'

    }

   }

}

 

 

Period-selector

 

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'

    }

   }

}

 

Stocked_price

 

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!

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile