How to get started easily with Syncfusion Angular 13 Chart?

2 mins read

Syncfusion Angular UI (Essential JS 2) is a collection of modern TypeScript based true Angular components. The Chart component is developed from the ground up to be lightweight, responsive, modular and touch-friendly.

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.

You can use the Angular CLI to setup your Angular applications.

To install Angular CLI, use the following command.

npm install -g @angular/cli@13.0.1

Create an Angular application

Start a new Angular application using the Angular CLI command as follows.

ng new angular13-app

cd angular13-app

Adding Syncfusion Chart package

All the available Essential JS 2 packages are published in npmjs.com registry.

To install Chart component, use the following command.

npm install @syncfusion/ej2-angular-charts --save

Note:

The --save will instruct NPM to include the Chart package inside the dependencies section of the package.json.

Registering Chart module

Import Chart module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-charts.

[src/app/app.module.ts]

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

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

import { CategoryService, LineSeriesService} from '@syncfusion/ej2-angular-charts';

 

/**

 * Module

 */

@NgModule({

    imports: [

        BrowserModule, ChartModule

    ],

    declarations: [AppComponent],

    bootstrap: [AppComponent],

    providers: [ CategoryService, LineSeriesService]

})

export class AppModule { }

Adding CSS reference

The following CSS files are available in ../node_modules/@syncfusion package folder. This can be referenced in [src/styles.css] using the following code.

/* You can add global styles to this file, and also import other style files */

 

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';

Add Chart component

Modify the template in [src/app/app.component.ts] file to render the Chart component. Add the Angular Chart by using <ejs-chart> selector in template section of the app.component.ts file.

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

@Component({

selector: 'app-root',

template:

`<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'>

    <e-series-collection>

        <e-series [dataSource]='chartData' type='Line' xName='month' yName='sales' name='Sales'></e-series>

    </e-series-collection>

</ejs-chart>`

})

export class AppComponent implements OnInit {

public primaryXAxis!: Object;

public chartData!: Object[];

ngOnInit(): void {

    // Data for chart series

    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'

    };

}

 

}

Then run ng serve for serving sample.

UG link: https://ej2.syncfusion.com/angular/documentation/chart/getting-started/

Example Sample: https://github.com/SyncfusionExamples/ej2-angular-13-chart

Did you find this information helpful?

Yes