Tutoriel pour créer un diagramme en courbe avec HTML et CSS

Les diagrammes en courbe sont des outils visuels puissants pour représenter les tendances de données sur une période donnée. Bien que de nombreuses bibliothèques JavaScript permettent de créer facilement des graphiques interactifs, il est possible de créer un diagramme en courbe en utilisant uniquement HTML et CSS.

Obtenir un diagramme en courbe propre et lisible directement dans une page web, sans dépendre d’une librairie externe ni écrire de JavaScript.
Comprendre comment structurer un graphique simple et efficace avec du HTML/SVG et du CSS, pour l’intégrer facilement dans un projet (dashboard, stats, interface).
Savoir rendre le graphique dynamique avec PHP à partir d’un tableau de données, afin de générer automatiquement la courbe et les points sans tout modifier à la main.

Ce tutoriel vous guide à travers le processus de création d’un diagramme en courbe sans recourir à des bibliothèques externes ou du javascript.

Diagramme en courbe

100

Jan

Fev

Mar

Avr

Mai

Jun

Jui

Aou

Structure HTML de base du diagramme en courbe

Commençons par créer la structure HTML de base du diagramme en courbe. Nous utiliserons un élément <div> pour le conteneur principal du graphique, des éléments SVG pour dessiner la courbe et les points, et des éléments supplémentaires pour les axes.

<div class="chart-container">

    <div class="chart">

        <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="line-chart">
            
            <!-- Lignes de fond -->
            <line x1="0" y1="7.5" x2="100" y2="7.5" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="25" x2="100" y2="25" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="42.5" x2="100" y2="42.5" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="60" x2="100" y2="60" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="77.5" x2="100" y2="77.5" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="94.5" x2="100" y2="94.5" stroke="#f1f1f1" stroke-width="0.5"/>
            
            <!-- Courbe -->
            <polyline 
                fill="none" 
                stroke="#0077cc" 
                stroke-width="0.7" 
                points="13,70 24.5,40 36,55 47.5,35 59,45 70.5,35 81.5,50 93,20"/>
            
            <!-- Points clés -->
            <circle cx="13" cy="69.8" r="0.8" fill="#34a853" />
            <circle cx="24.5" cy="40" r="0.8" fill="#34a853" />
            <circle cx="36" cy="55" r="0.8" fill="#34a853" />
            <circle cx="47.5" cy="35" r="0.8" fill="#34a853" />
            <circle cx="59" cy="45" r="0.8" fill="#34a853" />
            <circle cx="70.5" cy="35" r="0.8" fill="#34a853" />
            <circle cx="81.5" cy="50" r="0.8" fill="#34a853" />
            <circle cx="93" cy="20" r="0.8" fill="#34a853" />
        </svg>

        <!-- Axe horizontal : Abscisse -->
        <div class="y-axis">
            <div class="y-tick">100</div>
            <div class="y-tick">80</div>
            <div class="y-tick">60</div>
            <div class="y-tick">40</div>
            <div class="y-tick">20</div>
            <div class="y-tick">0</div>
        </div>

        <!-- Axe horizontal : Ordonnée -->
        <div class="x-axis">
            <div class="x-tick">Jan</div>
            <div class="x-tick">Fev</div>
            <div class="x-tick">Mar</div>
            <div class="x-tick">Avr</div>
            <div class="x-tick">Mai</div>
            <div class="x-tick">Jun</div>
            <div class="x-tick">Jui</div>
            <div class="x-tick">Aou</div>
        </div>

    </div>

</div>

Le conteneur principal du graphique est un <div> avec la classe .chart-container.
À l’intérieur de ce conteneur, nous avons un autre <div> avec la classe .chart qui contient un élément SVG pour dessiner la courbe.
La courbe est dessinée à l’aide de la balise <polyline>, qui relie plusieurs points définis par les attributs points.
Les points clés sont marqués par des cercles verts créés avec la balise <circle>.
Les axes X et Y sont créés à l’aide de <div> supplémentaires, chacun contenant des étiquettes .y-tick et .x-tick.

Pour améliorer la lisibilité du graphique, nous pouvons ajouter des lignes de fond horizontales. Avec ces lignes de fond, votre diagramme devient plus lisible, en aidant les utilisateurs à mieux comprendre les valeurs des points clés.

Ajout du CSS

Le CSS définit les styles pour le conteneur du graphique, les axes, et le graphique SVG. La position absolue est utilisée pour placer correctement les axes et le graphique à l’intérieur du conteneur.

.chart-container {
    width: 600px;
    height: 400px;
    margin: 0 auto;
}

.chart {
    position: relative;
    width: 600px;
    height: 400px;
    background-color: #fff;
    border: 1px solid #ccc;
    margin:0 auto;
}

.line-chart {
    width: 100%;
    height: calc(100% - 20px);
}

.y-axis {
    position: absolute;
    top: 20px;
    bottom: 30px;
    left: 0;
    width: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.y-tick {
    text-align: right;
    font-size: 12px;
    padding-right: 5px;
    font-weight: bold;
    color: #999;
}

.x-axis {
    position: absolute;
    bottom: 5px;
    left: 70px;
    right: 40px;
    height: 20px;
    display: flex;
    justify-content: space-between;
}

.x-tick {
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    color: #999;
}

Le conteneur principal et le conteneur du graphique sont stylisés pour avoir une largeur et une hauteur spécifiques.
L’élément SVG occupe toute la largeur et hauteur disponibles, à l’exception d’une petite marge pour les axes.
Les axes Y et X sont stylisés avec flexbox pour un alignement et un espacement uniforme des étiquettes.

Créer un diagramme en courbes avec uniquement HTML et CSS est un excellent exercice pour comprendre les bases des graphiques SVG et du positionnement en CSS. Pour des applications plus complexes, il est recommandé d’utiliser des bibliothèques externes, mais cette approche simple peut suffire pour des besoins basiques.

Un diagramme en courbe dynamique grâce au PHP

Imaginons que vous devez représenter un tableau de valeurs sous forme d’un diagramme en courbe. Voici comment faire avec PHP :

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Janv	Févr	Mars	Avri	Mai	Juin	Juil	Aout
15%	55%	40%	60%	52%	65%	58%	85%

Définition du Tableau de Données

<?php
    $array = array(15, 55, 40, 60, 52, 65, 58, 85);
?>

Un tableau $array est défini avec des valeurs représentant les données à afficher sur le graphique.

Génération de la courbe

<polyline 
    fill="none" 
    stroke="#0077cc" 
    stroke-width="0.7"
    points="<?php
        $i = 1.5; 
        $j = 89 / 100;

        foreach($array as $item) {
            $i += 11.5;
            $k = 96 - ($j * $item);
            echo $i.",".round($k, 1)." ";
        }
    ?>"/>

L’élément <polyline> est utilisé pour dessiner la courbe. Les attributs fill et stroke définissent l’apparence de la courbe.

L’attribut points est généré dynamiquement par PHP :

$i est initialisé à 1.5 et représente la position x initiale.
$j est calculé comme 89/100, ce qui est utilisé pour normaliser les valeurs de y. Soit 1%.

Pour chaque élément du tableau $array :

La position x via $i est incrémentée de 11.5 pour espacer les points horizontalement.
La position y via $k est calculée en normalisant la valeur de l’élément et en l’inversant (car les valeurs de y augmentent de haut en bas dans SVG).
Les coordonnées x,y sont ajoutées à la chaîne points et affichées.

Génération des points clés (cercle verts)

<?php
    $i = 1.5; 
    $j = 89 / 100;

    foreach($array as $item) {
        $i += 11.5;
        $k = 96 - ($j * $item);
        echo '<circle cx="'.$i.'" cy="'.$k.'" r="0.8" fill="#34a853" />';
    }
?>

Pour chaque point dans le tableau $array, un élément <circle> est généré pour marquer le point clé sur la courbe.

Les coordonnées cx, cy des cercles sont calculées de la même manière que pour les points de la courbe.

Le rayon r et la couleur de remplissage fill sont définis pour chaque cercle.

Code complet

<div class="chart-container top30">
    <div class="chart">

        <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="line-chart">
            <!-- Lignes de fond -->
            <line x1="0" y1="7" x2="100" y2="7" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="24.5" x2="100" y2="24.5" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="42.5" x2="100" y2="42.5" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="60" x2="100" y2="60" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="77.5" x2="100" y2="77.5" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="95.5" x2="100" y2="95.5" stroke="#f1f1f1" stroke-width="0.5"/>

            <?php

                $array = array(15, 55, 40, 60, 52, 65, 58, 85);

            ?>

            <!-- Courbe -->
            <polyline 
                fill="none" 
                stroke="#0077cc" 
                stroke-width="0.7"
                points="<?php

                    $i = 1.5; 
                    $j = 89 / 100;
                    // echo round($j, 1);

                    // Boucle pour la courbe
                    foreach($array as $item) {
                        $i += 11.5;
                        $k = 96 - ($j * $item);
                        echo $i.",".round($k, 1)." ";
                    }

                ?>"/>


            <!-- Points clés -->
            <?php

                $i = 1.5; 
                $j = 89 / 100;

                foreach($array as $item) {
                    $i += 11.5;
                    $k = 96 - ($j * $item);
                    echo '<circle cx="'.$i.'" cy="'.$k.'" r="0.8" fill="#34a853" />';
                }

            ?>
        </svg>

        <div class="y-axis">
            <div class="y-tick">100</div>
            <div class="y-tick">80</div>
            <div class="y-tick">60</div>
            <div class="y-tick">40</div>
            <div class="y-tick">20</div>
            <div class="y-tick">0</div>
        </div>

        <div class="x-axis">
            <div class="x-tick">Jan</div>
            <div class="x-tick">Fev</div>
            <div class="x-tick">Mar</div>
            <div class="x-tick">Avr</div>
            <div class="x-tick">Mai</div>
            <div class="x-tick">Jun</div>
            <div class="x-tick">Jui</div>
            <div class="x-tick">Aou</div>
        </div>

    </div>
</div>

Créer un diagramme en courbe avec HTML et CSS est une excellente façon d’ajouter une touche moderne et professionnelle à vos pages, sans dépendre d’une librairie JavaScript. En maîtrisant ce type de graphique, vous améliorez non seulement la lisibilité de vos données, mais vous gagnez aussi en liberté de design : couleurs, formes, style de la courbe, repères… tout peut être ajusté pour coller parfaitement à votre interface. C’est un exercice concret, accessible et très formateur pour progresser sur la mise en page et la précision visuelle en CSS.

Ce tutoriel vous donne une base solide pour reproduire facilement un graphique en courbe responsive, intégrable dans un portfolio, une dashboard ou un site vitrine. En partant de ce modèle, vous pourrez ensuite aller plus loin en ajoutant des légendes, des valeurs dynamiques ou même des animations pour rendre votre diagramme en HTML/CSS encore plus vivant. Bref, une compétence simple à apprendre, mais qui fait clairement la différence quand on veut afficher des statistiques de manière élégante sur le web.

Alban Guillier

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr