Angular E-Charts Tutorial | Awesome Free Chart Library

Tutorial and quick implementation guide for using E-Charts in Angular application.

The E-Chart library provides free, community-supported wide variety chart styles, which is backed by apache and already having a good collection of demos and downloadable examples.

There are few Chart libraries that provide a number of production chart types and free at the same time. E-Charts provides an awesome option sets using which we can configure and create any type of graphical chart. These charts can fulfill any real-world graphical representation of data.

After D3 I find this one a real competitor to choose from. There are a variety of charts we can build using E-Charts library and extinctions like:

  • Line, Bar, Pie, Scatter
  • GEO/ Country Map-based
  • Candlestick, Waterfall
  • Radar, Heatmap, Graph
  • Complex Lines, Tree, Treemap Funnel, Gauge Charts

and many more …

Moreover this, E-Charts are very easy and clear to implement with loads of example and documentation support.

These charts are created on canvas and responsive to support multiple device screen sizes.

Let’s check quick tutorials to implement some important types of charts in Angular application.

This tutorial is compatible with Angular 6+ to latest version 9

Version Check

Angular CLI: 9.0.7

Install E-Charts Library Packages

To use E-Chart in Angular application, we will install echarts, ngx-echarts and @types/echarts packages using NPM as shown below:

The -S option will install it for production and development and -D denotes for development only.


Update App Module

After installation, update the app.module.ts file. Add the NgxEchartsModule in imports array as shown below:

Add Simple Line Chart

Let’s move to the important part of adding actual charts in application components.

First, we will add the div element having the echarts directive with the required property [options] 

In the component class, import the EChartOption namespace to configure how our chart will look like and what data it will have.

Bingo! now you can run your application by executing $ ng serve --open to see an awsome line chart.

Adding Tooltip

To add a tooltip on points we will add tooltip property and configure to show customized data:

Conclusion: You can visit its official site to check various types of charts and demos available. The options can be configured to create highly productive charts.

Leave a Reply

Notify of