#5. How to use Stacked Area Line Echarts with Angular 10

Read time : 8-10 minutes

Step-1 : Create a Angular 10 Project .

If you haven't created an Angular 10 project yet then visit the following link otherwise skip this step.

CLICK HERE TO VISIT.

Step-2 : Integrate of Echarts with Angular 10 .

If you haven't integrated Echarts with an Angular 10 project yet then visit the following link otherwise skip this step.

CLICK HERE TO VISIT.

Step-3 : Create Component (Create html , scss and ts file).

Please find the component which I have created for Stacked area line chart with code

	<div fxLayoutGap="1rem" fxLayout="column">
	<mat-checkbox [(ngModel)]="_isDarkmode" (change)="ngOnInit()">Dark mode</mat-checkbox>
	<div echarts [options]="_echartOption" [theme]="_theme"></div>
	</div>

view raw stacked-area-chart.component.html hosted with ❤ by GitHub

NO CODE CHANGES.

view raw stacked-area-chart.component.scss hosted with ❤ by GitHub

	import { Component, OnInit, OnDestroy } from '@angular/core';
	import { EchartService } from 'src/app/common/service/echart.service';
	import { Subscription } from 'rxjs';
	import { EChartOption } from 'echarts';
	import { StackedLineEchartmodel } from 'src/app/common/model/echart.model';
	@Component({
	selector: 'app-stacked-area-chart',
	templateUrl: './stacked-area-chart.component.html',
	styleUrls: ['./stacked-area-chart.component.scss']
	})
	export class StackedAreaChartComponent implements OnInit, OnDestroy {
	_isDarkmode: boolean = false;
	_theme: string;
	_echartOption: EChartOption;
	subscription: Subscription;
	constructor(private echartService: EchartService) { }
	ngOnInit(): void {
	this.subscription = this.echartService.getStackedLineEchartData().subscribe(data => {
	this._initStackedLineEchart(data);
	})
	}
	ngOnDestroy() {
	if (this.subscription) {
	this.subscription.unsubscribe();
	}
	}
	_initStackedLineEchart(chartData: StackedLineEchartmodel[]) {
	this._theme = this._isDarkmode ? 'dark' : '';
	this._echartOption = {
	tooltip: {
	show: true
	},
	xAxis: {
	type: 'category',
	boundaryGap: false,
	data: chartData[0].value.map(m => ({
	value: m.name
	}))
	},
	yAxis: [{
	type: 'value'
	}],
	series: chartData.map(m => ({
	name: m.name,
	type: 'line',
	stack: 'stack',
	areaStyle: {},
	data: m.value.map(m => ({
	value: m.value
	}))
	}))
	};
	}
	}

view raw stacked-area-chart.component.ts hosted with ❤ by GitHub

Step-4 : Create Service file to get data from service.

	import { Injectable } from '@angular/core';
	import { HttpClient } from "@angular/common/http";
	import { Observable } from 'rxjs';
	import { BasicEchartLineModel, StackedLineEchartmodel } from '../model/echart.model';
	@Injectable()
	export class EchartService {
	constructor(private httpClient: HttpClient) { }
	getStackedLineEchartData() :Observable<StackedLineEchartmodel[]>{
	return this.httpClient.get<StackedLineEchartmodel[]>('assets/echart/stacked-area-chart-data.json');
	}
	}

view raw echart.service.ts hosted with ❤ by GitHub

Step-5 : Create model class to map service value into model properties.

	export interface StackedLineEchartmodel{
	name : string ;
	value : BasicEchartLineModel[];
	}
	export interface BasicEchartLineModel {
	name: string;
	value: number;
	}

view raw echart.model.ts hosted with ❤ by GitHub

Step-6 : Create .json file  under asset folder and also add some dummy json data required for echarts.

NOTE : We have called  this file to get data using get service under echart.service.ts.

	[
	{
	"name": "Series 1",
	"value": [
	{
	"name": "Monday",
	"value": 120
	},
	{
	"name": "Tuesday",
	"value": 132
	},
	{
	"name": "Wednesday",
	"value": 101
	},
	{
	"name": "Thrusday",
	"value": 135
	},
	{
	"name": "Friday",
	"value": 90
	},
	{
	"name": "Saturday",
	"value": 230
	},
	{
	"name": "Sunday",
	"value": 310
	}
	]
	},
	{
	"name": "Series 2",
	"value": [
	{
	"name": "Monday",
	"value": 220
	},
	{
	"name": "Tuesday",
	"value": 182
	},
	{
	"name": "Wednesday",
	"value": 191
	},
	{
	"name": "Thrusday",
	"value": 234
	},
	{
	"name": "Friday",
	"value": 290
	},
	{
	"name": "Saturday",
	"value": 330
	},
	{
	"name": "Sunday",
	"value": 310
	}
	]
	},
	{
	"name": "Series 3",
	"value": [
	{
	"name": "Monday",
	"value": 150
	},
	{
	"name": "Tuesday",
	"value": 232
	},
	{
	"name": "Wednesday",
	"value": 201
	},
	{
	"name": "Thrusday",
	"value": 154
	},
	{
	"name": "Friday",
	"value": 190
	},
	{
	"name": "Saturday",
	"value": 330
	},
	{
	"name": "Sunday",
	"value": 410
	}
	]
	}
	]

view raw stacked-area-chart-data.json hosted with ❤ by GitHub

Step-7 : Add entries of components , services etc into module file.

	import { BrowserModule } from '@angular/platform-browser';
	import { NgModule } from '@angular/core';
	import { AppRoutingModule } from './app-routing.module';
	import { AppComponent } from './app.component';
	import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
	import { FormsModule } from '@angular/forms';
	import { HttpClientModule } from "@angular/common/http";
	import { StackedAreaChartComponent } from './echarts/line/stacked-area-chart/stacked-area-chart.component';
	import { NgxEchartsModule } from 'ngx-echarts';
	import { EchartService } from './echarts/echart.service';
	@NgModule({
	declarations: [
	AppComponent,
	StackedAreaChartComponent
	],
	imports: [
	FormsModule,
	HttpClientModule,
	BrowserModule,
	AppRoutingModule,
	BrowserAnimationsModule,
	NgxEchartsModule
	],
	providers: [EchartService],
	bootstrap: [AppComponent]
	})
	export class AppModule { }

view raw app.module.ts hosted with ❤ by GitHub

Conclusion : 

This is all about Stacked area line echarts. But note this is not the full source code , this is just a major piece of code .

To get the full source code please click on the following link.

Full Source Code

---

See Project Demo : 

https://dorado2041.github.io/echarts-angular-project-deployed/

Find Source Code :

https://github.com/dorado2041/echarts-angular-project

For more updates please follow us on :

Twitter      : https://www.twitter.com/dorado2041

Facebook  : https://www.facebook.com/dorado2041

Instagram : https://www.instagram.com/dorado2041

Blogger      : https://doradosolutions.blogspot.com

Youtube      : https://www.youtube.com/channel/UCgATTiSoP15uQL37se2cCpA