Charts dataanalyticschartbar

Bar Chart

A clean bar chart with rounded corners and multi-series support.

Loading Chart...

Usage

Copy the full block below to use this component with its imports.

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} />

Manual Installation

If you are not using the npm package, create a new file src/components/lib/BarChart.astro and paste the following code:

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} />

Quick Info

Category
Charts
Filename
BarChart.astro
Dependencies
apexcharts (peer)
Tags
dataanalyticschartbar