Angular 2 and D3: Build A Chart Component

How To Build A Chart Component in Angular 2 and D3 (Revised Version)

Today I’m publishing a revised version of a previous article How To Build A Chart Component in Angular 2 and D3 focusing on creating an Area Chart Component in Angular 2 and D3 to represent our Customer Orders.

Project Description

In this tutorial we are going to create an Angular 2 Chart Component implementing the datasets we got in my last post with the help of the D3 Library.

For most of the cases, using libraries like the ng2d3 is completely fine and I actually believe that is the right choice, why? Well… Because now that Angular 2 Stable Release is out, I know the following days, weeks or even months a considerable amount of developers that are new to this technologies; will start searching for information and my ethic and duty is to advice you that now that literally everything is new, following this article may be confusing and unnecessary, unless you need to build a really custom chart.

In other words, this article is written for developers that either already understand Angular 2 Basics and for those developers that need a really custom design. This will help you in the future to deliver much more customized charts to your customers and/or software products.

Anyway, I’m not saying that this blog is not for you if you are new, actually in my next article I will connect this datasets with ng2d3 because I want you to achieve the fullstack solution form Part 1, Part 2 to ng2d3 stats.

So for now, if you are totally new to Angular 2, I recommend you to first see one of the following articles:

  • Angular 2: How Do Components Communicate
  • Angular 2: How To Build A Container Component
  • The Ultimate Guide For Native App Development

Articles Index

  • Part 1: Setting up the REST API.
  • Part 2: Creating Stats Endpoints.
  • Part 3: Setting up Angular 2 App.
  • Part 4: Build Chart Component

Install D3, Moment and Type

After you verified the app installed and ran correctly, kill the process and install d3.

$ cd easy-stats-app
$ npm install d3@3.5.17 moment@2.15.0 --save
$ npm install @types/d3@3.5.17 --save-dev

As you can see, I’m learning from my own mistakes and this time I’m setting the right versions, nowadays everything changes so fast that I need to define which versions work for this Article.

I’m unable to update to D3 V4 because the official examples remains in V3, even the @type/d3 version at the moment I publish this article is the 3.5.17. I may create a new revision when D3 updates the documentation, but also the D3 Type.

Again if you are new to TypeScript you need to know now that if you want to use JavaScript libraries like D3 then you will need to install the right type in order to avoid compilation issues.

Whenever you need to search for types, please be informed that there is an official site that allows you to find the official types:

Microsoft’s TypeSearch

At the moment I’m writing this article, the moment library already provides with the right type, therefore you don’t need to explicitly install it.

Setup D3 Type

Now you need to tell the TypeScript compiler that there is a type you want to use. For this you need to open the fileeasy-stats-app/src/tsconfig.json and add the following configuration:

{
"compilerOptions": {
....
"types": [
"d3"
]
}
}

Great, you’ve learned how to search and install types when using third party libraries. Now lets create the Chart Module.
Read next:
Angular 2 and D3: Build A Chart Component