Custom timeline chart using ngx-charts and d3

Question

Is there a detailed document how to make a custom ngx-chart? This is what I've found, but couldn't start working with: https://medium.com/@amcdnl/charts-with-svgs-in-angular2-1d08a0e635ea

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

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

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

I have used only svg rectangles for this chart, but I wish to do it with d3 under angular4. I thought it can be done with ngx-chart and d3 but I couldn't find any useful documentation.

svg source:

<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>