Open in app

Sign in

Write

Sign in

Visualization with Angular and Ngx-charts

Krishna priya v
4 min readJun 22, 2020

In this post, we will figure out how to make fascinating information representations with Angular so as to report the discoveries of data analysis.

Information perception or data visualization is a visual portrayal of quantitative data as charts, diagrams, plots, etc. There are such huge numbers of libraries and systems accessible to envision information, yet the one that we are going to discuss in this article is ngx-charts.

Ngx-charts is an charting framework for Angular which wraps the D3 JavaScript library and utilizes Angular to render and vivify SVG components. It is one of the most well known structures for Angular application development since it makes it such a great amount of simpler job to render charts and gives different prospects that the Angular stage offers, for example, AoT, Universal, and so on.

In this article, we will take a gander at some basic models utilizing Ngx-charts.

Setting Up Angular Project With Ngx-charts

Create a new Angular project and install ngx-charts and d3 dependencies as follows.

npm install @swimlane/ngx-charts --save

In the event that you have to utilize some particular D3 shapes, at that point you could install the dependencies. In any case, we needn’t bother with them for this example.

npm install d3 --save npm install @types/d3-shape --save

Additionally, introduce Bootstrap to give styles in this example.

npm install bootstrap -save

Include NgxChartsModule and BrowserAnimationsModule in the app.module.ts file. Ngx-charts uses the BrowserAnimationsModule internally.

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxChartsModule } from '@swimlane/ngx-charts';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgxChartsModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Import bootstrap CSS in the global styles.scss file.

@import "~bootstrap/dist/css/bootstrap.min.css";

Creating Simple Charts

Lets include some sample data to render charts. The app.component.ts file would look like this:

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Angular Charts';
view: any[] = [600, 400];
// options for the chart
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Sales';
timeline = true;
colorScheme = {
domain: ['#9370DB', '#87CEFA', '#FA8072', '#FF7F50', '#90EE90', '#9370DB']
};
//pie
showLabels = true;
// data goes here
public single = [
{
"name": "China",
"value": 2243772
},
{
"name": "USA",
"value": 1126000
},
{
"name": "Norway",
"value": 296215
},
{
"name": "Japan",
"value": 257363
},
{
"name": "Germany",
"value": 196750
},
{
"name": "France",
"value": 204617
}
];
public multi = [
{
"name": "China",
"series": [
{
"name": "2018",
"value": 2243772
},
{
"name": "2017",
"value": 1227770
}
]
},
{
"name": "USA",
"series": [
{
"name": "2018",
"value": 1126000
},
{
"name": "2017",
"value": 764666
}
]
},
{
"name": "Norway",
"series": [
{
"name": "2018",
"value": 296215
},
{
"name": "2017",
"value": 209122
}
]
},
{
"name": "Japan",
"series": [
{
"name": "2018",
"value": 257363
},
{
"name": "2017",
"value": 205350
}
]
},
{
"name": "Germany",
"series": [
{
"name": "2018",
"value": 196750
},
{
"name": "2017",
"value": 129246
}
]
},
{
"name": "France",
"series": [
{
"name": "2018",
"value": 204617
},
{
"name": "2017",
"value": 149797
}
]
}
];
}

Here, we have likewise hardcoded our view height and width, scheme, yAxis, xAxis, xAxisLabel, yAxisLabel, etc. We can likewise give information through a JSON record or load them dynamically from the backend.

Incorporate the components from ngx-charts to render charts. In this example, we will include parts for a vertical bar diagram, a standardized vertical bar graph, and a stacked vertical bar chart. The total HTML would resemble this:

<!--The content below is only a placeholder and can be replaced.--><div style="text-align:center">
<h1 class="card-header bg-info">
Welcome to {{ title }}!
</h1>
<h3 class="text-secondary">
PEV Selling Countries
</h3>
<div class="row ml-5">
<div class="col">
<div class="row">
<h4>
Vertical Bar Chart
</h4>
</div>
<div class="row">
<ngx-charts-bar-vertical 
[view]="view"
[scheme]="colorScheme"
[results]="single"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
</ngx-charts-bar-vertical>
</div>
</div>
<div class="col">
<div class="row">
<h4>
Vertical Bar Chart Normalized
</h4>
</div>
<div class="row">
<ngx-charts-bar-vertical-normalized
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
</ngx-charts-bar-vertical-normalized>
</div>
</div>
</div>
<div class="row ml-5">
<h4>
Stacked Vertical Bar Chart
</h4>
</div>
<div class="form-group row ml-5">
<ngx-charts-bar-vertical-stacked
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
</ngx-charts-bar-vertical-stacked>
</div>
</div>
<!--The content below is only a placeholder and can be replaced.--><div style="text-align:center">
<h1 class="card-header bg-info">
Welcome to {{ title }}!
</h1>
<h3 class="text-secondary">
PEV Selling Countries
</h3>
<div class="row ml-5"
<div class="col">
<div class="row">
<h4>
Vertical Bar Chart
</h4>
</div>
<div class="row">
<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorScheme"
[results]="single"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
</ngx-charts-bar-vertical>
</div>
</div>
<div class="col">
<div class="row">
<h4>
Vertical Bar Chart Normalized
</h4>
</div>
<div class="row">
<ngx-charts-bar-vertical-normalized
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
</ngx-charts-bar-vertical-normalized>
</div>
</div>
</div>
<div class="row ml-5">
<h4>
Stacked Vertical Bar Chart
</h4>
</div>
<div class="form-group row ml-5">
<ngx-charts-bar-vertical-stacked
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
</ngx-charts-bar-vertical-stacked>
</div>
</div>

Now, we are prepared with our application which renders charts. Start the server utilizing ng-serve command. The final application would resemble this.

Conclusion

Ngx-charts is a powerful and easy to use in Angular applications. Checkout the documentation and examples for Ngx-charts.

Ngx Charts
Angular
Visualization
Charts
Charts And Graphs

--

--

Krishna priya v

Written by Krishna priya v

6 Followers

Help

Status

About

Careers

Blog

Privacy

Terms

Text to speech

Teams