Contents hide 1) Install D3.js 2) Import D3 modules into components 3) Generate D3 chart with angular template 3.1) buildSvg() 3.2) addXandYAxis() 3.3) drawLineAndPath() 4) Full Integrate D3 with Angular 9 4.1) Demo In this tutorial, we will see how to Integrate D3 with Angular 9, also, we will create a line chart with some dummy just to know how we can integrate D3 with Angular 9. Install D3.js Install D3js npm dependency locally using the terminal. Bash npm install d3 This will install all the required methods that we will use in our example for creating a chart. Import D3 modules into components you can create a separate component for the graph as for example I will be importing the module inside the app component itself. So the first thing we need to do is import the required module from D3 module which we will use to create a line chart. app.component.ts import * as d3 from 'd3'; import * as d3Scale from 'd3'; import * as d3Shape from 'd3'; import * as d3Array from 'd3'; import * as d3Axis from 'd3'; now letβs create some dummy data to create a graph. app.component.ts import { Component, OnInit } from '@angular/core'; import * as d3 from 'd3'; ... @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent implements OnInit { public title = 'Line Chart'; public data: any[] = [ {date: new Date('2010-01-01'), value: 40}, {date: new Date('2010-01-04'), value: 93}, {date: new Date('2010-01-05'), value: 95}, {date: new Date('2010-01-06'), value: 130}, {date: new Date('2010-01-07'), value: 110}, {date: new Date('2010-01-08'), value: 120}, {date: new Date('2010-01-09'), value: 129}, {date: new Date('2010-01-10'), value: 107}, {date: new Date('2010-01-11'), value: 140}, ]; } Also with that we will set the required varibles app.component.ts import { Component, OnInit } from '@angular/core'; import * as d3 from 'd3'; ... export class AppComponent implements OnInit { ... private margin = {top: 20, right: 20, bottom: 30, left: 50}; private width: number; private height: number; private x: any; private y: any; private svg: any; private line: d3Shape.Line<[number, number]>; // this is line defination constructor () { // configure margins and width/height of the graph this.width = 960 - this.margin.left - this.margin.right; this.height = 500 - this.margin.top - this.margin.bottom; } } Generate D3 chart with angular template After that, we will create 3 separate methods to generate the chart with d3 methods, methods: buildSvg() addXandYAxis() drawLineAndPath() Before we create methods lets add an SVG element to our component HTML. app.component.html <h2>{{ title }}</h2> <svg width="900" height="500"></svg> buildSvg() This method will start with appending the SVG elements βgβ and will give sizing as per the margin define. app.component.ts ... private buildSvg() { this.svg = d3.select('svg') // svg element from html .append('g') // appends 'g' element for graph design .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')'); } ... addXandYAxis() After that, we will generate the x-axis and the y-axis respective to our dummy data. app.component.ts ... private addXandYAxis() { // range of data configuring this.x = d3Scale.scaleTime().range([0, this.width]); this.y = d3Scale.scaleLinear().range([this.height, 0]); this.x.domain(d3Array.extent(this.data, (d) => d.date )); this.y.domain(d3Array.extent(this.data, (d) => d.value )); // Configure the X Axis this.svg.append('g') .attr('transform', 'translate(0,' + this.height + ')') .call(d3Axis.axisBottom(this.x)); // Configure the Y Axis this.svg.append('g') .attr('class', 'axis axis--y') .call(d3Axis.axisLeft(this.y)); } ... drawLineAndPath() After that, we will draw line and path. app.component.ts ... private drawLineAndPath() { this.line = d3Shape.line() .x( (d: any) => this.x(d.date) ) .y( (d: any) => this.y(d.value) ); // Configuring line path this.svg.append('path') .datum(this.data) .attr('class', 'line') .attr('d', this.line); } ... At the end all this method should be load when the component is loaded i.e. on ngOnInit() app.component.ts ... public ngOnInit(): void { this.buildSvg(); this.addXandYAxis(); this.drawLineAndPath(); } ... Full Integrate D3 with Angular 9 Demo Get More tutorials on Angular 9+ Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: Angular, d3.js