2

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

Desired Chart

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?

DreamingInCode
  • 95
  • 2
  • 11

1 Answers1

3

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

enter image description here

Tommy
  • 2,355
  • 1
  • 19
  • 48
  • Firstly, thank you for taking the time to reply to my post, its greatly appreciated. Great information! Your hack is almost there however is there a way for the X axis to reflect a date instead of a numeric value (as shown in my initial post)? Failing that, do you know if there's another charting solution that would be able to provide the desired chart? – DreamingInCode Oct 30 '18 at 09:23
  • 1
    Modifying ChartJS with more hacks does not provide you to a workable solution. I think that you are looking for some kind of gantt charts, correct? Have a look at [angular-gantt](https://www.angular-gantt.com/demo/) (AngularJS), [angular4-gantt](https://github.com/jwiesmann/angular4-gantt#readme) (Angular) or [some other](https://doc.daypilot.org/gantt/angular/). I can refer you to [StackExchange's Software Recommendations](https://softwarerecs.stackexchange.com/) to ask for a more suitable tool for your setting. Good luck! – Tommy Oct 30 '18 at 10:02
  • 1
    Yes, a Gantt Chart may better suit the requirements, I will look into your recommendations. Once again thank you for all the help you have provided thus far. – DreamingInCode Oct 30 '18 at 10:38