Chart · sparkline

Tendencia mínima al lado de un número (tablas, rail). Sin ejes.

Primitiva disponible en la biblioteca, sin uso directo en la app actual. Mini tendencia dentro de una fila o una métrica.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/sparkline.json

import

import { Sparkline } from "@moodinary/ui/components/sparkline";

Ejemplos

En filas

Al lado del nombre del equipo.

Datos ilustrativos.

4.º A

Equipo Ventas

Código

inline.tsx

import { Sparkline } from "@moodinary/ui/components/sparkline";

const rows = [
	{ data: [3.6, 3.4, 3.1, 2.9, 2.8], team: "4.º A" },
	{ data: [3.0, 3.2, 3.3, 3.5, 3.6], team: "Equipo Ventas" },
];

export default function ChartSparklineInline() {
	return (
		<div className="grid gap-2">
			<p className="text-ink-3 text-xs">Datos ilustrativos.</p>
			{rows.map((r) => (
				<div className="flex items-center gap-3" key={r.team}>
					<span className="w-28">{r.team}</span>
					<Sparkline data={r.data} />
				</div>
			))}
		</div>
	);
}

Tamaños

width y height en px.

Código

sizes.tsx

import { Sparkline } from "@moodinary/ui/components/sparkline";

export default function ChartSparklineSizes() {
	return (
		<div className="flex items-end gap-6">
			<Sparkline data={[3, 3.4, 3.2, 3.8]} height={18} width={60} />
			<Sparkline data={[3, 3.4, 3.2, 3.8]} />
			<Sparkline data={[3, 3.4, 3.2, 3.8]} height={40} width={160} />
		</div>
	);
}

Props

Sparkline

Prop	Tipo	Default	Descripción
data	number[]	-	Valores. Con menos de 2 no dibuja nada.
width	number	90	Ancho.
height	number	26	Alto.
className	string	-	Clases extra.

Cuándo sí y cuándo no

Hacé

Usala junto a un número.
Mantené el mismo tamaño en una lista.
Usá al menos 4 puntos.

Evitá

No la uses como gráfico principal.
No le agregues ejes.
No la muestres con Niebla.

Tiene role="img" y anuncia el último valor.