Responsive Charts in Angular With D3.js and CSS
Tags: JavaScript, D3js, CSS, Typescript, Angular

The Problem

There are so many ways to initialise a chart in D3 with Angular, so it can be a problem. Surely, if you did more than three D3 visual components in Angular, you’ve done them in a different way each time.

Let me explain a good way to adjust your charts.

But for the very first step, I’m going to present the instructions to create a new project with Angular and D3.

Creating the Angular project

Use the Angular CLI to quickly set one up:

$ npm install -g @angular/cli

Then start a new project:

$ ng new ng-d3-css-example

$ cd ng-d3-css-example

Integrating D3

Its typings in TypeScript:



$ npm install $ npm install d3 --save$ npm install @types/d3 --save-dev

Generate the component

Let’s create a component.

$ ng generate component line-chart

Template

The point here is that for every visual component in D3, I use this code. I love it because it’s only one tag with svg , a class , and an identifier to retrieve it later. That’s it!

<svg #chart class="chart"></svg>

Style

The focus here is the .chart class — it allows us to adjust our chart via CSS. It completely separates how we’re sizing charts from other parts, and it’s done only through the style.

line-chart.component.scss

...



.chart {

width: 240px;

height: 230px;



...



Controller

Have a quick look at the controller — all the magic is in there. Then, I’m going to comment on just a few things.

Our controller, where the magic happens. See below for an explanation.

Obviously, importing D3:

line-chart.component.ts

import * as d3 from "d3";

Another task would be retrieving, via @ViewChild , the component itself for adding properties that are always present in all of our visual components.

line-chart.component.ts

@ViewChild("chart", { static: true }) protected chartContainer: ElementRef; svg: any;

g: any; tooltip: any; margin: {top:number; right:number; bottom: number; left: number;}; contentWidth: number;

contentHeight: number; width: number;

height: number;

All of these properties must be initialised. In fact, we can do it in an ngOnInit cycle of Angular, as we already have everything.

line-chart.component.ts

initChart() {

const element = this.chartContainer.nativeElement;



this.svg = d3.select(element);



this.margin = {

top: +this.svg.style("margin-top").replace("px", ""),

right: +this.svg.style("margin-right").replace("px", ""),

bottom: +this.svg.style("margin-bottom").replace("px", ""),

left: +this.svg.style("margin-left").replace("px", "")

};



this.width = +this.svg.style("width").replace("px", "");

this.height = +this.svg.style("height").replace("px", "");



this.contentWidth = this.width - this.margin.left - this.margin.right;

this.contentHeight = this.height - this.margin.top - this.margin.bottom;



this.g = this.svg.append("g").attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");

}

Putting some margins, etc. to delimitate the content a little bit is almost always mandatory in D3

We’re converting width and height into a numeric value, and it’s the key concept here

and into a numeric value, and it’s the key concept here Indeed, even if you put % , vw , vh , or another measure in your style, it’ll still be set correctly

Result

After the CSS properties like width and height are set, you’ll be able to check them.

$ npm start