Graph.js Have the data set the columns width

So I am needing to make a graph for a ThingsBoard widget and I chose to use Graph.js for the visuals because I am not overly experienced in web development.

This is what I would like the graph to look like, (excuse the amazing word drawing skills). It will be used to show the hours a robot was on for and what it was doing at what times.
GRAPH

Pretty much it’s a column (bar) graph on it’s side and with each bar extending from the x=0 to the label on the y axis.
The timescale across the bottom is the time from midnight to midnight and is used to show what hours the robot was doing what, so it could be on from 4:30 am then turn off at 10:45 am then back on at 9:30 pm, back off at 11:45 pm, etc.

I’ve tried many different techniques and just gotten an absolute mess of different graphs that I didn’t even know existed.

If this can’t be done with Graph.js can someone please direct me to another framework that can?

I have tried way to many things to list here, about 2, 10 hour shifts worth of trial and error.
If people want I can list some of the things I have tried.

Thanks in advance.