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>

Beograd

I've had very solid velocity by pulling the ngx-charts github repo alongside my main project and referencing/piecemealing their src. It's certainly not documentation, but honestly - as smooth as it is, the code really is self-documenting. The only real hurdle I had to get over: the update() method is CRITICAL. I'd usually look to an init, constructor, or something like that, but in ngx-charts, update is where all the work happens. Much luck! – Speroni

I was hoping there is a hidden document somewhere and I won't need to figure it out from the source, just use it. Ok, thank you, at least is something. – Beograd