Getting Started with Angular Chart Component

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

Ready to streamline your Syncfusion® Angular development? Discover the full potential of 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 Chart using CLI and Schematics, view the following video:

Prerequisites

Install the Syncfusion CLI

Install the Syncfusion CLI globally using the following command:

npm install -g @syncfusion/syncfusion-cli

Create a new Angular application using Syncfusion CLI

You can create a Angular application using the Syncfusion CLI. The CLI provides two ways to create a project:

Non-interactive mode

Non-interactive mode allows you to create a project directly using a single command with the required command-line arguments.

sf new syncfusion-angular-app --framework angular --template chart

In this mode, the project configuration is passed directly in the command. The above command creates a Angular application configured with the Syncfusion® Chart component.

Interactive mode

Interactive mode guides you through the project creation process with step-by-step prompts.

sf

When you run the sf command, the CLI prompts you to select the required project configuration. To create a Angular application with the Syncfusion® Chart component, select the following options:

√ Project name? ... syncfusion-angular-app
√ Choose Framework: » Angular
√ Choose Template: » Chart
√ Choose Theme: » Material3
√ Choose Style Format: » CSS
√ Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project? ... no
√ Would you like to install Syncfusion Component Skills for AI-powered development? ... no
√ Install dependencies and start app now? ... no

The above selections generate a Angular application configured with the Syncfusion® Chart component. You can choose different values for language, theme, style format, MCP setup, and skills installation based on your project requirements.

The Syncfusion® CLI creates the project with a predefined template. After the project is generated, you can customize or replace the component code based on your application requirements.

Run the project

Once the project is created, navigate to the project directory and run the following commands in your terminal.

cd syncfusion-angular-app
npm install
ng serve

The output will appear as follows:

Chart Component

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 ChartModule 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-chart-app

This command creates the my-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-chart-app

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

Step 3: Install the Syncfusion® Angular 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: Register the Chart module and add the component

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

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

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChartModule],
  template: `<ejs-chart id='chart-container'></ejs-chart>`
})
export class App {}

This renders an empty 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 chart renders before proceeding to the next step.

Step 5: Create your first Chart with data source and series type

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

The following example demonstrates how to visualize monthly sales data using a line chart. It also shows how to configure the horizontal axis and map data fields using the primaryXAxis, dataSource, xName, and yName properties.

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

import { Component, OnInit } from '@angular/core';
import {
  ChartModule,
  CategoryService,
  LineSeriesService,
} from '@syncfusion/ej2-angular-charts';
import { AxisModel } from '@syncfusion/ej2-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChartModule],
  providers: [CategoryService, LineSeriesService],
  template: `
        <ejs-chart
            id="chart-container"
            [primaryXAxis]='primaryXAxis'>
            <e-series-collection>
                <e-series
                    [dataSource]='chartData'
                    type='Line'
                    xName='month'
                    yName='sales'>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    `,
})
export class App implements OnInit {
  public primaryXAxis?: AxisModel;
  public chartData?: Object[];
  ngOnInit(): void {
    this.chartData = [
      { month: 'Jan', sales: 35 },
      { month: 'Feb', sales: 28 },
      { month: 'Mar', sales: 34 },
      { month: 'Apr', sales: 32 },
      { month: 'May', sales: 40 },
      { month: 'Jun', sales: 32 },
      { month: 'Jul', sales: 35 },
      { month: 'Aug', sales: 55 },
      { month: 'Sep', sales: 38 },
      { month: 'Oct', sales: 30 },
      { month: 'Nov', sales: 25 },
      { month: 'Dec', sales: 32 },
    ];
    this.primaryXAxis = {
      valueType: 'Category',
    };
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app';
import 'zone.js';
bootstrapApplication(App).catch((err) => console.error(err));

The chart renders a line with the month names (Jan–Dec) on the horizontal axis and the sales values on the vertical axis. Hovering over a data point displays a tooltip with the corresponding month and sales value.

The following table summarizes the key properties used in this example:

Properties Description
primaryXAxis Defines the configuration of the horizontal axis.
dataSource Provides the JSON data used to render the chart.
type Specifies the chart series type, such as Line, Column, or Bar.
xName Maps the category field (for example, month) from the data source to the x-axis.
yName Maps the data field (for example, sales) from the data source to the y-axis.
<e-series-collection> and <e-series> Directives used to define and render one or more series in the chart.

Step 6: 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 line chart showing monthly sales from January to December, as shown below:

Line chart showing monthly sales from January to December

Troubleshooting

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

  • “No provider for CategoryService” error: Confirm that CategoryService and LineSeriesService are added to the component’s providers array. Each chart series type requires its corresponding service.
  • Chart not visible: Verify that the <ejs-chart> element has a unique id and that the component’s selector matches the root element used in src/index.html (commonly <app-root>).
  • Data not displayed: Check that the xName and yName values match the field names in your data source exactly, and that the dataSource is assigned before the chart renders.
  • 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