Building Data Visualization with Angular and Ngx-charts

Data Visualization is visual representation of quantitative information in the form of charts, graphs, plots and so on. There are so many libraries and frameworks available to visualize data, but the one that we are going to talk about in this article is ngx-charts.

Ngx-charts is a charting framework for Angular which wraps D3 JavaScript library and uses Angular to render and animate SVG elements. It is one of the most popular frameworks for Angular application because it makes so much easier to render charts and provides other possibilities the Angular platform offers such as AoT, Universal, etc.

In this article, we will look at some simple examples using 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

If you need to use some specific D3 shapes, then you could install the following dependencies. But, we do not need them for this tutorial.

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

Also, install bootstrap to provide styles in this sample project.

npm install bootstrap –save

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