
Introduction
In today’s article, let’s cover making a Gauge for Dashboard . Gauges are an indispensable widget when it comes to an IoT dashboard. It doesn’t take up a lot of time to create and yet they can be applied in many fields. How cool is that! ?
They are the most habitually used high demand widget for many dashboards as well. It displays a single value to estimate progress with respect to the goal. Where in, the bar depicts the target value, and the shading is to represent the progress towards that goal.
Contents
Overview
Today I am gonna help you code a basic gauge that would work perfectly well for the most common dashboards. Gauge charts, otherwise known as speedometer charts are normally used to encapsulate key business indicators.
Let’s code a basic Gauge
import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
fig = go.Figure(go.Indicator(
mode = "gauge+number",
value = 250,
domain = {'x': [0, 1], 'y': [0, 1]},
title = {'text': "Pressure"},
))
app.layout = html.Div([
dcc.Graph(id='gauge',figure=fig),
])
app.run_server(debug=True)
Output

You can notice that the Max value keeps changing as the values change and the green bar does remain unchanged. You will obtain a constant gauge with value 250 as you have given the value as static. For you guys to observe the change clearly, I have added a callback method to update the gauge and passed some random values. I will set apart another tutorial to explain callback and update methods. Now, why not make some changes to make our gauge look better. Yeah!
Let’s make it better
We will add four additional parameters named :
- Range
- Delta
- Steps
- Threshold
Range: Defines the min and max range of the gauge.
Delta: The difference between the real-time value and the reference value.
Steps: Helps to shade inside the gauge arc, so that you can indicate different levels.
Threshold: Helps to determine boundaries that visually signal you if the value crosses a defined threshold value.
import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
fig = go.Figure(go.Indicator(
mode = "gauge+number+delta",
value = value,
domain = {'x': [0, 1], 'y': [0, 1]},
title = {'text': "Pressure"},
delta = {'reference': 380 },
gauge = {'axis': {'range': [None, 500]},
'steps' : [
{'range': [0, 250], 'color': "#faff63"},
{'range': [250, 400], 'color': "#ff9a26"},
{'range': [400, 470], 'color': "#ff6224"},
{'range': [470, 500], 'color': "#ff2f1c"}
],
'threshold' : {'line': {'color': "#ff0015", 'width': 4}, 'thickness': 0.75, 'value': 460}}
))
app.layout = html.Div([
dcc.Graph(id='gauge',figure=fig),
])
app.run_server(debug=True)
Output
By looking at the picture below you can see for yourself that this chart doesn’t need too many explanations.

Customising
OK, what’s next? Let’s add some colors so that our gauge will look popping.
import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
fig = go.Figure(go.Indicator(
mode = "gauge+number+delta",
value = value,
domain = {'x': [0, 1], 'y': [0, 1]},
title = {'text': "Pressure",'font': {'size': 24}},
delta = {'reference': 380, 'increasing': {'color': "RebeccaPurple"} },
gauge = {'axis': {'range': [None, 500], 'tickwidth': 1, 'tickcolor': "darkblue"},
'bar': {'color': "darkblue"},
'bgcolor': "white",
'borderwidth': 2,
'bordercolor': "gray",
'steps': [
{'range': [0, 250], 'color': 'cyan'},
{'range': [250, 400], 'color': 'royalblue'}],
'threshold': {
'line': {'color': "red", 'width': 4},
'thickness': 0.75,
'value': 490}}))
fig.update_layout(paper_bgcolor = "lavender", font = {'color': "darkblue", 'family': "Arial"})
app.layout = html.Div([
dcc.Graph(id='gauge',figure=fig),
])
app.run_server(debug=True)
Output

Conclusion
That’s all! Curious about how it works? Do try it and see for yourself. If you need more support, be sure to get in touch with me.
Thank you for visiting our Tech Rover blog! Stay tuned for more. Happy coding and building. ?
Nice content… Good job bro
Thanks Bharath
Thanks mahn for this owsom post
Thanks for the feedback ?
Nice work man expect more fron you?
Thanks Dear 😀