Tutorial on How to Use AntV G2 for Angular 9?
By: Shrivathsa Gopala Krishna Kumar
Tags: Antv, Graph, G2, Angular 9, JavaScript

Intended Audience

This article is written with an assumption that you possess the basic knowledge of Angular 9 and I also expect you to have an overview about AntV G2 library.

In case you got a question, “What is G2 ?” click here.

If you do not know Angular 9, please click here to get started learning Angular 9.

Steps to follow through in Angular 9

Step 1: Create a new Angular project using the Angular CLI. The command is `ng new angular-project-name`.

Step 2: Change your directory to the src/app folder inside the project created in Step 1. By typing `cd angular-project-name/src/app`

Step 3: Generate a new component inside a new folder named ‘pages’ (I prefer this method to keep the code clean you can skip this step if you wish to.). By typing `ng g c pages/area-chart` in the terminal.

Folder structure you will see if you have followed all three steps. (Ignore the yellow and green highlights on the folder)

I have chosen a random example from `https://g2.antv.vision/en/examples`to just walk you through the process, the method remains the same for any example given in the Antv/G2 website.

Step 4: I have chosen this example from AntV/G2 website. Please choose any example you wish to, from the same website. You may copy any other example from other websites as well, but I would recommend you to stick to the website I have chosen, as you first need to understand how to use it for Angular, before actually playing around with it.

Step 5: Make sure you first copy the imports from the example’s JavaScript. and paste it below your angular imports. Please note, the TypeScript file that I am speaking of is that of the component you created in Step 3. If you are using app.component, your TypeScript file would be app.component.ts.

The code highlighted in green is the imports that you need to copy before you think of copying the rest of the javascript.

Step 6: Copy the rest of the JavaScript from the example and paste it inside your component’s TypeScript file, inside the ` ngOnInit(): void { }`.

The code highlighted in green needs to be copied after completing Step 5.

The following will be the contents of `angular-project-name/src/app/pages/area-chart.component.ts` (If you followed step 3)

import { Component, OnInit } from ‘@angular/core’; import { Chart, registerInteraction } from ‘@antv/g2’; @Component({ selector: ‘app-area-chart’, templateUrl: ‘./area-chart.component.html’, styleUrls: [‘./area-chart.component.css’] }) export class AreaChartComponent implements OnInit { constructor() { } ngOnInit(): void { const data = [ { year: ‘1991’, value: 15468 }, { year: ‘1992’, value: 16100 }, { year: ‘1993’, value: 15900 }, { year: ‘1994’, value: 17409 }, { year: ‘1995’, value: 17000 }, { year: ‘1996’, value: 31056 }, { year: ‘1997’, value: 31982 }, { year: ‘1998’, value: 32040 }, { year: ‘1999’, value: 33233 }, ]; const chart = new Chart({ container: ‘container’, autoFit: true, height: 500, }); chart.data(data); chart.scale({ value: { min: 10000, nice: true, }, year: { range: [0, 1], }, }); chart.tooltip({ showCrosshairs: true, shared: true, }); chart.axis(‘value’, { label: { formatter: (val) => { return (+val / 10000).toFixed(1) + ‘k’; }, }, }); chart.area().position(‘year*value’); chart.line().position(‘year*value’); chart.render(); } }

If you have not followed step 3, the contents of `angular-project-name/src/app/app.component.ts` will be:

import { Component, OnInit } from ‘@angular/core’; @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [‘./app.component.css’] }) export class AppComponent implements OnInit { title = ‘angular-with-g2’; constructor() { } ngOnInit(): void { const data = [ { year: ‘1991’, value: 15468 }, { year: ‘1992’, value: 16100 }, { year: ‘1993’, value: 15900 }, { year: ‘1994’, value: 17409 }, { year: ‘1995’, value: 17000 }, { year: ‘1996’, value: 31056 }, { year: ‘1997’, value: 31982 }, { year: ‘1998’, value: 32040 }, { year: ‘1999’, value: 33233 }, ]; const chart = new Chart({ container: ‘container’, autoFit: true, height: 500, }); chart.data(data); chart.scale({ value: { min: 10000, nice: true, }, year: { range: [0, 1], }, }); chart.tooltip({ showCrosshairs: true, shared: true, }); chart.axis(‘value’, { label: { formatter: (val) => { return (+val / 10000).toFixed(1) + ‘k’; }, }, }); chart.area().position(‘year*value’); chart.line().position(‘year*value’); chart.render(); } }

Step 7: If you have generated a component following Step 3, delete the contents of the html file.

Step 8: Please delete everything inside the app.component.html file, except the line that has ` <router-outlet></router-outlet>`.

Step 9: If you have generated a component following Step 3, please see the selector name of your component. Example I have used my selector name of my component as `app-area-chart` hence I would add a HTML tag inside, ` angular-project-name/src/app/app.component.html` file, as `<app-area-chart></app-area-chart>`. If you are using root component as is, please add ‘<app-root></app-root>`, before ` <router-outlet></router-outlet>` inside the `angular-project-name/src/app/app.component.html`

If you have followed Step 3, the contents of the `angular-project-name/src/app.component.html` will be:

<app-area-chart></app-area-chart> <router-outlet></router-outlet>

If you have not followed Step 3, contents of the `angular-project-name/src/app.component.html`will be:

<app-root></app-root> <router-outlet></router-outlet>

Step 10: Save all the files before you serve the project.

Step 11: Serve the angular project by typing `ng serve`.

You will be to see the graph rendered.