Keath Milligan

On software development, quality, security and broken racecars

Create reusable chart components with Angular 2 and D3.js version 4


Integrate D3.js (version 4) with the Angular 2 component life cycle to create reusable charts and other visualizations that support animation and dynamic data.

Update August 26, 2017: This post covers integrating D3.js version 4 and later with Angular 2. For Angular 4 and later, please see this updated post.

Updated January 5, 2017: since this post was originally written, the official D3 typings bundle was updated for D3.js 4.x. This makes life much easier and I’ve updated this post to reflect the changes.

In this example, we’ll integrate D3 version 4 with an Angular 2 app created using angular-cli to create a reusable bar-chart component.

This complete source code for this example is available on github.

Create App Scaffolding

The core of the example is a generic CLI-generated app with a home page and default route (see app/home and app/app.routes.ts). I’ll assume you are familiar with basic component creation with angular-cli and routing at this point.

Install D3 and Necessary Typings

Install d3 with:

This will install the latest version (4.4.0 at the time of this writing).

Next install the d3 typings bundle with:

Create the Chart Component

Create a shared bar chart component:

Edit the template (barchart.component.html):

The #chart id will be used to get a reference to the native element.

The components size, colors and other attributes can be controlled with CSS. The default component styles are defined barchart.component.css:

The containing component that uses this chart can override these styles.

Now have a look at the barchart.component.ts typescript source. The goal for this component is to display a chart based on data provided externally and then re-render the chart if that data changes. To accomplish this, declare an @Input data value:

and then implement the OnChanges interface:

In this case, the data is assumed to be a simple two-dimensional array of numbers.

Some other things to note:

  • View encapsulation is set to “none” – this makes styling the chart component easier, but you need to be careful with class names to avoid collisions with other component styles.
  • @ViewChild is used to get an element reference to the div container defined in the HTML. D3 manipulates the DOM directly.

The remainder of the implementation is d3-specific. Using this integration approach, you can implement a wide variety d3-based visualizations in your Angular 2 app. The d3 documentation has many examples and tutorials.




  1. Thanks, this post helped me to get Angular and D3 up and running 😉

  2. Rodrigo Silveira

    December 13, 2016 at 2:41 am

    Hi – Thanks for the posting. I implemented this sample code using the instructions to install d3 found in the angular-cli page / 3rd party installation and was able to run it without have to update the typings.d.ts file.

    Alson, please note that the d3 typings availability,, was announced around the same time this article was published.

  3. There is a dedicated library for that –
    It seems, that utilising that library helps to overcome major pitfalls.

  4. Thanks For This Example .

    Can you Please let me know for any Sub Chart Example using D3.js and Angular 2

  5. Excellent articles, well written. Thank you.

  6. Thanks for this article, really helped.

    I ran into an error following your steps, @typings/d3 didn’t exist. The following line worked : npm install –save-dev @types/d3.

  7. Thanks a lot, very clear starter on D3 in Angular, everything works like a charm!

  8. This is the tutorial I’ve been searching for! Succinct, clear, and link to github ng2 project. Thanks Keath.

  9. Thanks! A helpful and simple set-up guide.

  10. thank you i really appreciate it.
    most of angular tutorials are fucking over complicated.
    this is very abstract.
    React > Angular

  11. Excellent article this is exactly what I needed!

  12. Hello, I would like to create a contour plot in my angular app. Would the method you describe here work? Any additional issues to expect? I am asking because the libraries which give access to D3 in angular 2 don’t seem to have these contours plots but to be limited to bar charts and lines, pie charts… (I am a complete beginner so please bear with me if my question sounds inappropriate) thanks. Laurence

    • For this simple example, I’ve chosen a bar chart, but you can render virtually any kind of visualization you can imagine with D3. This example is focused on how you can integrate D3 into an Angular component – once you are past that, it becomes a matter of making D3 do what you want. Check out for a contour plot example.

  13. How can u plz help me how to integrate d3 PCP Chart with Angular 4 ..need any example for this.?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2019 Keath Milligan

Theme by Anders NorenUp ↑