Unable to change the background colour for pn.indicators.Dial widget

[doughagey]

version info: Panel 1.4.2

Description of expected behavior and the observed behavior:

I’ve been unable to change the background colour for my pn.indicators.Dial widget. I’ve tried CSS, customized designs, etc and nothing seems to work. Ultimately I’d like the background to be transparent so that the dashboard colour shows through. But I’m fine hard-coding a hex code if necessary. Currently, it only allows a pure white background, which somewhat stands out against my app background. Having posed the question on Holoviz Discourse I was asked by ahuang11 to raise a new issue here. Discourse topic can be found here: https://discourse.holoviz.org/t/changing-background-colour-of-pn-indicators-dial-widget/7564

self-contained example code

# Styling for Dial widgets
    custom_style = {
        "border": "0.5px solid grey",
        "border-radius": "5px",
        "margin": "5px",
    }

    grid[0:1, 1] = pn.Column(
        pn.Spacer(height=30),
        pn.Row(
            pn.indicators.Dial(
                name="Similarity",
                value=60,
                title_size="11px",
                bounds=(0, 100),
                width=150,
                height=150,
                colors=[(0, "grey"), (0.5, "grey"), (1, colour)],
                margin=(0, 20, 0, 0),
                styles=custom_style,
            ),
            pn.indicators.Dial(
                name="Strength",
                value=68,
                title_size="11px",
                bounds=(0, 100),
                width=150,
                height=150,
                colors=[(0, "grey"), (0.5, "grey"), (1, colour)],
                margin=(0, 20, 0, 0),
                styles=custom_style,
            ),
        ),
    )

[MarcSkovMadsen]

Its a bug. You should be able to set the background. But it never sets the background_fill_color of the underlying Bokeh model.

Workaround until it gets fixed.

import panel as pn

pn.extension(template="fast")

class CustomDial(pn.indicators.Dial):
    """"""
    def _get_model(self, doc, root=None, parent=None, comm=None):
        model = pn.indicators.Dial._get_model(self, doc, root, parent, comm)
        model.background_fill_color = self.background
        return model

custom_style = {
    "border": "0.5px solid grey",
    "border-radius": "5px",
    "margin": "5px",
}
colour = "pink"

pn.Column(
    pn.Spacer(height=30),
    pn.Row(
        CustomDial(
            name="Similarity",
            value=60,
            title_size="11px",
            bounds=(0, 100),
            width=150,
            height=150,
            colors=[(0, "grey"), (0.5, "grey"), (1, colour)],
            margin=(0, 20, 0, 0),
            background="green",
        ),
        CustomDial(
            name="Strength",
            value=68,
            title_size="11px",
            bounds=(0, 100),
            width=150,
            height=150,
            colors=[(0, "grey"), (0.5, "grey"), (1, colour)],
            margin=(0, 20, 0, 0),
            styles=custom_style,
            background=None
        ),
    ),
).servable()

[doughagey]

Thanks so much! That workaround works just perfect for me in the interim.