Data visualization with ECharts in an Angular project using
ngx-echarts is pretty simple. In this post, I am going to share how to use ECharts in Angular projects.
Create new Angular Project
The creation of your first Angular project has become very simple because of the handy Angular CLI. Open your CMD and run the following command.
To explore more on how to create a new angular project click here.
Run the following npm commands to install
npm install echarts -S npm install ngx-echarts -S
Import the package in your project’s AppComponent as shown below:
Data Visualization Using ECharts (ngx-echarts) in Angular Project
Instantiate a chart object using EChartsOption in your component TS file.
To display it on your HTML file,
<div echarts [options]="chartOption" class="demo-chart"></div>Code language: HTML, XML (xml)
Click Here to check in my GitHub repository.
Kuzu Zangpo la! I am Sonam Dargay. I am a full-time software developer. Apart from 9-5 office works, I am a tech enthusiast, blogger, and dreamer.
I graduated from the College of Science and Technology(CST), affiliated with the Royal University of Bhutan.