Cartesian Charts
Basculez aussi le thème clair/sombre : les textes, axes et grilles suivent DaisyUI.
Line
5 séries, axe catégoriel. La légende est en HTML sous le graphe, marquée d'un trait plutôt que d'une pastille : une courbe se légende par un trait. Le sélecteur essaie les quatre placements — la bibliothèque les offre tous et n'en choisit aucun à la place de l'application, y compris de façon responsive.
- norway
- germany
- us
- france
- japan
Line — axe temporel
xScale='time' : les ticks sont formatés dans la locale active (dayjs).
Infobulle formatée — Line et Bar
Sans format, l'infobulle écrit la valeur comme un nombre de la langue active (1 234 567,89 en français) au lieu du 1234567.89 brut de nivo. yFormat / valueFormat acceptent une chaîne d3-format ou une fonction : ici un montant en euros, pendant que l'axe garde une écriture compacte.
- 2025
- 2026
- 2025
- 2026
Bar
Une seule série, sans légende — les marges se réduisent d'elles-mêmes.
StackBar
6 séries empilées — la limite de lisibilité de la palette 'brand'. legend={{ values : true }} imprime le total de chaque série à côté de son nom : sur un empilement c'est bien une somme, et elle est éteinte par défaut parce qu'elle ne veut pas dire la même chose d'un graphe à l'autre.
- hot dog896
- burger911
- sandwich765
- kebab790
- fries928
- donut870
Bar horizontal
layout='horizontal' — xAxis reste l'axe du bas, yAxis celui de gauche.
Marimekko
L'épaisseur de chaque barre porte elle aussi une valeur — ici le nombre de répondants. Un empilement classique montrerait quatre barres identiques et masquerait que « Les open spaces » pèse cinq fois « Le flex office ».
- pour
- neutre
- contre
Marimekko — offset='expand'
Toutes les barres ramenées à la même longueur : les empilements deviennent des pourcentages, l'épaisseur garde le poids absolu.
- pour
- neutre
- contre
États — vide et chargement
Gérés une fois dans ChartFrame, donc identiques sur les 14 composants. La boîte garde sa taille dans les trois états : la page ne saute pas quand les données arrivent.
Aucune donnée sur la période
Aucune donnée sur la période
Élargis l'intervalle ou change de filtre.
Infobulles — placement
La bulle se place elle-même : au-dessus du curseur tant que la fenêtre le permet, en dessous sinon, et toujours ramenée à l'intérieur de l'écran. Survole le dernier point à droite d'une courbe, puis un point tout en haut d'un graphe.
Dans une carte qui coupe ce qui dépasse — overflow-hidden — la bulle en sort quand même.