Wrapper qui connecte les graphiques officiels DSFR Chart au système dsfr-data-source pour une alimentation dynamique des données.

Attributs

En attente d'un filtre

Sur une page d'exploration, l'amont peut porter require-where (<dsfr-data-source> ou <dsfr-data-query>) et ne rien émettre tant qu'aucun filtre n'est posé. Le graphique rend alors le texte de idle-message (« Choisissez un filtre pour afficher les données » par défaut) plutôt qu'un cadre vide : aucune requête n'a été faite, ce n'est pas un jeu de résultats vide. Le mécanisme est décrit sur dsfr-data-source.

Bornes des axes

y-min et y-max bornent l'axe des valeurs, où qu'il soit dessiné ; x-min et x-max bornent l'axe horizontal quand il porte des nombres. Pour chaque couple attribut × type, la borne agit ou elle est signalée par un avertissement dans la console : elle n'est jamais ignorée en silence.

• La borne est posée exactement. y-min="5" sur une courbe donne un axe qui part de 5, y-max="37" un axe qui s'arrête à 37 : elle n'est pas arrondie à la graduation voisine.
• Une borne ne masque jamais une donnée (hors radar). Un minimum au-dessus de la plus petite valeur, un maximum en dessous de la plus grande — du plus grand cumul pour des barres empilées — sont ignorés, et l'avertissement nomme la valeur qui aurait été cachée. Pour restreindre ce qui est affiché, filtrer en amont (where de dsfr-data-query).
• Des barres partent de zéro (bar, bar-line). C'est la longueur d'une barre qu'on compare : un axe tronqué fait d'un écart de 40 % un écart du simple au triple. Un minimum positif y est donc ignoré et signalé ; seul un minimum négatif ou nul agit. Pour un axe qui ne part pas de zéro, une courbe convient.
• Petits multiples : les mêmes y-min et y-max sur chaque graphique leur donnent une échelle commune.

<!-- Taux sur une échelle fixe, de 0 à 100 -->
<dsfr-data-chart source="taux" type="line"
  label-field="annee" value-field="taux" y-min="0" y-max="100">
</dsfr-data-chart>

<!-- Barres horizontales : y-max borne l'axe des valeurs (horizontal) -->
<dsfr-data-chart source="taux" type="bar" horizontal
  label-field="region" value-field="taux" y-max="100">
</dsfr-data-chart>

Couleur fixée par modalité

selected-palette attribue les couleurs dans l'ordre des séries : la même modalité change de couleur dès que le filtrage change l'ordre. Quand une modalité porte une convention (le réalisé en bleu, l'objectif en rouge, un parti politique, un niveau d'alerte), color-map la fixe.

<dsfr-data-chart
  source="budget"
  type="line"
  label-field="mois"
  value-fields="realise,objectif"
  color-map="realise:#000091, objectif:#E1000F">
</dsfr-data-chart>

La modalité est un nom de série pour les courbes et les barres, un libellé de l'axe pour les parts d'un camembert. Les modalités non citées gardent la couleur de la palette : on ne fixe que ce qui doit l'être. Sans effet sur les cartes choroplèthes (type="map" et ses variantes), dont le dégradé est piloté par selected-palette. La même grammaire existe sur dsfr-data-map-layer.

Résumé des cartes

Une carte (type="map" et ses variantes) affiche sous son titre une valeur de synthèse. Par défaut, c'est la moyenne non pondérée des valeurs dessinées : chaque territoire pèse autant, quelle que soit sa taille. Pour un taux, ce n'est pas le taux national. La moyenne des taux de personnels des collèges par département vaut 4,27 %, le taux national 5,6 %. Sur un indicateur homogène, l'écart est faible et passe inaperçu ; sur un indicateur dispersé, il atteint le quart de la valeur, et rien à l'écran ne distingue les deux cas.

<!-- Taux national : moyenne des taux pondérée par l'effectif -->
<dsfr-data-chart
  source="personnels"
  type="map"
  code-field="code_dep"
  value-field="taux_personnels"
  map-summary-weight="nb_eleves">
</dsfr-data-chart>

Choisir l'effectif qui a servi de dénominateur au taux : pondérer un taux par élève par le nombre d'élèves rend exactement le rapport des deux sommes. Quand la valeur nationale est publiée par ailleurs et fait autorité, map-summary-value la reprend telle quelle. Seules les lignes dessinées entrent dans le calcul : une ligne au code géographique invalide ne pèse pas.

map-summary choisit le mode de synthèse, et la première question d'une carte thématique le décide : volume ou taux. Un volume s'additionne (map-summary="sum") — la moyenne d'un nombre de licenciés par département n'est pas un chiffre lisible, et une valeur écrite à la main dans map-summary-value cesse d'être juste au premier filtre. Un taux se pondère (map-summary="weighted"). map-summary="none" retire le chiffre quand l'indicateur ne se résume pas en un nombre — l'en-tête « en France » appartient à DSFR Chart et reste affiché.

<!-- Carte de volumes : le résumé est le total, et il suit les filtres -->
<dsfr-data-chart
  source="licences"
  type="map"
  code-field="code_dep"
  value-field="nb_licences"
  map-summary="sum">
</dsfr-data-chart>

Une somme suppose une partition : chaque territoire compté une fois. Deux lignes portant le même code sont additionnées toutes les deux alors que la carte n'en dessine qu'une — un avertissement console le signale, et il faut agréger en amont (dsfr-data-query group-by="code_dep"). Un mode inconnu, ou weighted sans map-summary-weight, est une erreur de configuration : aucun résumé n'est affiché plutôt qu'un chiffre de repli qui aurait l'air juste.

Le résumé porte sur la colonne value-field telle qu'elle arrive. L'arrondi au centième que la carte applique pour se dessiner ne compte pas — le calcul repart des lignes source. Mais un arrondi posé en amont (dsfr-data-normalize round="champ:1", le réflexe pour une infobulle lisible) réécrit la colonne dans la donnée : la pondération porte alors sur des valeurs arrondies, et le taux national est faux de peu — donc invisible. Mesuré sur les 101 départements d'une fédération sportive : 4,5331 au lieu de 4,5368. map-summary-field désigne la colonne de calcul, distincte de celle qu'on affiche.

<!-- Afficher l'arrondi, calculer sur la valeur brute -->
<dsfr-data-normalize id="n" source="licences"
  compute="lics_pop_aff = round(lics_pop, 1)"></dsfr-data-normalize>
<dsfr-data-chart
  source="n"
  type="map"
  code-field="code_dep"
  value-field="lics_pop_aff"
  map-summary-weight="pop"
  map-summary-field="lics_pop">
</dsfr-data-chart>

Un champ de calcul qu'aucune ligne dessinée ne porte en numérique est une erreur de configuration : aucun résumé n'est affiché, jamais un repli silencieux sur la colonne affichée — qui serait exactement le chiffre faux que l'attribut existe pour éviter.

Attributs DataBox

L'attribut databox active l'habillage DataBox DSFR autour du graphique : cadre editorial avec titre, source, date, switch chart/tableau integre, screenshot PNG, téléchargement CSV, plein écran, tendance.

Événements : le composant n'émet pas d'événement custom ; il participe au data-bridge en consommateur (abonnement à la source, états loading/erreur/vide rendus dans le wrapper).

Ce que le cadre fait de vos attributs (#1289)

Mesuré dans un navigateur, sur DSFR Chart 2.1.1. Deux attributs sont posés dans la page comme du HTML ; tous les autres sont rendus comme du texte — une balise qu'on y écrit se lit à l'écran, elle ne produit pas d'élément.

Ce qui est retiré du HTML. Les éléments script, iframe, object, embed, style, template, meta, base, link, textarea, title, xmp, noscript, noembed, noframes, plaintext, les animations SVG animate et set ; tout attribut on* ; les URL javascript:, vbscript: et data: dans href, src, action, formaction (une image en data: perd donc sa source) ; les commentaires. Le reste est rendu à l'identique.

Menu, infobulle et fenêtre exigent le JavaScript du DSFR. Le bouton « Plus d'actions » (qui porte « Télécharger en CSV », « Capture d'écran » et vos actions), l'infobulle (databox-tooltip-*) et la fenêtre d'information (databox-modal-*) sont des composants du DSFR : ils ne s'ouvrent que si la page charge dsfr.module.min.js. Sans lui, le clic ne fait rien ; le composant l'écrit une fois dans la console. Le basculement graphique / tableau fonctionne sans.

La fenêtre d'information exige deux attributs. databox-fullscreen et databox-modal-title : l'un sans l'autre ne rend rien, et un avertissement console nomme celui qui manque. databox-default-source est sans effet avec dsfr-data-chart, qui ne déclare au cadre qu'une source ; il est signalé de la même façon.

Brancher une action. databox-actions='["Source officielle","Méthode"]' ajoute deux entrées au menu. Une entrée n'a aucun comportement par elle-même : c'est un bouton qui porte data-action — le libellé en minuscules, sans accents, tout autre caractère remplacé par un tiret — et data-id, l'id du cadre (databox- suivi de l'id du graphique). La page écoute le clic :

document.addEventListener('click', (e) => {
  const bouton = e.target.closest('[data-action="source-officielle"]');
  if (bouton && bouton.dataset.id === 'databox-mon-graphique') {
    window.open('https://exemple.fr/source', '_blank', 'noopener');
  }
});

Une valeur mal formée — JSON invalide, autre chose qu'un tableau, entrée qui n'est pas une chaîne non vide — est une erreur de configuration (data-dsfr-config-error sur le composant, message dans la console) : les entrées fautives sont écartées, les autres gardées, et le cadre reste affiché.

Vue tableau de la DataBox. Elle reprend ce que le graphique trace : une colonne par champ de valeur (value-field, value-field-2, value-fields), dont l'en-tête est le libellé de la légende. Au format long (series-field), le tableau pivote comme le graphique : une ligne par libellé, une colonne par série, une cellule vide là où une série n'a pas d'observation. Le tableau montre 100 lignes au plus, comme celui de dsfr-data-a11y, et l'annonce sous le tableau : « Affichage limité aux 100 premières lignes sur N. » Les nombres y sont écrits en français, comme dans le tableau de dsfr-data-a11y (« 2,27 », « 1 234,5 », au plus deux décimales) ; une valeur non nulle inférieure à 0,01 en valeur absolue garde deux chiffres significatifs (0,00123 s'écrit « 0,0012 », jamais « 0 »). Les valeurs tracées, elles, ne changent pas. La colonne de libellé porte ce que l'axe affiche (empty-label compris), sous l'alias de label-field quand il est écrit : label-field="dep_nom:Département".

Types de graphiques

type accepte bar, line, pie, radar, gauge, scatter, bar-line et les quatre cartes choroplèthes map (départements), map-reg (régions), map-aca (académies) et map-monde. Les quatre variantes de carte sont des valeurs de type, pas des composants : elles n'ont pas de page propre et sont documentées dans Graphiques — map-chart, avec les clés géographiques attendues par chacune.

<dsfr-data-chart
  source="sites"
  type="bar"
  label-field="nom"
  value-field="score_rgaa"
  selected-palette="categorical"
  unit-tooltip="%">
</dsfr-data-chart>

<dsfr-data-chart
  source="sites"
  type="bar"
  label-field="ministere"
  value-field="score_rgaa"
  horizontal="true">
</dsfr-data-chart>

<dsfr-data-chart
  source="sites"
  type="line"
  label-field="nom"
  value-field="score_dsfr"
  unit-tooltip="%">
</dsfr-data-chart>

<dsfr-data-chart
  source="sites"
  type="line"
  label-field="nom"
  value-field="score_dsfr"
  reference-lines='[{"axis":"y","value":80,"label":"Objectif","color":"#c9191e"}]'>
</dsfr-data-chart>

<dsfr-data-chart
  source="fossiles"
  type="line"
  label-field="annee"
  value-field="part"
  unit-tooltip=" %"
  targets='[{"x":"2030","value":26,"label":"Cible 2030 : 26 %"}]'>
</dsfr-data-chart>

<dsfr-data-chart
  source="sites"
  type="pie"
  label-field="ministere"
  value-field="score_rgaa"
  selected-palette="categorical">
</dsfr-data-chart>

<dsfr-data-chart
  source="sites"
  type="radar"
  label-field="ministere"
  value-field="score_rgaa"
  y-min="0"
  y-max="100">
</dsfr-data-chart>

<dsfr-data-chart id="chart" source="data" type="bar"
  label-field="ministere" value-field="score_moyen"
  databox
  databox-title="Score RGAA moyen par ministere"
  databox-source="Referentiel RGAA"
  databox-date="2024"
  databox-download
  databox-screenshot>
</dsfr-data-chart>
<!-- Avec DataBox : pas de table ni download sur a11y -->
<dsfr-data-a11y for="chart" source="data"
  description="Ce graphique montre le score RGAA moyen par ministere.">
</dsfr-data-a11y>

Comparaison : dsfr-data-chart vs DSFR Chart natif