Dash Daq Gauage Styling

Dash Python
1

I am trying to develop digital cluster for an electric bike using dash. I increased the radius of gauage circle but now the tracking and the needle positions are uneven.How to fix this?
Also how to show the track progress in gradient color rather than a single color?

here is my code

app.py
daq.Gauge(

    max=140,

    scale={'start': 0, 'interval': 10, 'labelInterval': 2},

    min=0,

    size=350,

    showCurrentValue=False,

    id='my-gauge',

    label="",

    value=120,

)

styles.css

circle.track {

stroke-width: 15px;

r:184;

stroke-dasharray: 1108;

stroke: rgb(94, 92, 92)!important;

background-image: radial-gradient(red, green, blue);

}

circle.track.progress{

stroke-width: 17px;

r:184;

/* stroke: linear-gradient(

  to right, 

  #fffdc2,

  #fffdc2 15%,

  #d7f0a2 15%,

  #d7f0a2 85%,

  #fffdc2 85%

)!important; */

stroke: #6EE5FF   !important;

}

output

Screenshot (68)
Screenshot (68)1366×768 30.6 KB

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!

3

@AnnMarieW hey I know that if I remove the style it will become correct but I want it with style and as for the gradient color I don’t want gradient color on the circle I want it only on the track progress(progressing circle i.e the one varying as we give value)

4

I see… that will look nice. I don’t think that’s possible with the built-in parameters of daq.Gauge, but if you get it working with css, I hope you will post the solution back to the forum. I’d like to use something like that as well.