Comment créer un graphique de type jauge avec Python ?

Published: 01 novembre 2025
DMCA.com Protection Status

Published: 01 novembre 2025

DMCA.com Protection Status

Introduction

Les graphiques de type jauge (ou gauge charts) sont idéaux pour représenter une valeur unique, comme la performance d’un système, l’utilisation du processeur (CPU), ou la progression vers un objectif donné.
Ils permettent de visualiser facilement comment une mesure se situe par rapport à des plages ou des seuils définis, ce qui les rend particulièrement utiles dans les tableaux de bord et les applications de suivi en temps réel.

En Python, plusieurs bibliothèques permettent de créer des graphiques de jauge selon vos besoins :

  • Plotly : interactif et prêt à l’emploi dans les notebooks ou les tableaux de bord web
  • Matplotlib : statique, très personnalisable, parfait pour les rapports et publications
  • Dash : pour des applications web interactives avec mises à jour en temps réel

Ci-dessous, nous présentons chaque approche, de la visualisation statique simple au tableau de bord interactif dynamique.

Table of contents

Utiliser Plotly

Plotly propose un type de graphique dédié aux jauges via l’objet go.Indicator.
Celui-ci combine un indicateur numérique et un arc de jauge, avec une gestion intégrée des plages de couleurs, seuils et étiquettes.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import plotly.graph_objects as go

value = 75

fig = go.Figure(go.Indicator(
    mode = "gauge+number",
    value = value,
    title = {
        'text': "Performance du système",
        'font': {'size': 22, 'color': '#2F4F4F'}
    },
    number = {'font': {'size': 40, 'color': '#2F4F4F'}},
    gauge = {
        'axis': {
            'range': [0, 100],
            'tickwidth': 1,
            'tickcolor': '#A9A9A9'
        },
        'bar': {'color': '#4C78A8'},
        'bgcolor': 'white',
        'borderwidth': 1.5,
        'bordercolor': '#D3D3D3',
        'steps': [
            {'range': [0, 50], 'color': '#E5E8E8'},
            {'range': [50, 80], 'color': '#C8D6E5'},
            {'range': [80, 100], 'color': '#A3C1AD'}
        ],
        'threshold': {
            'line': {'color': '#FF6F61', 'width': 4},
            'thickness': 0.75,
            'value': 90
        }
    }
))

fig.update_layout(
    paper_bgcolor='white',
    font={'color': '#2F4F4F', 'family': 'Arial'},
)

fig.show()

Explication

Cet exemple crée une jauge élégante et minimaliste avec trois bandes de couleur représentant des plages de performance.
Le seuil met en évidence une valeur critique (90), tandis que l’aiguille bleue et la palette douce garantissent une bonne lisibilité dans un environnement professionnel.

Points forts

  • Support natif des jauges via go.Indicator
  • Entièrement interactif dans Jupyter, VS Code ou Dash
  • Personnalisation aisée des couleurs, polices et seuils

Comment créer une jauge avec Plotly en Python ?
Comment créer une jauge avec Plotly en Python ?

Utiliser Matplotlib (statique, plus de contrôle)

Si vous préférez des graphiques statiques ou si vous visez des figures de qualité publication, Matplotlib offre un contrôle total.
Bien qu’il ne dispose pas d’un type de jauge intégré, il est possible d’en construire une en utilisant des arcs (patches.Wedge) et de la géométrie polaire.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import matplotlib.pyplot as plt
import matplotlib.patches as patches
import numpy as np

def gauge_chart(value, title='Performance du système', min_val=0, max_val=100):
    value = max(min_val, min(max_val, value))

    def val_to_deg(v):
        return 180.0 * (1.0 - (v - min_val) / (max_val - min_val))

    fig, ax = plt.subplots(figsize=(6, 3))
    ax.set_aspect('equal')

    outer_r = 1.0
    thickness = 0.30
    inner_r = outer_r - thickness

    zones = [
        (0, 50, '#E5E8E8'),
        (50, 80, '#C8D6E5'),
        (80, 100, '#A3C1AD')
    ]

    for a, b, color in zones:
        theta1 = val_to_deg(b)
        theta2 = val_to_deg(a)
        wedge = patches.Wedge(center=(0, 0), r=outer_r,
                              theta1=theta1, theta2=theta2,
                              width=thickness,
                              facecolor=color, edgecolor='white', linewidth=1)
        ax.add_patch(wedge)

    bg_wedge = patches.Wedge(center=(0, 0), r=outer_r + 0.01,
                             theta1=0, theta2=180, width=thickness + 0.02,
                             facecolor='none', edgecolor='#DDDDDD', linewidth=1)
    ax.add_patch(bg_wedge)

    angle_deg = val_to_deg(value)
    angle_rad = np.deg2rad(angle_deg)
    needle_len = inner_r + thickness * 0.9
    nx, ny = needle_len * np.cos(angle_rad), needle_len * np.sin(angle_rad)
    ax.plot([0, nx], [0, ny], lw=3.5, color='#4C78A8', zorder=5)
    ax.scatter([0], [0], s=120, color='#2F4F4F', zorder=6)

    threshold = 90
    th_deg = val_to_deg(threshold)
    th_rad = np.deg2rad(th_deg)
    t_outer, t_inner = outer_r + 0.01, outer_r - 0.02
    tx1, ty1 = t_inner * np.cos(th_rad), t_inner * np.sin(th_rad)
    tx2, ty2 = t_outer * np.cos(th_rad), t_outer * np.sin(th_rad)
    ax.plot([tx1, tx2], [ty1, ty2], lw=3, color='#FF6F61', zorder=7, solid_capstyle='round')

    ax.text(0, -0.20, f'{value:.0f}%', ha='center', va='center',
            fontsize=28, fontweight='bold', color='#2F4F4F')
    ax.text(0, -0.36, title, ha='center', va='center',
            fontsize=12, color='#2F4F4F')

    for tick in [min_val, (min_val + max_val) / 2, max_val]:
        d = val_to_deg(tick)
        r_tick = outer_r + 0.07
        x, y = r_tick * np.cos(np.deg2rad(d)), r_tick * np.sin(np.deg2rad(d))
        ax.text(x, y, f'{int(tick)}', ha='center', va='center', fontsize=10, color='#666666')

    ax.set_xlim(-1.15, 1.15)
    ax.set_ylim(-0.35, 1.15)
    ax.axis('off')
    plt.tight_layout()
    plt.show()

# Exemple
gauge_chart(75, title='Performance du système')

Explication

Ici, la jauge est construite à partir d’arcs et d’angles trigonométriques.
Cette approche offre un contrôle précis sur chaque élément visuel (rayon, épaisseur, couleurs…), ce qui la rend idéale pour les rapports scientifiques ou techniques.

Comment créer une jauge avec Matplotlib en Python ?
Comment créer une jauge avec Matplotlib en Python ?

Utiliser Dash (pour des applications web)

Pour intégrer vos jauges dans une application web ou un tableau de bord de suivi, Dash s’intègre parfaitement avec les graphiques Plotly.

Voici un exemple simple d’application Dash affichant une jauge statique :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
from dash import Dash, dcc, html
import plotly.graph_objects as go

app = Dash(__name__)

fig = go.Figure(go.Indicator(
    mode = "gauge+number",
    value = 72,
    title = {'text': "Utilisation CPU"},
    gauge = {'axis': {'range': [0, 100]}}
))

app.layout = html.Div([
    html.H2("Exemple de jauge en temps réel"),
    dcc.Graph(figure=fig)
])

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

Explication

Cet exemple met en place un mini tableau de bord avec une jauge Plotly intégrée dans une mise en page Dash.
En l’exécutant localement, vous accédez à une application interactive à l’adresse http://127.0.0.1:8050.

Créer une jauge interactive avec Dash
Créer une jauge interactive avec Dash

Version améliorée de l’application Dash (interface raffinée + mise à jour en temps réel)

Cette version avancée illustre la mise à jour dynamique d’une jauge, adaptée à des mesures en temps réel comme l’utilisation CPU ou des capteurs.
Elle utilise dcc.Interval pour actualiser périodiquement la jauge.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
from dash import Dash, dcc, html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
import random

app = Dash(__name__)
app.title = "Moniteur système"

def create_gauge(value):
    fig = go.Figure(go.Indicator(
        mode="gauge+number",
        value=value,
        title={'text': "Utilisation CPU", 'font': {'size': 22, 'color': '#2F4F4F'}},
        number={'font': {'size': 36, 'color': '#2F4F4F'}},
        gauge={
            'axis': {'range': [0, 100], 'tickwidth': 1, 'tickcolor': '#A9A9A9'},
            'bar': {'color': '#4C78A8'},
            'bgcolor': 'white',
            'borderwidth': 1.5,
            'bordercolor': '#D3D3D3',
            'steps': [
                {'range': [0, 50], 'color': '#E5E8E8'},
                {'range': [50, 80], 'color': '#C8D6E5'},
                {'range': [80, 100], 'color': '#A3C1AD'}
            ],
            'threshold': {
                'line': {'color': '#FF6F61', 'width': 4},
                'thickness': 0.75,
                'value': 90
            }
        }
    ))

    fig.update_layout(
        margin=dict(l=20, r=20, t=60, b=20),
        paper_bgcolor='white',
        font={'color': '#2F4F4F', 'family': 'Arial'}
    )
    return fig

app.layout = html.Div([
    html.H2("Jauge en temps réel", 
            style={'textAlign': 'center', 'color': '#2F4F4F', 'marginBottom': '20px'}),

    dcc.Graph(id='gauge-graph', figure=create_gauge(72), 
              style={'height': '70vh', 'width': '60%', 'margin': 'auto'}),

    dcc.Interval(id='interval', interval=1000, n_intervals=0)
],
style={
    'backgroundColor': 'white',
    'display': 'flex',
    'flexDirection': 'column',
    'alignItems': 'center',
    'justifyContent': 'center',
    'height': '100vh'
})

@app.callback(
    Output('gauge-graph', 'figure'),
    Input('interval', 'n_intervals')
)
def update_gauge(n):
    new_value = random.randint(40, 95)
    return create_gauge(new_value)

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

Explication

Cette application met à jour la jauge chaque seconde via dcc.Interval, simulant un flux de données en direct.
Le design épuré et centré s’adapte parfaitement aux tableaux de bord de supervision.

Exemples de jauges Dash en Python Exemples de jauges Dash en Python
Exemples de jauges Dash en Python

Références

Liens Source
Documentation Plotly Indicator (Gauge) Site officiel Plotly
Référence API go.Indicator Documentation GitHub Plotly
Exemples de jauges Plotly (steps et seuils) Exemples officiels Plotly
Composant Dash dcc.Graph Documentation Dash
Composant Dash dcc.Interval Documentation Dash
Mise en page et callbacks Dash Guide officiel Dash
Composants HTML Dash Documentation Dash
Creative Commons License

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Author profile-image

Benjamin

Développeur à mes heures perdues, je m’intéresse à la télédétection terrestre et à la détection des incendies par satellite. Passionné par Python, le machine learning et la science ouverte.

Skills
  • Remote sensing
  • Python
  • Machine Learning
  • Tensorflow 2.0
Image

of