Introducing Custom Charts Collection

Visual storytelling is at the heart of Kinetix. We realized that standard chart libraries didn’t fit our “sketchbook” aesthetic, so we built our own set of Astro components that render directly from our markdown.

This allows us to drop in charts as easily as images, but with full interactivity and CSS styling.

1. Bar Charts

Use the <BarChart /> component to compare values. It supports both a corporate “clean” style and our signature “hand-drawn” look.

Clean Style

Perfect for formal reports or precise data.

Hand-Drawn Style

Using SVG filters to simulate rough paper edges.

2. Line Charts

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