Stacked Bar "Time Line" Chart using Ng2-Charts/ChartJs

Question

I am looking to create the following chart using Ng2-Charts (Angular 2 directives for ChartJs).

However I am having difficulty with the logic for the data set. I have researched to find a similar chart (using ng2-charts) but to no avail.

Here is some information about the chart: Each Company and 3 stages (denoted by the colours Red, Yellow and Green), the value denotes how many days a company has spent in a given stage.

E.g: Company 1 has spent 27 days in Stage 1 (Green) 54 days in Stage 2 (Yellow) and 2 days in Stage 3 (Green).

How can this chart be achieved using ng2-charts?

Answer 1

Nice question but it seems like it is not yet supported by ChartJS. Have a look at this issue and more interesting this pull-request.

Since it is an open feature request by a lot of people there are also options available to solve it by adding custom functions like here but you will not find a solution using ng2-charts directly.

In your case I would suggest trying to use these forks and use Chart.js directly (without angular component) or to search for another library that is able to display those chart types.

A hacky solution that could work, too, is adding white padding for every stacked bar, how suggested here: https://github.com/chartjs/Chart.js/issues/2912#issuecomment-230468691

A have created a working stackblitz using this "solution":