Set color of a Toggle

What are you trying to do?
I have a complicated plot and I’m trying to provide a way to toggle on/off various elements, using the second example from here Styling visual attributes — Bokeh 2.4.3 Documentation

Because I have so many things to toggle, I am trying to color the toggle buttons into three groups. But, no matter what I try the toggle buttons do not change colors. Here is the bokeh example code modified to make the toggle color match the color of the thing that is toggled, except the “background” property does not seem to be applied to my buttons.

from bokeh.io import output_file, show
from bokeh.layouts import layout
from bokeh.models import BoxAnnotation, Toggle
from bokeh.plotting import figure

PINK = "#CC79A7"
GREEN = "#009E73"

output_file("styling_visible_annotation_with_interaction.html")

p = figure(width=600, height=200, tools='')
p.line([1, 2, 3], [1, 2, 1], line_color="#0072B2")
pink_line = p.line([1, 2, 3], [2, 1, 2], line_color=PINK)

green_box = BoxAnnotation(left=1.5, right=2.5, fill_color=GREEN, fill_alpha=0.1)
p.add_layout(green_box)

# Use js_link to connect button active property to glyph visible property

toggle1 = Toggle(label="Green Box", button_type="default", active=True, background=GREEN)
toggle1.js_link('active', green_box, 'visible')

toggle2 = Toggle(label="Pink Line", button_type="default", active=True, background=PINK)
toggle2.js_link('active', pink_line, 'visible')

show(layout([p], [toggle1, toggle2]))

In some cases, a screenshot of your plot will also be helpful.

I wasn’t aware that property existed. Looking at the codebase, it is inherited from a deep subclass, and does not actually appear to do anything at all in the button widgets. I would suggest filing a GitHub Issue about this so it can come to some resolution. In the mean time you would have to target CSS to style the buttons manually.

OK, so i can set css classes argument when creating my toggles, but I’m not sure how to add another style block to the document my plot is in?

edit to add: I think I need some hints about what exact property to set, too: I edited the HTML output by hand to create the style block and it has no effect:

<style>
.pink_toggle {
   color: #CC79A7;
   backgroundColor: #CC79A7;
}
<style>

Rather than using show which is a very simplistic API that uses a stock template, you would want to use components or json_items or file_html to embed the Bokeh objects in your own HTML template.

https://docs.bokeh.org/en/latest/docs/user_guide/embed.html#standalone-documents

It’s hard to say anything about the CSS not working, a Minimal Reproducible Example that can actually be run (with the CSS changes included) would go a long way to help investigate. Otherwise, I usually often use browser debugging tools, dom inspector, etc to look into what CSS is applied where.

Right, so I am starting with above example, which uses file_html, then editing the output HTML to figure out how to set the color. Here is the current attempt:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bokeh Plot</title>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js"></script>
    <script type="text/javascript">
        Bokeh.set_log_level("info");
    </script>

  <style>
      .pinkToggle { 
        color: #CC79A7;
        background: #CC79A7;
        background-color: #CC79A7;
       };
  </style>

  </head>
  <body>
    <div class="bk-root" id="17e88c46-e0eb-4a6a-ac2f-e13bd254247f" data-root-id="1039"></div>
  
    <script type="application/json" id="1184">
      {"03a06f57-f341-494d-b519-929ec8dcea07":{"defs":[],"roots":{"references":[{"attributes":{"children":[{"id":"1033"},{"id":"1035"}]},"id":"1038","type":"Row"},{"attributes":{},"id":"1016","type":"BasicTicker"},{"attributes":{},"id":"1046","type":"BasicTickFormatter"},{"attributes":{"active":true,"background":"#009E73","css_classes":["green_toggle"],"icon":null,"js_property_callbacks":{"change:active":[{"id":"1034"}]},"label":"Green Box"},"id":"1033","type":"Toggle"},{"attributes":{"axis":{"id":"1015"},"coordinates":null,"dimension":1,"group":null,"ticker":null},"id":"1018","type":"Grid"},{"attributes":{},"id":"1047","type":"AllLabels"},{"attributes":{"line_alpha":0.2,"line_color":"#0072B2","x":{"field":"x"},"y":{"field":"y"}},"id":"1023","type":"Line"},{"attributes":{},"id":"1048","type":"UnionRenderers"},{"attributes":{},"id":"1049","type":"Selection"},{"attributes":{"below":[{"id":"1011"}],"center":[{"id":"1014"},{"id":"1018"},{"id":"1032"}],"height":200,"left":[{"id":"1015"}],"renderers":[{"id":"1024"},{"id":"1030"}],"title":{"id":"1040"},"toolbar":{"id":"1019"},"x_range":{"id":"1003"},"x_scale":{"id":"1007"},"y_range":{"id":"1005"},"y_scale":{"id":"1009"}},"id":"1002","subtype":"Figure","type":"Plot"},{"attributes":{"args":{"other":{"id":"1032"}},"code":"other.visible = this.active"},"id":"1034","type":"CustomJS"},{"attributes":{"line_alpha":0.1,"line_color":"#0072B2","x":{"field":"x"},"y":{"field":"y"}},"id":"1022","type":"Line"},{"attributes":{"coordinates":null,"fill_alpha":0.1,"fill_color":"#009E73","group":null,"left":1.5,"right":2.5},"id":"1032","type":"BoxAnnotation"},{"attributes":{},"id":"1050","type":"UnionRenderers"},{"attributes":{"children":[{"id":"1037"},{"id":"1038"}]},"id":"1039","type":"Column"},{"attributes":{"args":{"other":{"id":"1030"}},"code":"other.visible = this.active"},"id":"1036","type":"CustomJS"},{"attributes":{"coordinates":null,"data_source":{"id":"1020"},"glyph":{"id":"1021"},"group":null,"hover_glyph":null,"muted_glyph":{"id":"1023"},"nonselection_glyph":{"id":"1022"},"view":{"id":"1025"}},"id":"1024","type":"GlyphRenderer"},{"attributes":{},"id":"1051","type":"Selection"},{"attributes":{"source":{"id":"1020"}},"id":"1025","type":"CDSView"},{"attributes":{"children":[{"id":"1002"}]},"id":"1037","type":"Row"},{"attributes":{},"id":"1019","type":"Toolbar"},{"attributes":{},"id":"1007","type":"LinearScale"},{"attributes":{"active":true,"background":"#CC79A7","css_classes":["pinkToggle"],"icon":null,"js_property_callbacks":{"change:active":[{"id":"1036"}]},"label":"Pink Line"},"id":"1035","type":"Toggle"},{"attributes":{"data":{"x":[1,2,3],"y":[2,1,2]},"selected":{"id":"1051"},"selection_policy":{"id":"1050"}},"id":"1026","type":"ColumnDataSource"},{"attributes":{"data":{"x":[1,2,3],"y":[1,2,1]},"selected":{"id":"1049"},"selection_policy":{"id":"1048"}},"id":"1020","type":"ColumnDataSource"},{"attributes":{"coordinates":null,"data_source":{"id":"1026"},"glyph":{"id":"1027"},"group":null,"hover_glyph":null,"muted_glyph":{"id":"1029"},"nonselection_glyph":{"id":"1028"},"view":{"id":"1031"}},"id":"1030","type":"GlyphRenderer"},{"attributes":{"line_color":"#CC79A7","x":{"field":"x"},"y":{"field":"y"}},"id":"1027","type":"Line"},{"attributes":{},"id":"1005","type":"DataRange1d"},{"attributes":{"line_color":"#0072B2","x":{"field":"x"},"y":{"field":"y"}},"id":"1021","type":"Line"},{"attributes":{},"id":"1009","type":"LinearScale"},{"attributes":{"coordinates":null,"group":null},"id":"1040","type":"Title"},{"attributes":{"line_alpha":0.1,"line_color":"#CC79A7","x":{"field":"x"},"y":{"field":"y"}},"id":"1028","type":"Line"},{"attributes":{},"id":"1003","type":"DataRange1d"},{"attributes":{"coordinates":null,"formatter":{"id":"1046"},"group":null,"major_label_policy":{"id":"1047"},"ticker":{"id":"1012"}},"id":"1011","type":"LinearAxis"},{"attributes":{"coordinates":null,"formatter":{"id":"1043"},"group":null,"major_label_policy":{"id":"1044"},"ticker":{"id":"1016"}},"id":"1015","type":"LinearAxis"},{"attributes":{},"id":"1043","type":"BasicTickFormatter"},{"attributes":{"line_alpha":0.2,"line_color":"#CC79A7","x":{"field":"x"},"y":{"field":"y"}},"id":"1029","type":"Line"},{"attributes":{},"id":"1044","type":"AllLabels"},{"attributes":{},"id":"1012","type":"BasicTicker"},{"attributes":{"axis":{"id":"1011"},"coordinates":null,"group":null,"ticker":null},"id":"1014","type":"Grid"},{"attributes":{"source":{"id":"1026"}},"id":"1031","type":"CDSView"}],"root_ids":["1039"]},"title":"Bokeh Application","version":"2.4.3"}}
    </script>
    <script type="text/javascript">
      (function() {
        const fn = function() {
          Bokeh.safely(function() {
            (function(root) {
              function embed_document(root) {
              const docs_json = document.getElementById('1184').textContent;
              const render_items = [{"docid":"03a06f57-f341-494d-b519-929ec8dcea07","root_ids":["1039"],"roots":{"1039":"17e88c46-e0eb-4a6a-ac2f-e13bd254247f"}}];
              root.Bokeh.embed.embed_items(docs_json, render_items);
              }
              if (root.Bokeh !== undefined) {
                embed_document(root);
              } else {
                let attempts = 0;
                const timer = setInterval(function(root) {
                  if (root.Bokeh !== undefined) {
                    clearInterval(timer);
                    embed_document(root);
                  } else {
                    attempts++;
                    if (attempts > 100) {
                      clearInterval(timer);
                      console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
                    }
                  }
                }, 10, root)
              }
            })(window);
          });
        };
        if (document.readyState != "loading") fn();
        else document.addEventListener("DOMContentLoaded", fn);
      })();
    </script>
  </body>
</html>

I don’t see the relevant .pink_toggle class applied to the button:

Screen Shot 2022-09-16 at 13.41.542156×602 228 KB

Maybe that’s a bug or maybe that a usage error, it’s not possible to speculate without code to run (apologies if my request for and MRE was not specific enough: I am asking for everything needed to run and reproduce the occurrence locally).

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.