Associating Color Swatches to Elements of Checkbox Group

I have a figure with a lot of plots. The number of plots currently has unbound growth over time as more data sets are added that need to be viewed. I have a checkbox group with a checkbox for every individual plot with a descriptive name that includes a global ordinal.

In the figure itself, I have each plot use a color from a palette, and save that color in a column in the data source so that a swatch of the same color shows in the hover tool, in addition to another line showing the descriptive name. However, for my users, it is difficult to go from the name in the hovertool to the same name in the checkbox group. It would be much easier if I could also associate the color swatches with the checkboxes in the group.

The CheckboxGroup constructor takes a ‘background’ parameter, but it only accepts a single value and not a list.

I suspect that there is no ( easy ) way for me to alter the individual background colors of the checkboxes. I am curious if there is a way to add the swatches of color into any controls or control groups to achieve the effect of having the appropriate color swatch next to the checkboxes.

One possibility I am considering is having a list of individual checkboxes, each with their own background value and name, that all use the same CustomJS callback that references the name for doing its business. I am looking for some validation of this approach before I dive down that particular rabbit hole.

There’s not any way to change the color of individual checkbox controls through any Bokeh API (Python or JS). Offhand the only thing that comes to mind is targeting the CSS for the checkbox control in e.g. a CustomJS callback. The only thing that varies between the elements is the value property, so that’s what you’s have to use to target:

1 Like