BarChart

Gráfico de barras SVG nativo. Admite layouts horizontales y verticales, agrupamiento y apilamiento de categorías, interactividad con tooltips en columnas o filas y leyendas dinámicas.

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { BarChart } from "@tsukira/ui"; const data = [  { año: "2023", Q1: 400, Q2: 300, Q3: 200 },  { año: "2024", Q1: 450, Q2: 380, Q3: 280 },  { año: "2025", Q1: 520, Q2: 430, Q3: 310 },]; <BarChart  data={data}  index="año"  categories={["Q1", "Q2", "Q3"]}  layout="vertical"  type="grouped"/>

Ejemplos#

Playground

Juega con las variantes del gráfico

layout

type

Opciones

showGridLinesshowLegendshowTooltip

Gráfico Apilado (Stacked) Horizontal

Barras horizontales apiladas para comparar sumas y porciones

API#

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

Prop	Tipo	Default	Descripción
`data`*	`Record<string, any>[]`	—	Dataset a graficar
`index`*	`string`	—	Propiedad usada como índice (eje principal)
`categories`*	`string[]`	—	Categorías (propiedades del dataset) a graficar como series
`colors`	`ChartTone[]`	—	Tonos de color asignados a cada categoría secuencialmente
`layout`	`'vertical' \| 'horizontal'`	—	Disposición de las barras: vertical u horizontal
`type`	`'grouped' \| 'stacked'`	—	Tipo de gráfico: agrupado (grouped) o apilado (stacked)
`showGridLines`	`boolean`	—	Mostrar líneas de cuadrícula
`showXAxis`	`boolean`	—	Mostrar eje principal
`showYAxis`	`boolean`	—	Mostrar eje secundario
`showLegend`	`boolean`	—	Mostrar leyenda interactiva
`showTooltip`	`boolean`	—	Mostrar tooltip interactivo en hover
`valueFormatter`	`(value: number) => string`	—	Formateador del valor del eje y tooltip
`height`	`number \| string`	—	Altura del gráfico