This section explains you the steps required to create a simple Chart and demonstrate the basic usage of the AccumulationChart component in an Angular environment.
You can use Angular CLI
to setup your Angular applications.
To install Angular CLI use the following command.
npm install -g @angular/cli
Start a new Angular application using below Angular CLI command.
ng new my-app
cd my-app
All the available Essential JS 2 packages are published in npmjs.com
registry.
To install AccumulationChart component, use the following command.
npm install @syncfusion/ej2-angular-charts --save
The —save will instruct NPM to include the chart package inside of the
dependencies
section of thepackage.json
.
Import AccumulationChart 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 the AccumulationChartModule for the AccumulationChart component
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { AppComponent } from './app.component';
@NgModule({
//declaration of AccumulationChartModule into NgModule
imports: [ BrowserModule, AccumulationChartModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.ts
file to render the ej2-angular-charts
component
[src/app/app.component.ts]
.import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-container',
// specifies the template string for the Accumulation Charts component
template: `<ejs-accumulationchart id="pie-container">
</ejs-accumulationchart>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent { }
Now use the app-container
in the index.html instead of default one.
<app-container></app-container>
npm start
Pie Series
By default pie series will be rendered on assigning JSON data to the series by using
dataSource
property. Map the field names
in the JSON data to the xName
and
yName
properties of the series.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-container',
template:
`<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings'>
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]='piedata' xName='x' yName='y'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public piedata: Object[];
public legendSettings: Object;
ngOnInit(): void {
this.piedata = [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' },
{ x: 'Nov', y: 9, text: 'Nov: 9' }, { x: 'Dec', y: 3.5, text: 'Dec: 3.5' }];
this.legendSettings = {
visible: false
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);