Getting Started with Angular Stock Chart Component

27 Jul 202616 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.

Before You Begin

This guide uses the standalone application structure generated by the latest Angular CLI.

The main files used in this guide are:

  • src/app/app.ts — Defines the root standalone component.
  • src/index.html — Contains the Angular root element.

Note: In newer Angular CLI standalone projects, the root component may be generated as src/app/app.ts. In NgModule-based Angular projects, the equivalent file is typically src/app/app.component.ts.

Note: If your application uses an older NgModule-based structure, import StockChartModule in the application module, such as app.module.ts, instead of adding it to the standalone component imports collection.

Step 1: Install the Angular CLI

Use Angular CLI to create and manage Angular applications. Install Angular CLI globally using the following command:

npm install -g @angular/cli

Verify the installation:

ng version

Step 2: Create an Angular application

Create a new Angular application using the following non-interactive command:

ng new my-stock-chart-app --style=css --ssr=false --defaults

This command creates the my-stock-chart-app folder and applies the recommended options (CSS stylesheet, no SSR, and default settings). If you prefer interactive prompts, choose the following options:

  • Stylesheet system: Choose any option. This guide uses CSS for simplicity and applies the Syncfusion Tailwind 3 theme via CSS imports.
  • SSR and SSG/Pre-rendering: Select No.
  • AI tools configuration: Select None.

Navigate to the project folder:

cd my-stock-chart-app

Open the project in Command Prompt, PowerShell, or Terminal before proceeding to the next step.

Step 3: Install the Syncfusion® Angular Stock Chart package

All Syncfusion Essential® JS 2 packages are available in the npmjs.com registry. The Angular Chart package can be installed using the following command:

npm install @syncfusion/ej2-angular-charts

Note: Installing @syncfusion/ej2-angular-charts automatically installs the required dependency packages.

Step 4: Adding 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";

Step 5: Register the Stock Chart module

Import StockChartModule from @syncfusion/ej2-angular-charts and add it to the imports collection of the standalone component. Then, add the Angular Stock Chart component using the <ejs-stockchart> selector in the component template.

Update the src/app/app.ts file as follows:

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 App {}

This renders an empty stock chart in the application’s view.

Note: The component selector must match the root element used in the src/index.html file. Angular CLI commonly uses <app-root></app-root>, so this example uses selector: 'app-root'.

Run the application with npm start and verify that an empty stock chart renders before proceeding to the next step.

Step 6: Populate the chart with data and add a series

This section explains how to create a simple stock chart by binding financial data, configuring the time-based axis, and rendering a series using the Angular Stock Chart component.

The following example demonstrates how to visualize stock price data using a candle series. It also shows how to configure the horizontal axis for date-time values and map financial data fields using the dataSource, xName, open, high, low, close, and volume properties.

Update the src/app/app.ts file as follows:

import { Component, OnInit } from '@angular/core';
import { StockChartModule, DateTimeService, CandleSeriesService } from '@syncfusion/ej2-angular-charts';
import { AxisModel } from '@syncfusion/ej2-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 App implements OnInit {
    public primaryXAxis?: AxisModel;
    public stockchartData?: Object[];
    ngOnInit(): void {
        this.stockchartData = [
            {
                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
            }
        ];
        this.primaryXAxis = {
            valueType: 'DateTime'
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app';
import 'zone.js';
bootstrapApplication(App).catch((err) => console.error(err));

The chart renders a candle series with one candle per week showing the open, high, low, and close prices for the period from April to June 2012. The horizontal axis displays dates, and the vertical axis shows the price. Hovering over a candle displays a tooltip with the date and OHLC values.

Step 7: 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. The application displays a candle stock chart showing weekly price data from April to June 2012, as shown below:

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

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