You can add or remove the chart series dynamically by using the addSeries
or removeSeries
method.
To add or remove the series dynamically, follow the given steps:
Step 1:
To add a new series to chart dynamically, pass the series value to the addSeries
method.
To remove the new series from chart dynamically, pass the series index to the removeSeries
method.
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartComponent } from '@syncfusion/ej2-angular-charts';
@Component({
selector: 'app-container',
template:
`<ejs-chart #chart id='chartcontainer' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
[title]='title' >
<e-series-collection>
<e-series [dataSource]='data' type='Column' xName='x' yName='y' > </e-series>
</e-series-collection>
</ejs-chart>
<button ejs-button class='e-flat' (click)='add()'>add </button>
<button ejs-button class='e-flat' (click)='remove()'>remove </button>`
})
export class AppComponent implements OnInit {
public primaryXAxis: Object;
public title: string;
public primaryYAxis: Object;
public data: Object[];
@ViewChild('chart')
public chart: ChartComponent;
ngOnInit(): void {
this.data = [{ x: 'John', y: 10000 }, { x: 'Jake', y: 12000 }, { x: 'Peter', y: 18000 },
{ x: 'James', y: 11000 }, { x: 'Mary', y: 9700 }];
this.primaryXAxis = {
title: 'Manager',
valueType: 'Category'
};
this.primaryYAxis = {
title: 'Sales',
minimum: 0,
maximum: 20000
};
this.title = 'Sales Comparision';
}
add() {
this.chart.addSeries([{
type: 'Column',
dataSource: [{ x: 'John', y: 11000 }, { x: 'Jake', y: 16000 }, { x: 'Peter', y: 19000 },
{ x: 'James', y: 12000 }, { x: 'Mary', y: 10700 }],
xName: 'x', width: 2,
yName: 'y'
}]);
}
remove() {
this.chart.removeSeries(1);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule} from '@syncfusion/ej2-angular-charts';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { CategoryService, ColumnSeriesService, ExportService, LegendService, DataLabelService} from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule, ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ CategoryService, ColumnSeriesService,ExportService, LegendService, DataLabelService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);