AreaChart

Gráfico de áreas continuo en SVG puro sin dependencias externas. Soporta múltiples categorías apiladas, leyendas interactivas para ocultar/mostrar series, líneas de cuadrícula y tooltips flotantes en hover.

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { AreaChart } from "@tsukira/ui"; const data = [  { mes: "Ene", ventas: 4000, beneficios: 2400 },  { mes: "Feb", ventas: 3000, beneficios: 1398 },  { mes: "Mar", ventas: 2000, beneficios: 9800 },  { mes: "Abr", ventas: 2780, beneficios: 3908 },]; <AreaChart  data={data}  index="mes"  categories={["ventas", "beneficios"]}  colors={["brand", "success"]}/>

Ejemplos#

Playground

Ajusta las propiedades y observa el comportamiento

Propiedades

showGridLinesshowXAxisshowYAxisshowLegendshowTooltip

Estadísticas de un solo canal

Gráfico de una sola categoría útil para análisis específicos

API#

AreaChartPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'data'>

Prop	Tipo	Default	Descripción
`data`*	`Record<string, any>[]`	—	Dataset a graficar
`index`*	`string`	—	Propiedad usada como índice del eje X
`categories`*	`string[]`	—	Categorías (propiedades del dataset) a graficar como series
`colors`	`ChartTone[]`	—	Tonos de color asignados a cada categoría secuencialmente
`showGridLines`	`boolean`	—	Mostrar líneas de cuadrícula horizontal
`showXAxis`	`boolean`	—	Mostrar eje X
`showYAxis`	`boolean`	—	Mostrar eje Y
`showLegend`	`boolean`	—	Mostrar leyenda interactiva
`showTooltip`	`boolean`	—	Mostrar tooltip interactivo en hover
`valueFormatter`	`(value: number) => string`	—	Formateador del valor del eje Y y tooltip
`height`	`number \| string`	—	Altura del gráfico (puede ser número en px o string tipo "100%")