#1. How to integrate Echarts with Angular 10

Read time : 8-10 minutes

Step-1 : Create a Angular 10 project .

Note : If you are not aware how to create Angular 10 then please visit the following link.

CLICK HERE TO VISIT

Step-2 : Installation of  Echarts with Angular 10 project.

Run the following command if you are using npm

	npm install echarts -S
	npm install ngx-echarts -S
	npm install @types/echarts -D

view raw installation-command-npm.txt hosted with ❤ by GitHub

OR

Run the following command if you are using yarn

	yarn add echarts
	yarn add ngx-echarts
	yarn add @types/echarts -D

view raw installation-command-yarn.txt hosted with ❤ by GitHub

After installing the above plugin , You will find 3 entries for echarts, ngx-echarts and @types/echarts under package.json file. 

NOTE : Plugin version may differ with the time , Above npm or yarn command will always install the latest version of plugin.

See my package.json

Step-3 : Add ngx-echart entry into app.module.ts .

	import { NgxEchartsModule } from 'ngx-echarts';
	// import your component
	@NgModule({
	declarations: [
	AppComponent
	],
	imports: [
	NgxEchartsModule
	]
	})

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

Conclusion :  

Echart has been successfully integrated with Angular 10 . Now we can use any charts provided by Echarts . 

In out next post we will see how to use different Echarts with Angular 10.

See how to integrate Basic line Echarts with Angular 10.     

---

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