Search code examples
pythoncssplotly-dashplotly-python

Customizing the dash-daq gauge's knob

I'm trying to fully customize a dash-daq gauge appearance. First I wanted to remove the needle which I succeeded by adding to my gauge a class (no-needle) and setting in the CSS the following style:

.no-needle line {
   stroke: none !important;
}

I found this CSS property by exploring through the browser inspector, and it worked, as you can see in the following screenshot

Then I wanted to remove the central "knob", but didn't find a way to do it. I'm struggling because the knob is not a single element like the needle (which was a line), as you can see here. I tried to explorer in the dash-daq documentation but didn't find any option to alter the style of the needle and/or the central knob.

Is it even possible ?

Any help would be appreciated. Thank you for your time.

(versions I'm using) dash==1.0.1 dash-daq==0.1.5

Solution

  • I found* a (dirty?) solution to do it by creating the following CSS rule:

    .no-needle use {
    display: none;
}

    (I’m specifying the .no-needle here because I have many gauges on my page and I want to hide only one).

    *Thank’s to Bas van der Linden