How to get started easily with Syncfusion Angular 14 Charts?
A quick start project that helps you to create an Angular 14 Chart with minimal code configuration.
Chart features covered in this Project
This is an Angular 14 project created using CLI 14.3.1 The Chart features listed in this project are as follows.
- Angular 11 chart visualizing the data in column series.
- Building other series type.
- Setting legend for chart.
- Displaying labels for data.
- Setting tooltip for chart.
Project Prerequisites
Make sure that you have compatible versions of Typescript and Angular in your machine before starting to work on this project.
- Node.js (latest vesion)
- Angular 14
- Angular CLI
- Typescript 4+
- Visual Studio Code for Editor
Angular 14 Charts – Introduction
The Angular 14 Charts used in this project is created from the Syncfusion `ej2-angular-charts` package. You can simply define Chart as <ejs-chart> within the template.
Dependencies
Before starting with this project, the Angular 14 Charts requires adding the Syncfusion `ej2-angular-charts` package from npmjs, which are distributed in npm as @syncfusion scoped packages.
Creating An Angular Application
- To create an Angular application, install the Angular CLI globally using the following command.
npm install @angular/cli@14.3.1
- Then create a new Angular application using the following command.
ng new angular11-app
cd angular11-app
This command downloads all the files needed and initializes the npm installation.
Installing the chart component
- After the Angular application has been created, use the following command to install the chart package.
npm install @syncfusion/ej2-angular-charts --save
The –save flag saves the charts package as a dependency in the package.json file.
- All configuration related to environment setup is now complete. Before configuring the chart, a component is needed to render the chart. To create an angular component , use the following Angular CLI command.
ng generate component chart
- Next, improve the chart module in the app.module.ts file.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ChartComponent } from './chart/chart.component';
import { ChartModule } from '@syncfusion/ej2-angular-charts’;
@NgModule ({
declarations: [AppComponent,ChartComponent],
imports: [BrowserModule, ChartModule],
bootstrap: [AppComponent]
})
export class AppModule { }
Creating the chart component
<ejs-chart></ejs-chart>
Then, add the chart component in the app.component.html file.
<app-chart></app-chart>
Go to the application directory and launch the server by using following command.
ng serve --open
After all the files are compiled successfully, the basic chart should look like the following figure.
Injecting modules
Now we have the basic chart without data. Before providing some data to it, let’s learn more about the chart types that Syncfusion supports.
The Syncfusion chart component can plot more than 30 chart types. Each type is modularized and available as a separate service, so you can use only the modules you need, to keep your app lightweight. For example, if you want to visualize data with a column chart, define the columnSeriesService in the providers of the app.module.ts file. This service provides access to the column chart functionality.
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts';
@NgModule({
imports: [ BrowserModule, ChartModule ],
providers: [CategoryService, ColumnSeriesService ]
})
After the columnSeriesService is injected in the providers, set the series type as Column and populate the data in the chart by using the dataSource property, which accepts a JavaScript object.
import {Component, OnInit } from '@angular/core';
@Component({
selector: 'app-chart',
template:`<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis">
<e-series-collection>
<e-series [dataSource]="chartData" type="Column" xName="year" yName="gold" name="Gold">
</e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public chartData: Object [];
public primaryXAxis: Object;
ngOnInit(): void {
// Data for chart series
this.chartData = [
{ year:'2000', gold: 35, silver: 25 }, { year: '2001', gold: 28, silver: 20 },
{ year:'2002', gold: 34, silver: 21 }, { year: '2003', gold: 32, silver: 15 },
{ year:'2004', gold: 40, silver: 30 }
];
this.primaryXAxis = { valueType: 'Category' };
}
}
The populated column chart will look something like this:
Building other chart types
Implementing other chart types is very similar to implementing the column chart. If you want an area or line chart, just inject its corresponding services in the providers and change the series type.
`<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis" >
<e-series [dataSource]="chartData" type="Column" xName="year" yName="gold" name="Gold">
<e-series [dataSource]="chartData" type="Line" xName="year" yName="silver" name="Silver">
</ejs-chart>`
Legend
After defining the LegendService in providers. Now we can access legend functionality from chart. To enable legend in chart, set the visible property in legend to true.
`<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis" [legendSettings]="legendSettings">
<e-series [dataSource]="chartData" type="Column" legendShape="Circle" xName="year" yName="gold" name="Gold">
</ejs-chart>`
export class AppComponent implements OnInit {
public legendSettings: Object;
ngOnInit(): void {
this.legendSettings = {visible : true};
}
}
Datalabel
Data labels are designed for situations where you want to improve the readability of your data. You can access the data label functionality by injecting the DataLabelService in the providers and enabling the visible property in the data labels.
`<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis" [legendSettings]="legendSettings">
<e-series [dataSource]="chartData" type="Column" legendShape="Circle" xName="year" yName="gold" name="Gold" [marker]="columnMarker">
</ejs-chart>`
export class AppComponent implements OnInit {
public columnMarker : Object;
ngOnInit(): void {
this.columnMarker = { dataLabel : { visible :true, position: 'Top'}};
}
}
Tooltip
You can also provide more information about chart data points when pointing to them by using tooltip. To make use of the tooltip functionality, just inject the TooltipService in the provider and enable the tooltip by setting the enable property to true.
`<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis" [legendSettings]="legendSettings" [tooltip]="tooltip">
<e-series [dataSource]="chartData" type="Column" legendShape="Circle" xName="year" yName="gold" name="Gold" [marker]="columnMarker">
</ejs-chart>`
export class AppComponent implements OnInit {
public tooltip : Object;
ngOnInit(): void {
this.tooltip = {enable : true};
}
}
Run the application with the command “ng serve” in command prompt and you will be able to view the Angular Chart output.
There are more options to explore with Angular 14 Chart and you can also try playing with the downloadable example link in this knowledge base article.
Github Source Link: https://github.com/SyncfusionExamples/ej2-angular-14-charts
