Gauge Chart with Python

📊 Plotly Python
1

Hi, i would like to create a following gauge chart, but i am not able to figure it out.
image

2

Hey, if this is to use within Dash you could use the dash acquisition component:
https://dash.plotly.com/dash-daq/gauge

If it’s outside of Dash, you will need to do a custom one combining a holed pie chart and shapes for the needle.

3

I would like to have a solution outside of Dash. I was not able to find neither a semi donut chart neither a needle chart. Has anybody made a similar chart already?

4

You could do something custom, see example below.
The main drawbacks are:

  • No interactivity on hover (could be solved with overlaying a transparent scatterplot or using a line plot for the hand)
  • The pie is centered in the figure so it leaves some blank space at the bottom
import plotly.graph_objects as go
import numpy as np

plot_bgcolor = "#def"
quadrant_colors = [plot_bgcolor, "#f25829", "#f2a529", "#eff229", "#85e043", "#2bad4e"] 
quadrant_text = ["", "<b>Very high</b>", "<b>High</b>", "<b>Medium</b>", "<b>Low</b>", "<b>Very low</b>"]
n_quadrants = len(quadrant_colors) - 1

current_value = 19
min_value = 0
max_value = 50
hand_length = np.sqrt(2) / 4
hand_angle = np.pi * (1 - (max(min_value, min(max_value, current_value)) - min_value) / (max_value - min_value))

fig = go.Figure(
    data=[
        go.Pie(
            values=[0.5] + (np.ones(n_quadrants) / 2 / n_quadrants).tolist(),
            rotation=90,
            hole=0.5,
            marker_colors=quadrant_colors,
            text=quadrant_text,
            textinfo="text",
            hoverinfo="skip",
        ),
    ],
    layout=go.Layout(
        showlegend=False,
        margin=dict(b=0,t=10,l=10,r=10),
        width=450,
        height=450,
        paper_bgcolor=plot_bgcolor,
        annotations=[
            go.layout.Annotation(
                text=f"<b>IOT sensot value:</b><br>{current_value} units",
                x=0.5, xanchor="center", xref="paper",
                y=0.25, yanchor="bottom", yref="paper",
                showarrow=False,
            )
        ],
        shapes=[
            go.layout.Shape(
                type="circle",
                x0=0.48, x1=0.52,
                y0=0.48, y1=0.52,
                fillcolor="#333",
                line_color="#333",
            ),
            go.layout.Shape(
                type="line",
                x0=0.5, x1=0.5 + hand_length * np.cos(hand_angle),
                y0=0.5, y1=0.5 + hand_length * np.sin(hand_angle),
                line=dict(color="#333", width=4)
            )
        ]
    )
)
fig.show()

image

3 Likes
5

That solution looks great, but is there a possibility to crop that bottom part with invisible sector just below the anntotation text? Smaller height doesn’t really work - it squeezes the chart and the circle.

6

Like I said in the message: no, you can’t have a half pie chart so no removing that bottom part. I’m sure you could make it work with smaller sizes though.

7

Can we add values at circumference of odometer . So that we know needle is near what value