Dash Daq Gauage Styling

Dash Python
2

Hi @abhishekcg and welcome to the Dash Forum!

I’m certainly no css expert… but as I played with this example, here is what I found:

When you set size=350 in the daq.Gauge, and also set the radius r:184 in the css, it causes strange behavior with the track.

I don’t know what this means exactly: stroke-dasharray: 1108; but if you take it out, the pointer aligns with the numbers

You can set the gradient by adding this to the dac.Gauge:

color={"gradient":True,"ranges":{"#fffdc2":[0,21],"#d7f0a2":[21,119],"#fffdc1":[119,140]}},

Note that because it’s a dictionary, you need to use slightly different color numbers if you want colors repeated. (I used the color numbers and transition points from your css above. )

I don’t know how to make the gradient track wider… that’s way beyond my css skills. One workaround is to use a color from the midpoint of the gradient as the background color of the wider track. Experimenting with different colors might make something that looks OK.

With this css:

circle.track {   
    stroke-width: 20px;   
    stroke: #d7f0a2 !important;   
}

circle.track.progress{   
    stroke-width: 20px;
    stroke: #d7f0a2  !important;
}

the gauge will look like this:

guage_css
guage_css677×620 13.8 KB

Also, if you want to customize the numbers in the scale, see this post: How to change: space between radio-button and label / font-size of gauges?

If you find a better way to do a wider track for the gradient, I love to know about it!

1 Like