Custom Charts Collection: Bar, Line, & Pie

Start telling stories with your data. We’ve expanded our chart collection to include Line Charts and Pie Charts, along with our beloved Bar Charts.

All charts support our signature hand-drawn aesthetic, CSS-only animations, and scroll triggers.

The Components

We’ve organized these components into a dedicated charts folder:

src/components/charts/

<BarChart />
<LineChart />
<PieChart />

You can use them directly in your MDX files.

1. Bar Charts

Perfect for comparing categories.

Clean Style

Hand-Drawn Style

Scribble Style

2. Line Charts [NEW]

Great for showing trends over time.

Basic Line

Sketchy Line with Area

3. Pie Charts [NEW]

Visualizing proportions has never been this fun.

Hand-Drawn Pie

Work

Sleep

Play

Scribble & Animation

Code

Coffee

Bugs

4. Scroll-Triggered Animations

All charts support trigger="visible". The animation will only start when the chart enters the viewport.

↓ Scroll down to trigger the chart below ↓

Implementation Guide

To use these yourself:

Placement: Keep your components organized in src/components/charts/.
Import: Import them into your Astro pages or layout.
Usage: Pass data as an array of { label, value }.
Styling: Use the style prop to switch between “clean”, “hand-drawn”, “scribble”, etc.

<PieChart 
  data={[{ label: 'A', value: 10 }, { label: 'B', value: 20 }]} 
  style="hand-drawn" 
/>

Now go forth and visualize!