Indicator Gauge Chart Size

Dash Python
1

How do you change the size of an Indicator chart? Using the below style configuration doesn’t seem to change it.

style={ ‘width’:‘100vw’, ‘height’:‘100vh’, ‘margin-left’:10,‘margin-right’:10,‘max-width’:5000})

style={ ‘width’:‘100%’, ‘height’:‘100%’, ‘margin-left’:10,‘margin-right’:10,‘max-width’:5000})

2

Hi @twessels
The daq.Gauge has a property size, assign directly a value like:

size=150,
3

Thank you Eduardo. Im a bit new to Plotly…where would I put daq.Gauge given this code?

app.layout = html.Div([
dcc.Graph(id=‘nupl_graph’,
figure = go.Figure(go.Indicator(
mode = “gauge+number”,
value = nupl_result,
domain = {‘x’: [0, 1], ‘y’: [0, 1]},
title = {‘text’: “NUPL”},
gauge = {‘axis’: {‘range’: [-.1, 1]},
‘steps’ : [
{‘range’: [-1, -.75], ‘color’: “white”},
{‘range’: [-.75, .75], ‘color’: “white”},
{‘range’: [.75, 1], ‘color’: “white”}],
‘threshold’ : {‘line’: {‘color’: “black”, ‘width’: 1}, ‘thickness’: 1, ‘value’: .75}},)),
style={‘float’: ‘left’},
),

                dcc.Graph(id='mvrv_z_graph',
                    figure = go.Figure(go.Indicator(
                    mode = "gauge+number",
                    value = mvrv_zscore_result,
                    domain = {'x': [0, 1], 'y': [0, 1]},
                    title = {'text': "MVRV Z Score"},
                    gauge = {'axis': {'range': [-2, 11]},
                        'steps' : [
                            {'range': [-2, 0], 'color': "white"},
                            {'range': [0, 7], 'color': "white"},
                            {'range': [7, 11], 'color': "white"}],
                        'threshold' : {'line': {'color': "black", 'width': 1}, 'thickness': 1, 'value': 7}},)),
                    style={'float': 'left'},
                ),
                dcc.Graph(id='ea_sopr_graph',
                    figure = go.Figure(go.Indicator(
                    mode = "gauge+number",
                    value = entity_adjusted_sopr_result,
                    domain = {'x': [0, 1], 'y': [0, 1]},
                    title = {'text': "EA SOPR"},
                    gauge = {'axis': {'range': [-.6, 1.6]},
                        'steps' : [
                            {'range': [-2, 0], 'color': "white"},
                            {'range': [0, 7], 'color': "white"},
                            {'range': [7, 11], 'color': "white"}],
                        'threshold' : {'line': {'color': "black", 'width': 1}, 'thickness': 1, 'value': 1.2}},)),
                    style={'float': 'left'},
                ),


                dcc.Interval(
                    id='graph_update',
                    interval=100,
                ),
            ], 
            style={ 'width':'100vw', 'height':'100vh', 'margin-left':10,'margin-right':10,'max-width':5000})
1 Like
4

I just added it to the code and see that it creates a different type of Gauge. Not exactly what I was looking for but perhaps it can work. Thank you!

1 Like