Echarts For Angular Charts Using ngx-echarts

Introduction

Echarts In this article, we will cover using ngx-echarts in an Angular project. A large selection of highly customizable charting capabilities are offered by the Echarts javascript-based library for online applications.

It is possible to create echart library-based charts in a react application using the ngx-echarts package module, which is specifically tailored for Angular applications.

Echarts is an open-source community-powered charting library that is supported by Apache and is run by a sizable number of contributors. Highly interactive charts are created using the HTML5-based canvas element using the Echarts package. These charts provide a wide range of configuration options, and they make it simple to combine many chart types into a single depiction.

We can build a wide variety of charts including Line, Bar, Pie, Scatter, Geographical/ Maps based, Radar, Heatmap, Gauge, 3D, Tree charts, and much more.

 ngx-echart

The Echarts package has been modified specifically for use in modular-based Angular apps. To use charts in the Angular application, we must install the ngx-echarts package module in the Angular project.

With the fantastic option sets offered by E-Charts, any type of graphical chart may be configured and made.

Let’s implement some important types of charts in Angular application.\

Create a new Project

To create a new project type following command in terminal.

nd new echart-demo

Install EChart Library Package

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

Import NgxEchartModule

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,

    NgxEchartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Line Chart using EChart

In a line chart, also known as a line plot, line graph, or curve chart, data is shown as a sequence of markers,’ which are data points, linked by straight line segments.

Add code in app.component.ts file which is as below:

import { Component } from '@angular/core';
import { EChartOption } from 'echarts';

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent {

  chartOption: EChartOption = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [240,420,310,333,654,345,723,650,412,980,640,780],
      type: 'line',
      areaStyle: {}
    }]
  }

}

Add following line to app.component.html file

<div echarts [options]="chartOption" class="demo-chart"></div>

Conclusion

The Echart charting package offers a variety of configuration options, including the ability to add additional Y and X axes, format the text in the tooltip, include click events, and display using dynamic data.