1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Gráficos y Estadísticas dataanalyticschartbar

Bar Chart

Gráfico de barras vertical con esquinas redondeadas y datos comparativos por categorías.

Loading Chart...

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { BarChart } from 'astro-component-kit';

const categories = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
const series = [{ name: 'Sessions', data: [44, 55, 41, 67, 22] }];
---

<BarChart 
  title="Daily Traffic" 
  categories={categories}
  series={series}
/>
--- import { BarChart } from 'astro-component-kit'; const categories = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']; const series = [{ name: 'Sessions', data: [44, 55, 41, 67, 22] }]; --- <BarChart title="Daily Traffic" categories={categories} series={series} />

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/BarChart.astro:

astro 
---
import { BarChart } from 'astro-component-kit/charts';

// Example 1: Vertical Bars
const cat1 = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
const ser1 = [{ name: 'Sessions', data: [44, 55, 41, 67, 22] }];

// Example 2: Horizontal Stacked
const cat2 = ['Q1', 'Q2', 'Q3', 'Q4'];
const ser2 = [
  { name: 'Product A', data: [12, 17, 11, 9] },
  { name: 'Product B', data: [15, 11, 14, 18] }
];
---

<!-- Basic Vertical -->
<BarChart 
  title="Daily Sessions" 
  categories={cat1}
  series={ser1}
/>

<!-- Horizontal Stacked -->
<BarChart 
  title="Quarterly Sales" 
  subtitle="Product distribution by quarter"
  categories={cat2}
  series={ser2}
  horizontal={true}
  stacked={true}
/>
--- import { BarChart } from 'astro-component-kit/charts'; // Example 1: Vertical Bars const cat1 = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']; const ser1 = [{ name: 'Sessions', data: [44, 55, 41, 67, 22] }]; // Example 2: Horizontal Stacked const cat2 = ['Q1', 'Q2', 'Q3', 'Q4']; const ser2 = [ { name: 'Product A', data: [12, 17, 11, 9] }, { name: 'Product B', data: [15, 11, 14, 18] } ]; --- <!-- Basic Vertical --> <BarChart title="Daily Sessions" categories={cat1} series={ser1} /> <!-- Horizontal Stacked --> <BarChart title="Quarterly Sales" subtitle="Product distribution by quarter" categories={cat2} series={ser2} horizontal={true} stacked={true} />

Información Rápida

Categoría
Gráficos y Estadísticas
Nombre de archivo
BarChart.astro
Dependencias
apexcharts (peer)
Etiquetas
dataanalyticschartbar