LineChart y AreaChart

Valores en el tiempo, suaves o rectos, con áreas, apilado, un tooltip y una vista de tabla de datos.

import { LineChart, AreaChart } from '@alea/pro';

Ejemplos

Líneas en el tiempo

Pasa el mouse, o Tab hasta el gráfico y usa las flechas, para leer cada mes. El botón de tabla muestra los mismos datos como tabla.

Visits and sign-ups

Both grew every month since August.

Visits
Sign-ups

Área apilada

Partes de un todo en el tiempo: tráfico por fuente.

Traffic by source

Direct
Search
Social

Escalones, carga y foco en la leyenda

curve="step" para valores que cambian y se mantienen; isLoading muestra un relleno con brillo.

Plan and seats

Hover a legend item to focus its line.

Plan tier
Seats

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

--alea-border…
--alea-border-control…
--alea-focus…
--alea-text-muted…

Type

--alea-font-family-body…

Motion

--alea-motion-duration-base…
--alea-motion-duration-fast…
--alea-motion-duration-slower…
--alea-motion-ease-out…
--alea-motion-spring…

Props

`LineChart` props

Valores en el tiempo. Pasa el mouse o usa las flechas (después de Tab) para leer cada punto.

Prop	Tipo	Por defecto	Descripción
`data`obligatoria	`ChartRow[]`	-	Filas de datos, una por valor de x o categoría.
`series`obligatoria	`Series[]`	-	Las series a dibujar: key en cada fila, label para la leyenda, color opcional.
`x`obligatoria	`string`	-	La clave del eje x (fechas, meses, categorías).
`area`	`boolean`	-	Rellena bajo las líneas (un gráfico de área).
`className`	`string`	-	Clases extra para el elemento raíz.
`curve`	`"step" \| "smooth" \| "linear"`	`'smooth'`	smooth (por defecto), líneas rectas, o escalones (valores que cambian en un momento y se mantienen).
`description`	`ReactNode`	-	Una oración sobre lo que muestran los datos; se lee antes del gráfico.
`height`	`number`	`260`	Altura del gráfico en px. Por defecto 260.
`isLoading`	`boolean`	-	Muestra un relleno con brillo mientras cargan los datos.
`showDots`	`boolean`	-	Puntos en cada valor.
`showTable`	`boolean`	`true`	Muestra el botón de tabla. Por defecto true.
`stacked`	`boolean`	-	Apila las áreas una sobre otra.
`title`	`ReactNode`	-	El título que se muestra arriba y que leen los lectores de pantalla.
`valueFormat`	`((v: number) => string)`	-	Da formato a los valores (eje, tooltip, tabla).
`xFormat`	`((x: string \| number) => string)`	-	Da formato a las etiquetas de x.
`zeroBased`	`boolean`	`true`	Empieza el eje y en cero. Por defecto true.

`AreaChart` props

Un LineChart relleno por debajo; stacked muestra partes de un todo en el tiempo.

Prop	Tipo	Por defecto	Descripción
`data`obligatoria	`ChartRow[]`	-	Filas de datos, una por valor de x o categoría.
`series`obligatoria	`Series[]`	-	Las series a dibujar: key en cada fila, label para la leyenda, color opcional.
`x`obligatoria	`string`	-	La clave del eje x (fechas, meses, categorías).
`className`	`string`	-	Clases extra para el elemento raíz.
`curve`	`"step" \| "smooth" \| "linear"`	-	smooth (por defecto), líneas rectas, o escalones (valores que cambian en un momento y se mantienen).
`description`	`ReactNode`	-	Una oración sobre lo que muestran los datos; se lee antes del gráfico.
`height`	`number`	-	Altura del gráfico en px. Por defecto 260.
`isLoading`	`boolean`	-	Muestra un relleno con brillo mientras cargan los datos.
`showDots`	`boolean`	-	Puntos en cada valor.
`showTable`	`boolean`	-	Muestra el botón de tabla. Por defecto true.
`stacked`	`boolean`	-	Apila las áreas una sobre otra.
`title`	`ReactNode`	-	El título que se muestra arriba y que leen los lectores de pantalla.
`valueFormat`	`((v: number) => string)`	-	Da formato a los valores (eje, tooltip, tabla).
`xFormat`	`((x: string \| number) => string)`	-	Da formato a las etiquetas de x.
`zeroBased`	`boolean`	-	Empieza el eje y en cero. Por defecto true.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Variantes: curvestepsmoothlinear
Estados: Keyboard focus
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-chart-svgwrap.alea-chart-svg.alea-chart-grid.alea-chart-axis.alea-chart-area.alea-chart-line.alea-chart-dot.alea-chart-cross

Una figura con título y descripción; el gráfico es una imagen con un resumen como nombre (desde, hasta, el más alto).
Tab hasta el gráfico, y luego las flechas leen cada punto en voz alta.
Todo gráfico puede cambiar a una tabla de datos real.

Teclado

Tecla	Acción
`Tab`	Enfoca el gráfico
`Flecha izquierda` / `Derecha`	Lee el punto anterior o siguiente
`Inicio` / `Fin`	Primer o último punto
`Escape`	Oculta el tooltip

Qué hacer y qué evitar

Hacer

Escribe la descripción como la conclusión: "Las visitas se duplicaron tras el lanzamiento".
Limítalo a cuatro series o menos.

Evitar

No dependas solo del color: nombra las series en la leyenda.

En Figma

Marcos de gráficos con las mismas variables de paleta (chart/1 a chart/8).