BarChart

Gráfica de barras, apiladas por defecto, para comparar cantidades por periodo o categoría.

Cuándo usarlo

Props. labels, series, stacked (true por defecto; false para agrupadas), format(v), legend, width/height. Barras de 32px máx. con esquinas de 4px arriba.

Uso. Gasto por categoría y mes. Mismos colores de serie que LineChart.

Tercera serie en oscuro. En oscuro la escala de marca se invierte: la tercera serie (utility-brand-200) queda oscura sobre el fondo oscuro. Con tres series o más, deja siempre la leyenda (sale sola desde dos series) y, si hace falta, dale a esa serie un color propio.

Accesibilidad. El dibujo es una imagen con nombre: pasa en aria-label qué cuenta la gráfica; por defecto dice "Gráfica de barras". Cada barra lleva su valor en un título que se ve al pasar el ratón.

Detalles. Funciona sin JavaScript, también con format en Astro. Apiladas, solo la barra de arriba lleva las esquinas redondeadas.

Ejemplos

Hogar
Ocio
Transporte

Props

Prop	Tipo	Por defecto	Descripción
`labels`obligatoria	`string[]`	—	Etiquetas del eje horizontal, una por barra.
`series`obligatoria	`ChartSeries[]`	—	Sin `color`, la paleta de series en orden (como `LineChart`).
`stacked`	`boolean`	`true`	Barras apiladas; `false` para agrupadas.
`format`	`((v: number) => string)`	—	Formato de los valores en el eje y en el título de cada barra.
`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 barras"`	Qué cuenta la gráfica, para lectores de pantalla.
`className`	`string`	—

Código

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

export default function Page() {
	return (
		<>
			<BarChart
				aria-label="Gasto por categoría y mes"
				labels={["Ago", "Sep", "Oct"]}
				series={[
					{ name: "Hogar", data: [700, 700, 700] },
					{ name: "Ocio", data: [190, 170, 210] },
				]}
				format={(v) => formatCurrency(v)}
			/>
		</>
	);
}

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

<BarChart
	aria-label="Gasto por categoría y mes"
	labels={["Ago", "Sep", "Oct"]}
	series={[
		{ name: "Hogar", data: [700, 700, 700] },
		{ name: "Ocio", data: [190, 170, 210] },
	]}
	format={(v) => formatCurrency(v)}
/>