LineChart

Gráfica de líneas para la evolución de una o varias series en el tiempo.

Cuándo usarlo

Props. labels, series [{name, data, color?}], format(v) (eje y tooltip), area (relleno suave bajo la primera serie), legend, width/height (proporción del SVG, se escala al ancho), aria-label.

Colores. Por orden: utility-brand-600, utility-brand-400, utility-brand-200, utility-sky-500, utility-pink-500, utility-neutral-400, igual que las series del archivo (la marca primero, en degradado). Rejilla border-tertiary; ejes text-xs en text-tertiary.

Reglas. Máximo 4 series. Si hay que comparar valores exactos, una tabla. Escala desde cero.

Tercera serie en oscuro. En oscuro la escala de marca se invierte, como en el archivo: utility-brand-200 queda oscura sobre el fondo oscuro y la tercera línea casi no se ve. Con tres series o más, deja siempre la leyenda (sale sola desde dos series) y, si la tercera importa, dale un color propio de más contraste, como var(--utility-sky-500).

Accesibilidad. El dibujo es una imagen con nombre: pasa en aria-label qué cuenta la gráfica ("Gastos de noviembre a octubre"); por defecto dice "Gráfica de líneas". Cada punto lleva su valor en un título que se ve al pasar el ratón. Si los valores exactos importan, acompáñala de una Table.

Detalles. Funciona sin JavaScript, también con format en Astro. Para cifras, usa formatNumber o formatCurrency del paquete: toLocaleString("es-ES") no agrupa los números de cuatro cifras ("1500 €").

Ejemplos

Gastos
Presupuesto

Props

Prop	Tipo	Por defecto	Descripción
`labels`obligatoria	`string[]`	—	Etiquetas del eje horizontal, una por punto.
`series`obligatoria	`ChartSeries[]`	—	Hasta 4 series. Sin `color`, la paleta de series en orden.
`format`	`((v: number) => string)`	—	Formato de los valores en el eje y en el título de cada punto, como `(v) => formatCurrency(v)`.
`area`	`boolean`	`true`	Relleno suave bajo la primera serie.
`legend`	`boolean`	—	Leyenda encima. Por defecto, sí con dos series o más.
`width`	`number`	`640`	Proporción del dibujo (se escala al ancho del contenedor).
`height`	`number`	`240`
`aria-label`	`string`	`"Gráfica de líneas"`	Qué cuenta la gráfica, para lectores de pantalla.
`className`	`string`	—

Código

import { LineChart } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<LineChart
				aria-label="Gastos de agosto a octubre"
				labels={["Ago", "Sep", "Oct"]}
				series={[
					{ name: "Gastos", data: [1240, 1060, 1284] },
					{ name: "Presupuesto", data: [1100, 1200, 1200] },
				]}
				format={(v) => formatCurrency(v)}
			/>
		</>
	);
}

---
import { LineChart } from "@jotis-me/react";
---

<LineChart
	aria-label="Gastos de agosto a octubre"
	labels={["Ago", "Sep", "Oct"]}
	series={[
		{ name: "Gastos", data: [1240, 1060, 1284] },
		{ name: "Presupuesto", data: [1100, 1200, 1200] },
	]}
	format={(v) => formatCurrency(v)}
/>