Aide:Graphiques et diagrammes

Niveau expert

Cette page décrit les différents moyens pour créer une illustration graphique de données dans un article.

Un graphique ou diagramme est une illustration d'un ensemble de données. Il peut être placé à l'intérieur des articles, comme toute autre image.

Les graphiques doivent être précis et présenter l'information de manière efficace. Privilégier les graphiques interactifs.

Graphiques interactifs

Jusqu'en 2023 était utilisée sur Wikipédia l'extension Graph ({{Graph:Chart}}, {{Graph:Lines}}, {{Graph:PieChart}}), qui permettait de réaliser des graphiques interactifs. Elle a été désactivée en 2023 pour des raisons de sécurité et remplacée en 2025 par l'extension Chart. De nombreuses pages incluent toujours des graphiques réalisés avec Chart, qui ne sont plus affichés et doivent être convertis.

Pour générer des graphiques interactifs, on utilise l'extension Chart. Elle permet de réaliser des graphiques en lignes, en barres, circulaires et en aires. La création d'un graphique se fait sur Wikimedia Commons, avec deux fichiers distincts :

un fichier .tab qui accueille les données ;
un fichier .chart dans lequel est définie la mise en forme des données (choix du type de graphique, etc.).

Suivez le tutoriel ci-dessous pour insérer des graphiques interactifs sur Wikipédia.

Préparer les données et la mise en forme

Si vous souhaitez convertir un graphique existant (réalisé avec l'ancienne extension Graph), consultez la section dédiée.

Étape 1 — préparer le terrain

Créez sur votre ordinateur un document de type tableur (avec Excel, LibreOffice Calc ou autre logiciel similaire) avec vos données ; il doit être au format .csv ou .xlsx.
Allez sur Wikimedia Commons.
Dans vos préférences Commons, activez le gadget « Tabular Import/Export » (dans la section Interface).

Étape 2 — créer le fichier .tab

Créez une page Data:Titre de vos données.tab (en remplaçant Titre de vos données).
Cliquez sur le bouton « Sélectionner un fichier » et sélectionnez votre fichier local avec vos données.
Prévisualisez et vérifiez que le fichier .tab est fonctionnel (il doit ressembler à cet exemple). S'il est dysfonctionnel, tentez d'inverser colonnes et lignes dans votre fichier local et réessayez.
Remplissez a minima les champs license (pour des données dans le domaine public, indiquez CC0-1.0) et description (titre de vos données).
Publiez la page.

Étape 3 — créer le fichier .chart

Créez une page Data:Titre de votre graphique.chart (en remplaçant Titre de votre graphique).
Du code s'affiche au format JSON. Remplissez au moins les paramètres suivants (liste complète des champs et des valeurs acceptées) :
- source : Indiquez le nom du fichier .tab que vous avez créé à l'étape 2.
- type : C'est le type de graphique. Vous avez le choix entre line (graphe en lignes), bar (graph en barres) pie (graph circulaire) et area (graph d'aires).
- title : Le titre du graphique qui sera affiché (remplacez en par fr puisque vous écrivez en français).
- xAxis : Le titre de l'axe des abscisses (remplacez en par fr puisque vous écrivez en français).
- yAxis : Le titre de l'axe des ordonnées (remplacez en par fr puisque vous écrivez en français).
Publiez la page. La page .chart doit afficher le graphique souhaité. (Note : il n'est pas possible paramétrer les couleurs : une seule palette, conçue pour être accessible est disponible.)

Étape 4 — insérer le graphique sur Wikipédia

Dans l'article où vous souhaitez insérer le graphique, ajoutez le modèle {{chart}}. La syntaxe minimale recommandée est indiquée ci-dessous, mais vous pouvez aussi ajuster la largeur du graphique, l'afficher dans une vignette (comme les images), définir son alignement (centré, etc.) ; reporez-vous à la documentation du modèle.
```
{{Chart
| data = Titre de vos données.tab
| chart = Titre de votre graphique.chart
}}
```
Prévisualisez, ajustez si nécessaire et publiez.

Pour tout usage plus avancé, consultez la documentation de l'extension Chart.

Notez qu'il est possible de ne pas spécifier de source des données dans un fichier .chart afin de pouvoir l'utiliser avec plusieurs jeux de données différents (plusieurs fichiers .tab) ; la source des données doit alors impérativement être indiquée dans Wikipédia, au sein de {{chart}}, avec le paramètre data.

Cas particulier : convertir un graphique Graph existant

Pour convertir un graphique Graph vers la nouvelle extension Chart :

Sur Wikimedia Commons, activez le gadget graphDataImport en ajoutant à votre page common.js le code suivant :

/* graphDataImport from [[User:Tomastvivlaren/graphDataImport]] for Chart extension. */
mw.loader.load('//commons.wikimedia.org/w/index.php?title=User:Tomastvivlaren/graphDataImport.js&action=raw&ctype=text/javascript');

Toujours sur Commons, créez une page Data:Titre de vos données.tab.
Dans l'interface de création de page, cliquez sur le bouton « Import graph wikicode ».
Copiez-collez, dans l'interface qui s'est ouverte, le wikicode du graphique présent sur Wikipédia, qui commence par {{Graph:. Puis cliquez sur « Convert to .tab ».
Opérez la même opération pour la page Data:Titre de votre graphique.chart, en cliquant cette fois sur « Convert to .chart ». Publiez la page.
Reprenez le tutoriel général pour adapter les deux pages (titre, source, noms des axes des ordonnées et des abscisses…) et publier le graphique sur Wikipédia.

Exemples

Exemple de graphique en lignes

Exemple de graphique en barres — affiché en vignette, aligné à droite et avec une largeur définie

Exemple de graphique en barres avec plusieurs séries de données

Exemple de graphique circulaire — avec une bordure et une légende

D'autres exemples sont disponibles dans Modèle:Chart#Exemples.

Graphiques fixes

Frise chronologique

Exemple de chronologie

-550 —

–

-540 —

–

-530 —

–

-520 —

–

-510 —

–

-500 —

←

Base du Cambrien

Une échelle approximative des évènements
depuis le début de la période du Cambrien.
Axes en millions d'années.

Le modèle {{Graphical timeline}} permet de représenter des frises chronologiques approfondies. Le modèle propose une mise en forme complexe et des options de libellés pour contrôler l'affichage. En règle générale, il est utilisé avec son propre modèle, qui est ensuite inclus dans l'article.

Statistique simple

{{Infobox Parti politique/Sièges}} peut être utilisé pour fournir une seule statistique, utilisable dans une cellule d'un tableau.

100 / 300

160 / 300

Diagramme circulaire

Module:Diagramme est un module Lua qui peut être utilisé pour créer diagrammes circulaires.

Syntaxe

Rendu

{{#invoke:Diagramme|camembert
| rayon = 150
| secteurs = 
    ( 1000000 : Pommes) 
    ( 2000000 : Bananes  : gold) 
    ( 1440000 : Abricots ) 
    ( 6.4e5 : Pêches : : [[Pêche (fruit)|Pêches]] )
    ( 750000 : Ananas)
| unité = _tonnes
| pourcentage = true
}}

Pommes: 1 000 000 tonnes (17,2 %)
Bananes: 2 000 000 tonnes (34,3 %)
Abricots: 1 440 000 tonnes (24,7 %)
Pêches: 640 000 tonnes (11 %)
Ananas: 750 000 tonnes (12,9 %)

Graphique à barres verticales ou histogramme

Module:Diagramme est un module Lua qui peut être utilisé pour créer plusieurs types de graphiques à barres verticales.

Type

Syntaxe

Rendu

Graphique à barres verticales simple

{{ #invoke:Diagramme | histogramme
| largeur = 300
| groupe 1 = 40 : 50 : 60 : 20
| groupe 2 = 20 : 60 : 12 : 44
| groupe 3 = 55 : 14 : 33 : 5
| liens 1 = Pomme : McIntosh (pomme) : Golden delicious
| liens 2 = Banane : Abricot : Pêche (fruit)
| liens 3 = Orange : Poire : Raisin
| infobulle 2 = infobulle 1 : infobulle 2 : infobulle 3 : infobulle 4
| couleurs = green : yellow : orange
| noms = Pomme: Banane : Orange
| légendes = Avant : Pendant : Après : Post mortem
}}

10

20

30

40

50

60

70

Avant

Pendant

Après

Post mortem

Pomme
Banane
Orange

Graphique à barres verticales empilées

{{ #invoke:Diagramme | histogramme
| largeur = 300
| empilement = 1
| groupe 1 = 40 : 50 : 60 : 20
| groupe 2 = 20 : 60 : 12 : 44
| groupe 3 = 55 : 14 : 33 : 5
| couleurs = green : yellow : orange
| noms = Pomme : Banane : Orange
| unité = kg
| légendes = Avant : Pendant : Après : Post mortem
}}

25

50

75

100

125

150

Avant

Pendant

Après

Post mortem

Pomme
Banane
Orange

Graphique en lignes

Le modèle {{Graphique polygonal}} permet la représentation d'un graphique en ligne.

Syntaxe

Rendu

{{Graphique polygonal
| coul_fond = white
| largeur = 500
| hauteur = 350
| marge_g = 40
| marge_d = 15
| marge_h = 10
| marge_b = 20
| nb_series = 3
| nb_abscisses = 10 
| lb_x1 = Val. 1 | lb_x2 = Val. 2 | lb_x3 = Val. 3 | lb_x4 = Val. 4 | lb_x5 = Val. 5
| lb_x6 = Val. 6 | lb_x7 = Val. 7 | lb_x8 = Val. 8 | lb_x9 = Val. 9 | lb_x10 = Val. 10
| y_max = 3000
| y_min = 1000
| grille = oui
| pas_grille_principale = 1000
| pas_grille_secondaire = 100
| S01V02 = 2200 | S01V03 = 2400 | S01V04 = 2500 | S01V05 = 2600 | S01V06 = 2500
| S02V01 = 1400 | S02V02 = 2000 | S02V03 = 1600 | S02V04 = 1800 | S02V05 = 2400 
| S02V06 = 2400 | S02V07 = 2500 | S02V08 = 2000 | S02V09 = 1600 | S02V10 = 1800
| S03V01 = 1800 | S03V04 = 2000 | S03V05 = 1600 | S03V06 = 1800 | S03V07 = 2400 
| S03V09 = 2400
| points = oui
}}

Bonnes pratiques

Les graphiques qui montrent une tendance de données doivent illustrer la tendance avec précision dans son contexte, plutôt que d'illustrer la tendance de manière exagérée ou dramatique. Pour résumer, évitez de créer des graphiques trompeurs.

Choisissez un type de graphique approprié aux données que vous illustrez.

diagramme en coordonnées cartésiennes — adapté pour mettre en relation quantitative deux grandeurs mesurées sur une série d'objets (par exemple^{[Par exemple ?]}, TàF), ou pour délimiter des domaines particuliers dans la relation entre deux grandeurs (par exemple ici, les champs en pression et température des différents faciès métamorphiques des roches crustales terrestrres ) ;
diagramme circulaire — adapté à l'illustration des éléments d'un ensemble (par exemple, ci-dessous, les différentes parts et les volumes de quelques fruits dans la consommation des ménages (données inventées), ou autre exemple réel cette fois, la répartition des recettes de l'Union Européenne par états membres en 2006 ;
diagramme en bâton — adapté pour montrer comment les choses se comparent les unes aux autres (par exemple^{[Par exemple ?]}, quelle population est la plus importante) ou comment elles ont évolué (par exemple^{[Par exemple ?]}, les ventes de maïs chaque année).

Voir aussi

le format SVG, recommandé pour la création de graphiques hors Wikipédia
Aide:Arbres généalogiques
Wikipédia:Images
WebPlotDigitizer peut être utilisé pour extraire des données d'un graphique existant.