Chartjs-Chart.js time graph for Full day

The type of chart your making is a timeline.

However, timelines can be presented different ways, so figuring out how to get the appearance you want may be counter-intuitive. Different charting libraries will expose different mechanisms for plotting.

If your library does not offer a timeline with the look you need, then you’ll have to construct your own timeline chart using primitive plotting mechanisms.

The most generalized plot mechanism you can use for the example you’ve given is probably a box plot.

I’ll explain how I arrived at that conclusion, so you can better understand how to analyze chart construction:

When you want to create specialized charts like this, you need to break the elements down to a single piece of data and ask yourself “How would I plot just this one data element?”

In this case, for instance, your elements are “Online, Away, Meeting…” and so on.

You can plot any one of those with a box plot.

Here’s a link to a classic box-and-whisker plot looks like:
Box and Whisker Plot

In your case, you would plot a box without any whiskers. Your horizontal axis will be a timeline instead of ordinary numbers.

If you plot a box for every data element you have, you’ll get a chart similiar to the one you showed in your question. Keep in mind, draw order is going to matter. Larger boxes should be plotted first if you want smaller boxes to appear on top of them.

Also note that you could plot the various data in different vertical positions to get rid of overlapping completely and have an entirely different appearance. Here’s an example of what that would look like:
Timeline of Macintosh Models on Wikipedia

Almost all charting libraries are built on the concepts I’ve described here. They start with fundamental plotting mechanisms to plot lines, boxes, and other shapes on a 2-dimensional image. Then they use those basics to create specialized charts.

In your case, you could create your own chart class that renders charts just like the one you showed by using more primitive plotting elements offered by the library.

DEFINITION of plot – Many libraries use the word “plot” to refer to mapping points for one set of data to an image. In your case, “Online, Away, Meeting…” could all be considered a separate plot. But it’s also grammatically correct to call all of them together a plot. Just observe the context of whatever you are reading.

One more thing: Even though I described using a Box and Whisker plot, keep in mind that nearly every single charting library is going to have basic shape plotting at its core. Technically, all you need is to plot rectangles.