Custom timeline chart using ngx charts and d3

Question

Is there a detailed document on how to create a custom ngx diagram? This is what I found, but could not start working with: https://medium.com/@amcdnl/charts-with-svgs-in-angular2-1d08a0e635ea

I want to create a custom timeline chart, something like this:

https://drive.google.com/open?id=0B2wUYluH2H4vZXdNUmxjU3JIWmc https://drive.google.com/open?id=0B2wUYluH2H4vSnZkT1ZUdWd3N2M

I tried to recreate the second one, this is my current move: https://drive.google.com/open?id=0B2wUYluH2H4veGlNak13clRFeEk

I used only svg rectangles for this diagram, but I want to do this with d3 at angular4. I thought this could be done with ngx-chart and d3, but I did not find any useful documentation.

Source svg:

<svg class="chart" width="1440" height="100"> <svg:g transform="translate(1, 5)"> <g *ngFor="let bar of bars; let i = index"> <rect [ngClass]="getFillClass(bar.eventType)" [attr.x]="calcX(i)" [attr.y]="calcY(bar.eventType)" [attr.width]="bar.duration" [attr.height]="getHeight(bar.eventType)" rx="0" ry="0"> </rect> </g> <svg:line class="xAxis" [attr.x1]="0" [attr.y1]="maxHeight - 5" [attr.x2]="1440" [attr.y2]="maxHeight - 5" /> </svg:g> </svg>