Charts dataanalyticschartareapremium

Area Chart

A premium, smooth area chart with gradient fills and glassmorphism tooltips.

Loading Chart...

Usage

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

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

const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
const series = [{ 
  name: 'Sales', 
  data: [31, 40, 28, 51, 42] 
}];
---

<AreaChart 
  title="Monthly Sales" 
  categories={categories}
  series={series}
  variant="primary"
/>
--- import { AreaChart } from 'astro-component-kit'; const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May']; const series = [{ name: 'Sales', data: [31, 40, 28, 51, 42] }]; --- <AreaChart title="Monthly Sales" categories={categories} series={series} variant="primary" />

Manual Installation

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

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

// Example 1: Basic Revenue
const cat1 = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
const ser1 = [{ name: 'Revenue', data: [31, 40, 28, 51, 42] }];

// Example 2: Comparison
const cat2 = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
const ser2 = [
  { name: 'Direct', data: [45, 52, 38, 24, 33] },
  { name: 'Social', data: [12, 17, 11, 9, 15] }
];
---

<!-- Single Series -->
<AreaChart 
  title="Monthly Revenue" 
  categories={cat1}
  series={ser1}
/>

<!-- Multi-series Comparison -->
<AreaChart 
  title="Traffic Sources" 
  subtitle="Comparing direct vs social traffic"
  categories={cat2}
  series={ser2}
  colors={['#b8860b', '#3b82f6']}
/>
--- import { AreaChart } from 'astro-component-kit/charts'; // Example 1: Basic Revenue const cat1 = ['Jan', 'Feb', 'Mar', 'Apr', 'May']; const ser1 = [{ name: 'Revenue', data: [31, 40, 28, 51, 42] }]; // Example 2: Comparison const cat2 = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']; const ser2 = [ { name: 'Direct', data: [45, 52, 38, 24, 33] }, { name: 'Social', data: [12, 17, 11, 9, 15] } ]; --- <!-- Single Series --> <AreaChart title="Monthly Revenue" categories={cat1} series={ser1} /> <!-- Multi-series Comparison --> <AreaChart title="Traffic Sources" subtitle="Comparing direct vs social traffic" categories={cat2} series={ser2} colors={['#b8860b', '#3b82f6']} />

Quick Info

Category
Charts
Filename
AreaChart.astro
Dependencies
apexcharts (peer)
Tags
dataanalyticschartareapremium