HelpBot Assistant

How can I help you?

Getting started with Angular Stock Chart component

17 Feb 202623 minutes to read

This section explains the steps required to create a simple Angular Stock Chart and demonstrates the basic usage of the Stock Chart component in an Angular environment.

Note: This guide supports Angular 21 and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the Angular version support matrix. Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.

Ready to streamline your Syncfusion® Angular development? Discover the full potential of Syncfusion® Angular components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. Explore Syncfusion® AI Coding Assistant

To get started quickly with Angular Stock Chart using CLI and Schematics, view the following video:

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion® Angular UI Components.

Setup the Angular application

A straightforward approach to begin with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Installing a specific version

To install a particular version of Angular CLI, use:

npm install -g @angular/[email protected]

Create a new application

With Angular CLI installed, execute this command to generate a new application:

ng new syncfusion-angular-app
  • This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]
  • By default, a CSS-based application is created. Use SCSS if required:
ng new syncfusion-angular-app --style=scss
  • During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Initial_setup

  • Select the required AI tool or ‘none’ if you do not need any AI tool.

Initial_setup

  • Navigate to your newly created application directory:
cd syncfusion-angular-app

Note: In Angular 19 and below, the CLI generates files like app.component.ts, app.component.html, app.component.css, etc. In Angular 20+, the CLI generates a simpler structure with src/app/app.ts, app.html, and app.css (no .component. suffixes).

Adding Syncfusion® Angular packages

Syncfusion®’s Angular component packages are available on npmjs.com. To use Syncfusion® Angular components, install the necessary package.

This guide uses the Angular Stock Chart component for demonstration. Add the Angular Stock Chart component with:

ng add @syncfusion/ej2-angular-charts

The above command will perform the following configurations:

  • Add the @syncfusion/ej2-angular-charts package and peer dependencies to your package.json.
  • Import the Stock Chart component in your application.

For more details on version compatibility, refer to the Version Compatibility section.

Syncfusion® offers two package structures for Angular components:

  1. Ivy library distribution package format
  2. Angular compatibility compiler (ngcc), which is Angular’s legacy compilation pipeline.
    Syncfusion®’s latest Angular packages are provided as Ivy-compatible and suited for Angular 12 and above. To install the package, execute: 
    ng add @syncfusion/ej2-angular-charts

    For applications not compiled with Ivy, use the ngcc tagged packages:

    The ngcc packages are still compatible with Angular CLI versions 15 and below. However, they may generate warnings suggesting the use of Ivy compiled packages. Starting from Angular 16, support for the ngcc package has been completely removed. If you have further questions regarding ngcc compatibility, please refer to the following FAQ.

npm add @syncfusion/[email protected]

Add Stock Chart component

Modify the template in app.component.ts file to render the Stock Chart component [src/app/app.component.ts].

import { Component, ViewEncapsulation } from '@angular/core';
import { ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [ChartAllModule, StockChartAllModule],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the Charts component
    template: `<ejs-stockchart id='chart-container'></ejs-stockchart>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent { }

Now use the app-root in the index.html instead of default one.

<app-root></app-root>
  • Now use the ng serve command to run the application in the browser.
ng serve

Module injection

Stock Chart components are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the app.component.ts. In the current application, we are going to modify the above basic Stock Chart to visualize the stock value of a company. For this application, we are going to use candle series, tooltip, data label, legend and datetime axis features of the Stock Chart. Please find the relevant feature service names and descriptions as follows:

  • CandleSeriesService - Inject this provider to use candle series.
  • LegendService - Inject this provider to use legend feature.
  • TooltipService - Inject this provider to use tooltip feature.
  • DataLabelService - Inject this provider to use datalabel feature.
  • DateTimeService - Inject this provider to use datetime feature.

Now import the above-mentioned modules from the chart package and inject them into the Stock Chart component through the provider section.

    import { Component } from '@angular/core';
    import { ChartAllModule, StockChartAllModule, DateTimeService, LegendService, TooltipService, DataLabelService, CandleSeriesService } from '@syncfusion/ej2-angular-charts';

    @Component({
        imports: [ChartAllModule, StockChartAllModule],
        standalone: true,
        providers: [ DateTimeService, LegendService, TooltipService, DataLabelService, CandleSeriesService ]
    })

Populate chart with data

This section explains how to plot the following JSON data to the Stock Chart.

    export class AppComponent implements OnInit {
    public chartData: 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
        }]
    }
}

Add a series object to the Stock Chart by using the series property and then set the JSON data to the dataSource property.

Since the JSON contains DateTime data, set the valueType for horizontal axis to DateTime. By default, the axis valueType is Numeric.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, CandleSeriesService} from '@syncfusion/ej2-angular-charts'



import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';

@Component({
imports: [
         ChartAllModule, StockChartAllModule
    ],

providers: [ DateTimeService, CandleSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-stockchart id="chart-container" >
        <e-stockchart-series-collection>
            <e-stockchart-series [dataSource]='stockchartData' type='Candle' xName='date' High='high' Low='low' Open='open' Close ='close' Name='Apple Inc'></e-stockchart-series>
        </e-stockchart-series-collection>
    </ejs-stockchart>`
})
export class AppComponent implements OnInit {
    public stockchartData?: Object[];
    ngOnInit(): void {
        // Data for stock chart
        this.stockchartData = chartData;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Add Stock Chart title

You can add a title using the title property to the Stock Chart to provide quick information to the user about the data plotted in the chart.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, CandleSeriesService} from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';

@Component({
imports: [
         ChartAllModule, StockChartAllModule
    ],

providers: [ DateTimeService, CandleSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-stockchart id="chart-container"
    [title]='title'>
        <e-stockchart-series-collection>
            <e-stockchart-series [dataSource]='stockchartData' type='Candle' xName='date' High='high' Low='low' Open='open' Close ='close' Name='Apple Inc'></e-stockchart-series>
        </e-stockchart-series-collection>
    </ejs-stockchart>`
})
export class AppComponent implements OnInit {
    public stockchartData?: Object[];
    public title?: string;
    ngOnInit(): void {
        // Title for stock chart
        this.title = 'AAPL Stock Price';
        this.stockchartData = chartData;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Add Stock Chart crosshair

Crosshair has a vertical and horizontal line to view the value of the axis at the mouse or touch position.

Crosshair lines can be enabled by using the enable property in the crosshair. Likewise tooltip label for an axis can be enabled by using enable property of crosshairTooltip in the corresponding axis.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, StockChartAllModule, ChartAllModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, CandleSeriesService, CrosshairService, TooltipService} from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';

@Component({
imports: [
         ChartModule, StockChartAllModule, ChartAllModule
    ],

providers: [ DateTimeService, CandleSeriesService, CrosshairService, TooltipService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-stockchart id="chart-container"
    [title]='title' [crosshair]='crosshair'>
        <e-stockchart-series-collection>
            <e-stockchart-series [dataSource]='stockchartData' type='Candle' xName='date' High='high' Low='low' Open='open' Close ='close' Name='Apple Inc'></e-stockchart-series>
        </e-stockchart-series-collection>
    </ejs-stockchart>`
})
export class AppComponent implements OnInit {
    public stockchartData?: Object[];
    public title?: string;
    crosshair?: Object;
    ngOnInit(): void {
        // Title for stock chart
        this.title = 'AAPL Historical';
        this.crosshair = { enable: true };
        this.stockchartData = chartData;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Trackball

Trackball is used to track a data point closest to the mouse or touch position. Trackball marker indicates the closest point and trackball tooltip displays the information about the point. To use trackball feature, we need to inject CrosshairService and TooltipService into the component’s providers array.

Trackball can be enabled by setting the enable property of the crosshair to true and the shared property in tooltip to true in the chart.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, CandleSeriesService } from '@syncfusion/ej2-angular-charts'
import { TooltipService, CrosshairService } from '@syncfusion/ej2-angular-charts'



import { Component, OnInit } from '@angular/core';

@Component({
imports: [
         ChartModule, StockChartAllModule, ChartAllModule
    ],

providers: [ DateTimeService, CandleSeriesService,
                 TooltipService, CrosshairService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [crosshair]='crosshair' [tooltip]='tooltip'>
        <e-stockchart-series-collection>
            <e-stockchart-series [dataSource]='chartData' type='Line' xName='x' yName='y' name='John' width=2 [marker]='marker'></e-stockchart-series>
            <e-stockchart-series [dataSource]='chartData' type='Line' xName='x' yName='y1' name='Andrew' width=2 [marker]='marker'></e-stockchart-series>
            <e-stockchart-series [dataSource]='chartData' type='Line' xName='x' yName='y2' name='Thomas' width=2 [marker]='marker'></e-stockchart-series>
            <e-stockchart-series [dataSource]='chartData' type='Line' xName='x' yName='y3' name='Mark' width=2 [marker]='marker'></e-stockchart-series>
            <e-stockchart-series [dataSource]='chartData' type='Line' xName='x' yName='y4' name='William' width=2 [marker]='marker'></e-stockchart-series>
        </e-stockchart-series-collection>
    </ejs-stockchart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public crosshair?: Object;
    public title?: string;
    public tooltip?: Object;
    public marker?: Object;
    primaryYAxis: any;
    ngOnInit(): void {
        this.chartData = [
            { x: new Date(2000, 2, 11), y: 15, y1: 39, y2: 60, y3: 75, y4: 85 },
            { x: new Date(2000, 9, 14), y: 20, y1: 30, y2: 55, y3: 75, y4: 83 },
            { x: new Date(2001, 2, 11), y: 25, y1: 28, y2: 48, y3: 68, y4: 85 },
            { x: new Date(2001, 9, 16), y: 21, y1: 35, y2: 57, y3: 75, y4: 87 },
            { x: new Date(2002, 2, 7), y: 13, y1: 39, y2: 62, y3: 71, y4: 82 },
            { x: new Date(2002, 9, 7), y: 18, y1: 41, y2: 64, y3: 69, y4: 74 },
            { x: new Date(2003, 2, 11), y: 24, y1: 45, y2: 57, y3: 81, y4: 73 },
            { x: new Date(2003, 9, 14), y: 23, y1: 48, y2: 53, y3: 84, y4: 75 },
            { x: new Date(2004, 2, 6), y: 19, y1: 54, y2: 63, y3: 85, y4: 73 },
            { x: new Date(2004, 9, 6), y: 31, y1: 55, y2: 50, y3: 87, y4: 60 },
            { x: new Date(2005, 2, 11), y: 39, y1: 57, y2: 66, y3: 75, y4: 48 },
            { x: new Date(2005, 9, 11), y: 50, y1: 60, y2: 65, y3: 70, y4: 55 },
            { x: new Date(2006, 2, 11), y: 24, y1: 60, y2: 79, y3: 85, y4: 40 }
        ];
        this.primaryXAxis = {
            title: 'Years',
            minimum: new Date(2000, 1, 1), maximum: new Date(2006, 2, 11),
            intervalType: 'Years',
            valueType: 'DateTime',
        };
        this.tooltip = { enable: true, shared: true, format: '${series.name} : ${point.x} : ${point.y}' };
        this.crosshair = { enable: true, lineType: 'Vertical' };
        this.marker = { visible: true };
        this.title = 'Average Sales per Pern';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can refer to our Angular Stock Chart feature tour page for its groundbreaking feature representations. You can also explore our Angular Stock Chart example that shows you how to present and manipulate data.