How to create horizontal stacked bar charts (sort of Gantt chart) multiple groups with line charts for each group in Chart.js?

[tukusejssirs]

First asked at StackOverflow

---

Horizontal stacked bar charts with multiple groups

As for the horizontal stacked bar charts with multiple groups, I like this solution. It seems to work with chart.js@4.4.4 without any issues, so I’d like to use that version.

It looks like this (note the colours a generated, therefore every time one loads the chart, they are different):

Problem description

However, I am unable to modify it so that for each group I can add one or more line charts where the x axis is a timeline (just like it is for the bar charts) and y axis is a number in a unit (e.g. percentage). I want the height of each (sub-) chart (be it bar or line chart) to be same, therefore the y axis of a line chart should not have the same height as the whole chart (composed of all bar and line charts).

Bonus points

It would be awesome if I could define some thresholds to colour the either the line in line charts or some gradient below it, like when the value is:

• > 90 %: green;
• > 70 % and < 90 %: yellow;
• < 70 %: red.

Nice to have

Show a vertical date line on hover. ;)