Stacked bar chart with repeating categories

I have df with event start times and event types. For example:

6:00 travel time 
7:00 work
12:00 food 
12:45 work
5:00 travel time
6:00 food

I would like to create a single horizontal bar with x axis as time and the various activities as color blocks. Having a hard time figuring out how to do this with repeating activities.

So 6:00 to 7:00 might be blue as travel time, but also 5:00 to 6:00 would also be a block of blue.

So just to be clear: the end time of one event is implicitly defined by the start of the next event? How is the “end” of the last event to be determined? Is there some implicit event before the first? (e.g. sleep?) And the later 5:00 and 6:00, those are really PM times, i.e. 17:00 and 18:00?

For now, general advice:

  • You will need a start/end time for each event, those can be used directly with hbar.
  • For an event that spans days (sleep?) you will need to split into two events at the end of one day and the beginning of the next.

As for the repeated event types, you can associate each bar with its event type with another column in the ColumnDataSource for the bar glyph, and use factor_cmap to shade the bars based on the event type.


Thanks for the response.

I described the format the data is in now.
Yes end time would be the start of the next event. So I could make a column with the end time calculates. Or a duration calculated easy enough.

What I don’t get is how to call hbar such that it will stack the events. I’m looking at possibly hundreds of events changing dynamically. The actual data is not someone’s schedule but a equipment status that could change frequently. Just trying to make the data more relatable.

Thank you!

If you compute the start and end for each event, then there is nothing for Bokeh to stack, you’ve already done all the work necessary. The hbar glyph is vectorized and will draw a bar for every pair of start/end coordinates you specify:

source = ColumnDataSource(data={
    'start': start_times,
    'end': end_times,
    'event': event_types,

cmap = factor_cmap('event', 

p.hbar(y=..., left='start', right='end', color=cmap, source=source)

It’s not clear from your description what y should be here. If you just need one “stacked” bar, then you could set y equal to a single fixed value right in the call to hbar. If your data has bars that correspond to multiple y values then you would want to make a "y" column in the data source that provides the associated y-coordinate for each bar, then set y="y".

Important reminder: each item in a column of a CDS corresponds to some attribute of one of the bars, which is why all columns in a given CDS must always be the same length

As an aside, there is an hbar_stack method that it seems like you might be wanting to use, but I do not think it is appropriate for this use case.


Thank you!

With a little tweaking I was able to get exactly what I was shooting for. Really appreciate the help.

I’m glad to hear it is working! If you ever have the time to condense things into a small complete example that could fit here (with a screenshot), I am sure future readers would appreciate the reference!

Hi Mark

did u give “start_times” as a start time values of every unique event repetitively and similarly for end_times?

Hi Bryan

do u mean “start_times” as a start time values of every unique event repetitively and similarly for end_times?

@pradnya I don’t really understand how to answer your question because it really needs some context. I would suggest you open a new topic and describe your situation and what you want to do in detail.

I was working with a pandas df that was made up of columns with: state, datetime

The state is the status of some equipment. the datetime is when the equipment entered that state.

For this to work you have to add another column. You have the time the state started but you need to identify when the state ended so bokeh knows how long to make the hbar. So I just used the shift feature to create an “end” datetime.

Then you have: State, DateTime ( the start) and EndDateTime (the end)

Palette and factors are just lists, one is a list of the colors that position-ally match up with the factors ( all the states)

1 Like

@pradnya Please post a new topic as I asked, and also include some code.