Charts for Astro

Chart.ts is perfect for Astro. SVG rendering means charts ship as HTML with zero JavaScript by default. Use the core library directly in .astro files, or use framework components with client:load when you need interactivity.

$npm install @chartts/core
example.tsx
---
// src/pages/dashboard.astro
import { line } from "@chartts/core"

const data = await fetch("/api/metrics").then(r => r.json())
const svg = line({
  data,
  x: "month",
  y: "revenue",
  width: 600,
  height: 300,
})
---

<div class="chart-wrapper" set:html={svg} />

<!-- Zero JavaScript shipped. Pure SVG HTML. -->

Features

Zero JavaScript by default
SVG renders as static HTML
Works in .astro files directly
Use with React/Vue/Svelte islands
Tailwind CSS integration
Content Collections compatible
Under 15kb gzipped
Read the DocsSee DemosExamples