Getting Started with Angular Stock Chart Component

30 Jul 202611 minutes to read

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

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

Before getting started, ensure that your environment meets the system requirements for Syncfusion® Angular UI components, which covers supported Node.js, Angular, and @syncfusion/ej2-angular-charts versions.

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

Verify the installation:

ng version

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 an Angular application

With Angular CLI installed, execute the following 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.

SSR

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

AI

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

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 similar structure with src/app/app.component.ts, app.component.html, and app.component.css. This guide uses the modern standalone architecture and follows the app.component.ts convention throughout.

Adding the Syncfusion® Angular Stock Chart package

To install the Syncfusion® Angular Stock Chart package, use the following command:

ng add @syncfusion/ej2-angular-charts

The ng add command installs the package, registers it in package.json, and configures the required entries in your workspace automatically.

If ng add is unavailable in your setup, install the package manually with:

npm install @syncfusion/ej2-angular-charts

Add CSS References

Syncfusion® Angular Stock Chart component themes can be applied using CSS or SASS from the npm theme packages. Themes can also be applied via CDN, CRG, or Theme Studio. For more information, refer to the themes documentation.

This example uses the Material 3 theme for the Stock Chart component. To install the theme package, use the following command:

npm install @syncfusion/ej2-material3-theme

Reference the theme CSS in src/styles.css as follows:

@import "@syncfusion/ej2-material3-theme/styles/stock-chart/index.css";

Add Syncfusion® Stock Chart component

Modify the template in src/app/app.component.ts (or src/app/app.ts in Angular 20+) to render the Stock Chart component:

import { Component } from '@angular/core';
import { StockChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [StockChartModule],
    template: `<ejs-stockchart id="stock-chart-container"></ejs-stockchart>`
})
export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Module Injection

Stock Chart components are segregated into individual feature-wise modules. To use a particular feature, you need to inject its feature service in src/app/app.ts (Angular 20+) or src/app/app.component.ts (Angular 19 and below). This example will use the candle series feature of the stock chart.

  • DateTimeService - Inject this provider to use the date-time axis.
  • CandleSeriesService - Inject this provider to render the candle series.

Replace the contents of src/app/app.component.ts (or src/app/app.ts on Angular 20+ and below) with the following:

import { Component } from '@angular/core';
import { StockChartModule, DateTimeService, CandleSeriesService } from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [StockChartModule],
    providers: [DateTimeService, CandleSeriesService],
    template: `<ejs-stockchart id="stock-chart-container"></ejs-stockchart>`
})
export class App {
}

Bind data to the Stock Chart

This section explains how to plot financial data to the Stock Chart. Replace the contents of src/app/app.ts (Angular 20+) or src/app/app.component.ts (Angular 19 and below) with the following:

import { Component } from '@angular/core';
import { StockChartModule, DateTimeService, CandleSeriesService } from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [StockChartModule],
    providers: [DateTimeService, CandleSeriesService],
    template: `
        <ejs-stockchart
            id="stock-chart-container"
            [primaryXAxis]='primaryXAxis'
        >
            <e-stockchart-series-collection>
                <e-stockchart-series
                    [dataSource]='stockchartData'
                    type='Candle'
                    xName='date'
                    high='high'
                    low='low'
                    open='open'
                    close='close'
                    volume='volume'
                >
                </e-stockchart-series>
            </e-stockchart-series-collection>
        </ejs-stockchart>
    `
})
export class AppComponent {
    public primaryXAxis: Object = {
        valueType: 'DateTime'
    };
    public stockchartData: Object[] = [
        { date: new Date('2012-04-02'), open: 85.9757, high: 90.6657, low: 85.7685, close: 90.5257, volume: 660187068 },
        { date: new Date('2012-04-09'), open: 89.4471, high: 92,      low: 86.2157, close: 86.4614, volume: 912634864 },
        { date: new Date('2012-04-16'), open: 87.1514, high: 88.6071, low: 81.4885, close: 81.8543, volume: 1221746066 },
        { date: new Date('2012-04-23'), open: 81.5157, high: 88.2857, low: 79.2857, close: 86.1428, volume: 965935749 },
        { date: new Date('2012-04-30'), open: 85.4,    high: 85.4857, low: 80.7385, close: 80.75,   volume: 615249365 },
        { date: new Date('2012-05-07'), open: 80.2143, high: 82.2685, low: 79.8185, close: 80.9585, volume: 541742692 },
        { date: new Date('2012-05-14'), open: 80.3671, high: 81.0728, low: 74.5971, close: 75.7685, volume: 708126233 },
        { date: new Date('2012-05-21'), open: 76.3571, high: 82.3571, low: 76.2928, close: 80.3271, volume: 682076215 },
        { date: new Date('2012-05-28'), open: 81.5571, high: 83.0714, low: 80.0743, close: 80.1414, volume: 480059584 },
        { date: new Date('2012-06-04'), open: 80.2143, high: 82.9405, low: 78.3571, close: 82.9028, volume: 517577005 }
    ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Candle stock chart showing weekly price data from April to June 2012

Run the application

Run the application using the following command:

npm start

Open the generated local URL (for example, http://localhost:4200/) from the terminal in the browser.

Troubleshooting

If the stock chart does not render as expected, check for these common issues:

  • “No provider for DateTimeService” error: Confirm that DateTimeService and CandleSeriesService are added to the component’s providers array. Each stock chart series type requires its corresponding service.
  • Chart not visible: Verify that the <ejs-stockchart> element has a unique id and that the component’s selector matches the root element used in src/index.html (commonly <app-root>).
  • Date axis not displaying correctly: Confirm that primaryXAxis.valueType is set to DateTime and that the date field in your data source is a valid JavaScript Date object.
  • Data not displayed: Check that the xName, high, low, open, close, and volume values match the field names in your data source exactly.
  • Build errors: Run ng version to confirm that Node.js, Angular CLI, and @syncfusion/ej2-angular-charts are on supported versions, and check the terminal output for the specific error.
  • Port already in use: If npm start fails because port 4200 is in use, run ng serve --port 4201 (or another free port) instead.

See also