go.Indicator updating using callback

Dash Python
1

I am trying to update a gauge chart from plotly graph_objects using callback.

fig = go.Figure(go.Indicator(
        domain={'x': [0, 1], 'y': [0, 1]},
        value=0,
        mode="gauge+number",
        title={'text': "Windspeed in m/s"},
        gauge={'axis': {'range': [None, 60]},
               'steps': [
                    {'range': [0, 20], 'color': "palegreen"},
                    {'range': [20, 40], 'color': "cornsilk"},
                    {'range': [40, 60], 'color': "coral"}],
               }))

app.layout = html.Div([
        dcc.Interval(
            id="interval-components",
            interval=seconds*1000,
            n_intervals=0
        ),

        dcc.Graph(id="gauge-chart", figure=fig))
    ], className='row', style={'textAlign': 'center'})

@app.callback(
        output=[Output('gauge-chart', 'value')],
        inputs=[Input('interval-components', 'n_intervals')]
    )
    def update_gauge(n):
        value_out = anVar_1.value
        return [value_out]

However, when running this, it returns: https://i.imgur.com/xRaGwvW.png

2

Hi @Colar

This component can be used in a callback: https://dash.plotly.com/dash-daq/gauge

3

@AnnMarieW,

Yeah, Ive been using that as a place holder. But don’t really like the look of it :smiley:

4

I agree, the Plotly gauge looks really nice. Maybe @Emmanuelle can say whether it’s possible to use it with Dash? The only other option I know of is to build your own component.