visual-lab

chart-01-stadium-bars

Barres à sommet arrondi

Un histogramme réduit à l'essentiel : des barres à sommet en demi-cercle, aucune ligne d'axe, des légendes en pilules.

chartslidesocialweb348×312pxaucun benchmark

Télécharger le .zip

Le fragment RÉEL, dans son propre document, sur le sol de sa charte — pas une image. Ce que vous voyez est exactement ce que vous collerez.

Employer quand

Trois à six valeurs d'une même série sur un axe temporel, dans un deck. La progression doit se voir en une seconde, sans lecture de grille.

Éviter quand

Il faut comparer plusieurs séries, lire des valeurs précises, ou les écarts sont faibles — le sommet arrondi mange quelques pixels de hauteur et fausse la comparaison fine. Dans ce cas : barres droites et axe gradué.

Notes

Le sommet est un demi-cercle COMPLET : le rayon vaut la moitié de la largeur de barre (999px sature au bon endroit). Un rayon plus petit fait « bouton » ; arrondir aussi le bas ferait flotter la barre au-dessus de sa ligne de base. Le dégradé de couleur suit l'ordre chronologique et sert de second signal de progression — ne pas colorer par catégorie. Aucun axe tracé : les pilules de légende font la ligne de base, un trait en plus ne dirait rien.

Mots-clés

graphiquebarreshistogrammedatavizdeckrevenusprogressionarrondiaxe

Le code

fragment — patterns/chart-01-stadium-bars.html Télécharger
<!-- chart-01-stadium-bars — fragment autonome. Couleurs via --vl-* uniquement. -->
<div style="padding:32px;border-radius:var(--vl-radius-card);
     background:var(--vl-surface-dark);color:var(--vl-ink-invert);display:inline-block">
  <div class="vl-bars">
    <div class="vl-bars__col"><span class="vl-bars__val">1.8M</span>
      <span class="vl-bars__bar" style="height:78px;background:var(--vl-surface-light)"></span></div>
    <div class="vl-bars__col"><span class="vl-bars__val">$2.5M</span>
      <span class="vl-bars__bar" style="height:108px;background:var(--vl-accent)"></span></div>
    <div class="vl-bars__col"><span class="vl-bars__val">$3.6M</span>
      <span class="vl-bars__bar" style="height:155px;background:var(--vl-accent-2)"></span></div>
    <div class="vl-bars__col"><span class="vl-bars__val">$4.4M</span>
      <span class="vl-bars__bar" style="height:190px;background:var(--vl-accent-3)"></span></div>
  </div>
  <div class="vl-bars__axis"><span>2025</span><span>2026</span><span>2027</span><span>2028</span></div>
</div>

<style>
.vl-bars { display: flex; align-items: flex-end; gap: 20px; }
.vl-bars__col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vl-bars__val { font-size: 13px; }
/* Le sommet est un DEMI-CERCLE COMPLET, pas un coin adouci : le rayon vaut la moitié de la
   largeur de barre (999px sature au bon endroit). Un rayon plus petit fait « bouton », et
   arrondir aussi le bas ferait flotter la barre au-dessus de sa ligne de base. */
.vl-bars__bar { width: 56px; border-radius: 999px 999px 0 0; }
/* Pas d'axe tracé : chaque légende est une pilule pleine, alignée sur la largeur de barre.
   Une ligne d'axe en plus ajouterait un trait pour rien. */
.vl-bars__axis { display: flex; gap: 20px; margin-top: 10px; }
.vl-bars__axis span {
  width: 56px; text-align: center; padding: 5px 0; border-radius: 999px;
  background: var(--vl-surface-tile); color: var(--vl-ink-invert-muted); font-size: 11px;
}
</style>
tokens de la charte — systems/ref-03-bento-dark-pitch.json Télécharger
:root {
  --vl-bg: #2E2E2E;
  --vl-board: #2E2E2E;
  --vl-surface-light: #FFFFFF;
  --vl-surface-dark: #111111;
  --vl-surface-tile: #3A3A3A;
  --vl-accent: #CFE3F5;
  --vl-accent-2: #8FBBE4;
  --vl-accent-3: #5E9BD6;
  --vl-ink: #111111;
  --vl-ink-muted: #6B6B6B;
  --vl-ink-invert: #FFFFFF;
  --vl-ink-invert-muted: #A0A0A0;
  --vl-hairline: #D5D5D5;
  --vl-hairline-invert: #4A4A4A;
  --vl-radius-card: 24px;
  --vl-radius-sub: 20px;
  --vl-radius-tile: 16px;
  --vl-gap: 12px;
}
les métadonnées — patterns/chart-01-stadium-bars.json (télécharger) 
{
  "name": "Barres à sommet arrondi",
  "family": "chart",
  "ref": "ref-03-bento-dark-pitch",
  "intent": "Un histogramme réduit à l'essentiel : des barres à sommet en demi-cercle, aucune ligne d'axe, des légendes en pilules.",
  "when_to_use": "Trois à six valeurs d'une même série sur un axe temporel, dans un deck. La progression doit se voir en une seconde, sans lecture de grille.",
  "avoid_when": "Il faut comparer plusieurs séries, lire des valeurs précises, ou les écarts sont faibles — le sommet arrondi mange quelques pixels de hauteur et fausse la comparaison fine. Dans ce cas : barres droites et axe gradué.",
  "tags": [
    "graphique",
    "barres",
    "histogramme",
    "dataviz",
    "deck",
    "revenus",
    "progression",
    "arrondi",
    "axe"
  ],
  "vars": [
    {
      "name": "--vl-accent",
      "role": "barres intermédiaires",
      "default": "#CFE3F5"
    },
    {
      "name": "--vl-accent-2",
      "role": "barres intermédiaires",
      "default": "#8FBBE4"
    },
    {
      "name": "--vl-accent-3",
      "role": "barre de fin de série",
      "default": "#5E9BD6"
    },
    {
      "name": "--vl-surface-tile",
      "role": "fond des pilules d'axe",
      "default": "#3A3A3A"
    }
  ],
  "slots": [
    "values",
    "bars",
    "axis"
  ],
  "notes": "Le sommet est un demi-cercle COMPLET : le rayon vaut la moitié de la largeur de barre (999px sature au bon endroit). Un rayon plus petit fait « bouton » ; arrondir aussi le bas ferait flotter la barre au-dessus de sa ligne de base. Le dégradé de couleur suit l'ordre chronologique et sert de second signal de progression — ne pas colorer par catégorie. Aucun axe tracé : les pilules de légende font la ligne de base, un trait en plus ne dirait rien.",
  "media": [
    "slide",
    "social",
    "web"
  ],
  "id": "chart-01-stadium-bars"
}

À côté