Chart

Un graphique sans dépendance.

Il couvre les trois formes qui reviennent dans un tableau de bord — courbe, aire, barres — et rien d'autre. recharts reste le bon choix dès qu'il faut des axes secondaires, du zoom ou des annotations; il pèse alors 90 ko qu'un projet choisit d'ajouter plutôt que de subir.

Installation

sia-ui add chart

Ou par le paquet, sans rien copier :

import { Chart, Sparkline } from "@sia-ui/react-web";

Props de Chart

Prop	Type	Défaut	Description
* series	ChartSeries[]	—
caption	ReactNode	—
className	string	—
format	(value: number) => string	(value) => String(value)	Mise en forme des valeurs — montants, pourcentages.
height	number	220
labels	string[]	[]	Les libellés de l'axe horizontal. Un par point.
max	number	—
min	number	—	Bornes de l'axe vertical. Par défaut, déduites des données.
readOnly	boolean	false	Rend le graphique muet : ni survol, ni infobulle.
showAxis	boolean	true
showGrid	boolean	true
showLegend	boolean	true
type	"line" | "area" | "bar"	line

Props de Sparkline

Une courbe minuscule, sans axes ni survol.

Elle tient dans une cellule de tableau ou une carte de statistique, là où un graphique complet ne rentrerait pas.

Prop	Type	Défaut	Description
* values	number[]	—
className	string	—
color	string	—
filled	boolean	false	Ajoute l'aire sous la courbe.
height	number	32
tone	ComponentTone	primary
width	string | number	100%

* obligatoire.

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.