Keath Milligan

On software development, quality, security and broken racecars

Create a reusable chart component with Angular and D3.js

Integrating D3.js with Angular to create reusable chart components. This is an updated version of the original post that covered integrating D3.js (version 4) with Angular 2. This version covers the latest Angular version (currently 4.2.4).

In this example, we’ll create a reusable Angular chart component using D3.js and @angular/cli.

Create App Scaffolding

If you have not updated your @angular/cli installation lately, you should do so before proceedingThis will insure you get the correct Angular package versions.

Create a new project with:

Install D3.js and Typings

Install the current version of D3.js and its typings with:

Create the Chart Component

Now generate the chart component stub with:

I’ve elected to place it in a “shared” directory, but you can put it anywhere you like. For example, you might elect to put it in a loadable module along with other component.

Edit the template as follows:

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 bar-chart.component.css:

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

Now have a look at the bar-chart.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:

Let’s take a look at this component:

  • First off, you’ll notice that we set encapsulation to ViewEncapsulation.None. This allows D3 to access the CSS classes defined above.
  • The chart container is declared as a @ViewChild. This allows the component to directly access the native element (which D3 needs).
  • The OnChanges interface is implemented to allow the chart to be re-rendered (with animation) when the data changes.
  • The chart is initially created in the createChart method.
  • When the chart data has changed, the updateData method is invoked to re-render the chart.
  • The createChart and updateData methods are fairly generic to D3 and should look familiar if you have studied other D3 (non-Angular) examples.

Use the Component

Now let’s use the chart component. Edit the app component as follows:

The *ngIf=”chartData” statement prevents the chart from being rendered before its data is available.

The test data is generated in the app component:

In this case, a random array of numbers is regenerated every three seconds to demonstrate dynamic data updates. You can imagine a real-world scenario where this data is loaded from an API.

Test

Now run the example with:

Get the Code

The source for this example is available on GitHub.

 

1 Comment

  1. Do you know of an example that uses the d3 v4 type libraries from DefinitelyTyped instead of labeling everything as “any”?

     

    Thanks

Leave a Reply

Your email address will not be published.

*

© 2017 Keath Milligan

Theme by Anders NorenUp ↑