Données

Graphiques

stable

Palette

--chart-1 … --chart-5 sont les couleurs de série, dans l'ordre d'apparition ; --chart-1 et --chart-5 suivent le métier (accent et brand), les trois autres sont stables. --chart-grid est la grille. Hublot.chartPalette() renvoie les cinq valeurs calculées sur le document : à passer à ECharts (color) et à rappeler au changement de thème ou de métier.

chart-1 chart-2 chart-3 chart-4 chart-5

Code

<div class="hb-row">
  <span class="hb-badge hb-badge-plain" style="background:var(--chart-1);color:var(--on-accent)">chart-1</span>
  <span class="hb-badge hb-badge-plain" style="background:var(--chart-2);color:var(--on-brand)">chart-2</span>
  <span class="hb-badge hb-badge-plain" style="background:var(--chart-3);color:var(--on-brand)">chart-3</span>
  <span class="hb-badge hb-badge-plain" style="background:var(--chart-4);color:var(--on-brand)">chart-4</span>
  <span class="hb-badge hb-badge-plain" style="background:var(--chart-5);color:var(--on-brand)">chart-5</span>
</div>
<svg viewBox="0 0 360 120" width="360" height="120" aria-label="Exemple : CA par jour" style="background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md)">
  <g stroke="var(--chart-grid)" stroke-width="1"><line x1="32" y1="20" x2="348" y2="20"/><line x1="32" y1="50" x2="348" y2="50"/><line x1="32" y1="80" x2="348" y2="80"/><line x1="32" y1="104" x2="348" y2="104"/></g>
  <g fill="var(--chart-1)"><rect x="48" y="60" width="28" height="44" rx="2"/><rect x="92" y="40" width="28" height="64" rx="2"/><rect x="136" y="52" width="28" height="52" rx="2"/><rect x="180" y="30" width="28" height="74" rx="2"/><rect x="224" y="44" width="28" height="60" rx="2"/><rect x="268" y="24" width="28" height="80" rx="2"/><rect x="312" y="36" width="28" height="68" rx="2"/></g>
  <polyline fill="none" stroke="var(--chart-5)" stroke-width="2" points="62,70 106,56 150,62 194,42 238,50 282,34 326,40"/>
  <g font-family="Roboto" font-size="10" fill="var(--ink-muted)"><text x="62" y="116" text-anchor="middle">lun.</text><text x="106" y="116" text-anchor="middle">mar.</text><text x="150" y="116" text-anchor="middle">mer.</text><text x="194" y="116" text-anchor="middle">jeu.</text><text x="238" y="116" text-anchor="middle">ven.</text><text x="282" y="116" text-anchor="middle">sam.</text><text x="326" y="116" text-anchor="middle">dim.</text></g>
</svg>

Règles

Une série, une couleur, dans l'ordre : pas de choix de couleur par graphique. La série principale est --chart-1.
Les états (succès, avertissement, erreur) ne servent pas de couleurs de série ; ils marquent un point ou une zone (seuil dépassé).
Texte des axes en --ink-muted à 11 px au moins, grille en --chart-grid, pas d'ombre ni de dégradé ; le fond est celui de la carte.
Un graphique a un titre et, s'il montre une tendance, la valeur courante à côté (tuile ou mesure) ; la courbe seule n'est pas une information.
Les mêmes valeurs existent pour Grafana et les PDF dans dist/json/tokens.flat.json.