Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Dash Gauge - Show value as integer

Hi,

First off, I am big fan of Dash and the seemingly endless possibilities. However, I have little understanding of how it actually works, which in this circumstance means that I cannot figure out how to change the display of an element, namely, the value of the dash-daq-gauge:

image

As the gauge is showing count values, I would like to see (edited using inspect tool):

image

I’ve found that this is the class the value is passed to:

image

My problem, however, is that I cannot figure out how the value is passed to the class or how to style the class such that the value is shown as int.

Any help is appreciated!

Found the value that needed to be changed in the source code, however, is there a way to change this through a styling parameter or similar without changing it in source code? :confused:

Changed b.toFixed(1) to b.toFixed(0) in dash_daq.min.js:

image

image

From the code you have posted, it does not seem that there is any property for controlling the number of decimals. I guess you would have to just hack the js (as you do now) or alternatively fork dash daq component and build your own component that exposes a property which makes it possible control the number of decimals. If you choose the latter approach, you might consider submitting the change as a pull request :slight_smile:

Thank you for your comments :). I am not really sure where to start regarding exposing such properties to dash. I would probably be able to figure out how to create a variable x that could be inserted in .toFixed(x), however, I would be stuck without knowing how to call/change the variable upon calling the component :confused:

Ah, okay. It is actually rather simple. I’ll post an example when I get to a PC :slight_smile:

1 Like

I have now created a pull request for this feature. You can see the requires changes here. It’s basically just adding a new prop digits which is used instead of the fixed value (of 1) in the code that you posted above.

1 Like

Nice! How would you go about setting the prop in the call of Gauge()?

You would use it like any other prop. Here is the mwe i posted with the merge request,

import dash
import dash_html_components as html

from dash_daq import Gauge

app = dash.Dash()
app.layout = html.Div([Gauge(showCurrentValue=True, digits=0)],
                      style={'display': 'flex', 'alignItems': 'center', 'justifyContent': 'space-between'})

if __name__ == '__main__':
    app.run_server()

Of course, should have looked at the full pull request! Thank you for your help, I hope the pull request comes through, until then I must use the hack :sweat_smile: