I would like to create a variation of a stacked bar chart that is floating and takes in the same activity/input over multiple occurrences with the Y-Axis showing the 24 hour time (12am - 11:59 PM) and the X-Axis showing the calendar day (9/2, 9/3). The purpose of this chart is to display your entire activity throughout the day.
Each bar would be color coded with its associated activity and must have a start and end time to display the bar in the associated timeslot Y-Axis. You can also enter the same activity on the same day (x-axis) and it would not total it up but still put it in the correct time slot. I would also like every bar to be aligned on the same column. This assumes that no activities can overlap each other.
Is this possible with Chart JS? I've seen the stacked bar charts and other gantt chart variants but none of them display multiple occurrences of the same activity on the same column with a start/end time. If not what other frameworks can I use?
I think that you should be able to create this type of chart by using the x-range series type.
API: https://www.highcharts.com/docs/chart-and-series-types/x-range-series